{{define "invoice_card"}}
{{$cardID := or .invoiceNumber .id}}
<div id="invoice-card-{{$cardID}}" class="invoice-card" data-invoice-id="{{.id}}">
    <div class="invoice-header">
        <h4>Invoice #{{.invoiceNumber}}</h4>
        <div class="invoice-status {{.status}}">{{.status}}</div>
    </div>

    <div class="invoice-details">
        <div class="invoice-info">
            {{with .customer}}<p><strong>Customer:</strong> {{.name}}</p>{{end}}
            {{with .job}}<p><strong>Job:</strong> {{.name}}</p>{{end}}
            {{/* Show location only in single invoice view */}}
            {{if not .MultipleInvoices}}
            {{with .location}}<p><strong>Location:</strong> {{.name}}</p>{{end}}
            {{end}}
            <p><strong>Total:</strong> ${{.totalPrice}}</p>

            {{/* Show items only in single invoice view */}}
            {{if not .MultipleInvoices}}
            {{if .items}}
            <div class="invoice-items">
                <h5>Items</h5>
                <ul>
                    {{range .items}}
                    <li>{{.description}} - ${{.totalPrice}}</li>
                    {{end}}
                </ul>
            </div>
            {{end}}
            {{end}}
        </div>

        <div class="invoice-actions">
            <div class="button-group">
                {{range .buttons}}
                <button hx-put="{{.Action}}?partial=true&original_search={{$.SearchTerm}}" hx-confirm="{{.ConfirmText}}"
                    hx-target="#invoice-card-{{$cardID}}" hx-swap="outerHTML" class="compact-button {{.Class}}"
                    title="{{.Label}}" data-status="{{.Status}}">
                    <span class="icon">
                        {{if eq .Status "draft"}}✏️
                        {{else if eq .Status "ok"}}🆗
                        {{else if eq .Status "failed"}}❌
                        {{else if eq .Status "pending_accounting"}}🧾
                        {{else if eq .Status "processed"}}💰
                        {{else if eq .Status "void"}} 💣
                        {{end}}
                    </span>
                </button>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{end}}