{{define "invoice_board_card"}}
{{$cardID := or .invoiceNumber .id}}
<div id="board-invoice-{{$cardID}}" class="board-invoice-card" draggable="true" data-invoice-id="{{.id}}"
    data-status="{{.status}}">
    <div class="board-card-header">
        <div class="invoice-number">#{{.invoiceNumber}}</div>
        <div class="card-drag-handle">⋮⋮</div>
    </div>

    <div class="board-card-content">
        {{with .customer}}<div class="card-customer">👤 {{.name}}</div>{{end}}
        {{with .job}}<div class="card-job">🔧 {{.name}}</div>{{end}}
        <div class="card-total">💰 ${{.totalPrice}}</div>
    </div>

    <div class="board-card-footer">
        <div class="status-indicator status-{{.status}}">{{.status}}</div>
        <button class="card-details-btn" onclick="showInvoiceDetails('{{.id}}')" title="View Details">
            🔍
        </button>
    </div>
</div>
{{end}}