{{define "content"}}
<div class="space-y-6">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{.Invoice.InvoiceNumber}}</h1>
            <p class="mt-1 text-sm text-gray-500">{{.Invoice.CustomerName}}</p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="/invoices" class="text-sm text-gray-500 hover:text-gray-700">&larr; All Invoices</a>
            {{if eq .Invoice.Status "pending"}}
            <button class="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500"
                hx-post="/invoices/{{.Invoice.ID}}/pay"
                hx-confirm="Mark this invoice as paid? This will create a GL journal entry.">
                Mark as Paid
            </button>
            {{end}}
        </div>
    </div>

    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-3">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Invoice Number</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{.Invoice.InvoiceNumber}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Customer</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <a href="/customers/{{.Invoice.CustomerID}}" class="text-indigo-600 hover:text-indigo-900">{{.Invoice.CustomerName}}</a>
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1">{{statusBadge .Invoice.Status}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Amount</dt>
                    <dd class="mt-1 text-2xl font-semibold text-gray-900">{{formatMoney .Invoice.Amount}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Due Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{formatDate .Invoice.DueDate}}</dd>
                </div>
                {{if .Invoice.PaidDate.Valid}}
                <div>
                    <dt class="text-sm font-medium text-gray-500">Paid Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{formatDate .Invoice.PaidDate.String}}</dd>
                </div>
                {{end}}
                {{if .Invoice.OrderID.Valid}}
                <div>
                    <dt class="text-sm font-medium text-gray-500">Order</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <a href="/orders/{{.Invoice.OrderID.Int64}}" class="text-indigo-600 hover:text-indigo-900">Order #{{.Invoice.OrderID.Int64}}</a>
                    </dd>
                </div>
                {{end}}
                <div>
                    <dt class="text-sm font-medium text-gray-500">Created</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{.Invoice.CreatedAt.Format "Jan 02, 2006 3:04 PM"}}</dd>
                </div>
            </dl>
        </div>
    </div>
</div>
{{end}}