{{template "base" .}}

{{define "title"}}Dashboard - µPaaS{{end}}

{{define "content"}}
{{template "nav" .}}

<main class="max-w-6xl mx-auto px-4 py-8" x-data="dashboard()">
    {{template "alert-success" .}}
    {{template "alert-error" .}}

    <div class="section-header">
        <h1 class="text-2xl font-medium text-gray-900">Applications</h1>
        <a href="/apps/new" class="btn-primary">
            <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            New App
        </a>
    </div>

    {{if .AppStats}}
    <div class="card overflow-hidden">
        <table class="table">
            <thead class="table-header">
                <tr>
                    <th>Name</th>
                    <th>Repository</th>
                    <th>Branch</th>
                    <th>Status</th>
                    <th>Last Deploy</th>
                    <th>Deploys</th>
                    <th class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="table-body">
                {{range .AppStats}}
                <tr class="table-row-hover">
                    <td>
                        <a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 font-medium">
                            {{.App.Name}}
                        </a>
                    </td>
                    <td class="text-gray-500 font-mono text-xs">{{.App.RepoURL}}</td>
                    <td class="text-gray-500">{{.App.Branch}}</td>
                    <td>
                        {{if eq .App.Status "running"}}
                        <span class="badge-success">Running</span>
                        {{else if eq .App.Status "building"}}
                        <span class="badge-warning">Building</span>
                        {{else if eq .App.Status "error"}}
                        <span class="badge-error">Error</span>
                        {{else if eq .App.Status "stopped"}}
                        <span class="badge-neutral">Stopped</span>
                        {{else}}
                        <span class="badge-neutral">{{.App.Status}}</span>
                        {{end}}
                    </td>
                    <td class="text-gray-500 text-sm">
                        {{if .LastDeployTime}}
                        <span x-data="relativeTime('{{.LastDeployISO}}')" x-text="display" class="cursor-default" title="{{.LastDeployLabel}}"></span>
                        {{else}}
                        <span class="text-gray-400">-</span>
                        {{end}}
                    </td>
                    <td class="text-gray-500 text-sm">{{.DeployCount}}</td>
                    <td class="text-right">
                        <div class="flex justify-end gap-2">
                            <a href="/apps/{{.App.ID}}" class="btn-text text-sm py-1 px-2">View</a>
                            <a href="/apps/{{.App.ID}}/edit" class="btn-secondary text-sm py-1 px-2">Edit</a>
                            <form method="POST" action="/apps/{{.App.ID}}/deploy" class="inline">
                                <button type="submit" class="btn-success text-sm py-1 px-2">Deploy</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
    {{else}}
    <div class="card">
        <div class="empty-state">
            <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
            </svg>
            <h3 class="empty-state-title">No applications yet</h3>
            <p class="empty-state-description">Get started by creating your first application.</p>
            <div class="mt-6">
                <a href="/apps/new" class="btn-primary">
                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Create App
                </a>
            </div>
        </div>
    </div>
    {{end}}
</main>
{{end}}