{{define "content"}}
<div class="space-y-6">
    <div class="sm:flex sm:items-center sm:justify-between">
        <h1 class="text-2xl font-bold text-gray-900">{{.Customer.Name}}</h1>
        <div class="flex space-x-3">
            <a href="/customers" class="text-sm text-gray-500 hover:text-gray-700">&larr; All Customers</a>
            <a href="/customers/{{.Customer.ID}}/edit"
                class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Edit</a>
            <button class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500"
                hx-delete="/customers/{{.Customer.ID}}"
                hx-confirm="Are you sure you want to delete this customer?">Delete</button>
        </div>
    </div>

    <!-- Customer Info -->
    <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-2">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Email</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{if .Customer.Email}}{{.Customer.Email}}{{else}}-{{end}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Phone</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{if .Customer.Phone}}{{.Customer.Phone}}{{else}}-{{end}}</dd>
                </div>
                <div class="sm:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Address</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{if .Customer.Address}}{{.Customer.Address}}{{else}}-{{end}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Created</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{.Customer.CreatedAt.Format "Jan 02, 2006"}}</dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- Customer Orders -->
    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="sm:flex sm:items-center sm:justify-between mb-4">
                <h2 class="text-lg font-medium text-gray-900">Orders</h2>
                <a href="/orders/new" class="text-sm text-indigo-600 hover:text-indigo-500">+ New Order</a>
            </div>
            {{if .Orders}}
            <table class="min-w-full divide-y divide-gray-300">
                <thead>
                    <tr>
                        <th class="py-2 pr-3 text-left text-sm font-semibold text-gray-900">Order #</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-900">Date</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-900">Status</th>
                        <th class="px-3 py-2 text-right text-sm font-semibold text-gray-900">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {{range .Orders}}
                    <tr>
                        <td class="py-2 pr-3 text-sm"><a href="/orders/{{.ID}}" class="text-indigo-600 hover:text-indigo-900">#{{.ID}}</a></td>
                        <td class="px-3 py-2 text-sm text-gray-500">{{formatDate .OrderDate}}</td>
                        <td class="px-3 py-2 text-sm">{{statusBadge .Status}}</td>
                        <td class="px-3 py-2 text-sm text-gray-900 text-right">{{formatMoney .TotalAmount}}</td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
            {{else}}
            <p class="text-sm text-gray-500">No orders yet.</p>
            {{end}}
        </div>
    </div>

    <!-- Customer Invoices -->
    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">Invoices</h2>
            {{if .Invoices}}
            <table class="min-w-full divide-y divide-gray-300">
                <thead>
                    <tr>
                        <th class="py-2 pr-3 text-left text-sm font-semibold text-gray-900">Invoice #</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-900">Status</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-900">Due Date</th>
                        <th class="px-3 py-2 text-right text-sm font-semibold text-gray-900">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {{range .Invoices}}
                    <tr>
                        <td class="py-2 pr-3 text-sm"><a href="/invoices/{{.ID}}" class="text-indigo-600 hover:text-indigo-900">{{.InvoiceNumber}}</a></td>
                        <td class="px-3 py-2 text-sm">{{statusBadge .Status}}</td>
                        <td class="px-3 py-2 text-sm text-gray-500">{{formatDate .DueDate}}</td>
                        <td class="px-3 py-2 text-sm text-gray-900 text-right">{{formatMoney .Amount}}</td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
            {{else}}
            <p class="text-sm text-gray-500">No invoices yet.</p>
            {{end}}
        </div>
    </div>
</div>
{{end}}