forensic-pathways/src/components/ToolCard.astro

---
// src/components/ToolCard.astro (Updated)
import ContributionButton from './ContributionButton.astro';
import ShareButton from './ShareButton.astro';

export interface Props {
  tool: {
    name: string;
    icon?: string;
    type?: string;
    description: string;
    domains: string[];
    phases: string[];
    platforms: string[];
    skillLevel: string;
    accessType: string;
    url: string;
    projectUrl?: string;
    license: string;
    tags: string[];
    statusUrl?: string;
    knowledgebase?: boolean;
  };
}

const { tool } = Astro.props;

// Check types
const isMethod = tool.type === 'method';
const isConcept = tool.type === 'concept';

// Check if tool has a valid project URL (means we're hosting it)
const hasValidProjectUrl = tool.projectUrl !== undefined && 
                          tool.projectUrl !== null && 
                          tool.projectUrl !== "" && 
                          tool.projectUrl.trim() !== "";

// Check if tool has knowledgebase entry
const hasKnowledgebase = tool.knowledgebase === true;

// Determine card styling based on type and hosting status
const cardClass = isConcept ? 'card card-concept tool-card' :
                  isMethod ? 'card card-method tool-card' : 
                  hasValidProjectUrl ? 'card card-hosted tool-card' : 
                  (tool.license !== 'Proprietary' ? 'card card-oss tool-card' : 'card tool-card');
---

<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer; border-left: 4px solid {isMethod ? 'var(--color-method)' : hasValidProjectUrl ? 'var(--color-hosted)' : tool.license !== 'Proprietary' ? 'var(--color-oss)' : 'var(--color-border)'};">
  <!-- Card Header with Fixed Height -->
  <div class="tool-card-header">
    <h3>
      {tool.icon && <span style="margin-right: 0.5rem; font-size: 1.125rem;">{tool.icon}</span>}
      {tool.name}
    </h3>
    <div class="tool-card-badges">
      <!-- Only show CC24-Server and Knowledgebase badges -->
      {!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
      {hasKnowledgebase && <span class="badge badge-error">📖</span>}
      <ShareButton toolName={tool.name} context="card" size="small" />
    </div>
  </div>
  
  <!-- Description - Truncated to 2 lines -->
  <p class="text-muted">
    {tool.description}
  </p>
  
  <!-- Metadata - Compact Icons with Better Alignment -->
  <div class="tool-card-metadata" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; line-height: 1;">
    <div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <line x1="9" y1="9" x2="15" y2="9"></line>
        <line x1="9" y1="15" x2="15" y2="15"></line>
      </svg>
      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
        {tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
      </span>
    </div>
    
    <div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 6v6l4 2"></path>
      </svg>
      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
        {tool.skillLevel}
      </span>
    </div>
    
    <div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
      </svg>
      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
        {isMethod ? 'Methode' : tool.license === 'Proprietary' ? 'Prop.' : tool.license?.split(' ')[0]}
      </span>
    </div>
  </div>
  
  <!-- Tags - Two Lines with Fade -->
  <div class="tool-tags-container">
    {tool.tags.slice(0, 8).map(tag => (
      <span class="tag">{tag}</span>
    ))}
  </div>
  
  <!-- Buttons - Fixed at Bottom with Contribution Button -->
  <div class="tool-card-buttons" onclick="event.stopPropagation();">
    {isConcept ? (
      <!-- Concept buttons with edit -->
      <div class="button-row">
        <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="background-color: var(--color-concept); border-color: var(--color-concept); flex: 2;">
          Mehr erfahren
        </a>
        <ContributionButton type="edit" toolName={tool.name} variant="secondary" text="Edit" style="flex: 1; font-size: 0.75rem;" />
      </div>
    ) : isMethod ? (
      <!-- Method buttons with edit -->
      <div class="button-row">
        <a href={tool.projectUrl || tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="background-color: var(--color-method); border-color: var(--color-method); flex: 2;">
          Zur Methode
        </a>
        <ContributionButton type="edit" toolName={tool.name} variant="secondary" text="Edit" style="flex: 1; font-size: 0.75rem;" />
      </div>
    ) : hasValidProjectUrl ? (
      <!-- Three buttons for hosted tools -->
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        <div class="button-row">
          <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
            Homepage
          </a>
          <a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
            Zugreifen
          </a>
        </div>
        <ContributionButton type="edit" toolName={tool.name} variant="secondary" text="Edit Entry" className="single-button" />
      </div>
    ) : (
      <!-- Two buttons for external tools -->
      <div class="button-row">
        <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 2;">
          Software-Homepage
        </a>
        <ContributionButton type="edit" toolName={tool.name} variant="secondary" text="Edit" style="flex: 1; font-size: 0.75rem;" />
      </div>
    )}
  </div>
</div>