{{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">Journal Entry #{{.Entry.ID}}</h1>
            <p class="mt-1 text-sm text-gray-500">{{formatDate .Entry.EntryDate}}</p>
        </div>
        <a href="/ledger/journal" class="text-sm text-gray-500 hover:text-gray-700">&larr; All Entries</a>
    </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 mb-6">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{formatDate .Entry.EntryDate}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Description</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{.Entry.Description}}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Reference</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{if .Entry.Reference}}{{.Entry.Reference}}{{else}}-{{end}}</dd>
                </div>
            </dl>

            <h3 class="text-sm font-medium text-gray-900 mb-3">Lines</h3>
            <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">Account</th>
                        <th class="px-3 py-2 text-right text-sm font-semibold text-gray-900">Debit</th>
                        <th class="px-3 py-2 text-right text-sm font-semibold text-gray-900">Credit</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {{range .Entry.Lines}}
                    <tr>
                        <td class="py-2 pr-3 text-sm text-gray-900">
                            <span class="font-mono text-gray-500">{{.AccountCode}}</span> {{.AccountName}}
                        </td>
                        <td class="px-3 py-2 text-sm text-gray-900 text-right font-mono">
                            {{if gt .Debit 0.0}}{{formatMoney .Debit}}{{else}}-{{end}}
                        </td>
                        <td class="px-3 py-2 text-sm text-gray-900 text-right font-mono">
                            {{if gt .Credit 0.0}}{{formatMoney .Credit}}{{else}}-{{end}}
                        </td>
                    </tr>
                    {{end}}
                </tbody>
                <tfoot>
                    <tr class="border-t-2 border-gray-900">
                        <td class="py-2 pr-3 text-sm font-semibold text-gray-900">Totals</td>
                        <td class="px-3 py-2 text-sm font-semibold text-gray-900 text-right font-mono">{{formatMoney .Entry.TotalDebit}}</td>
                        <td class="px-3 py-2 text-sm font-semibold text-gray-900 text-right font-mono">{{formatMoney .Entry.TotalCredit}}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
{{end}}