{{template "base" .}}

{{define "title"}}Dashboard - upaas{{end}}

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

<main class="max-w-6xl mx-auto px-4 py-8">
    {{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 .Apps}}
    <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 class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="table-body">
                {{range .Apps}}
                <tr class="table-row-hover">
                    <td>
                        <a href="/apps/{{.ID}}" class="text-primary-600 hover:text-primary-800 font-medium">
                            {{.Name}}
                        </a>
                    </td>
                    <td class="text-gray-500 font-mono text-xs">{{.RepoURL}}</td>
                    <td class="text-gray-500">{{.Branch}}</td>
                    <td>
                        {{if eq .Status "running"}}
                        <span class="badge-success">Running</span>
                        {{else if eq .Status "building"}}
                        <span class="badge-warning">Building</span>
                        {{else if eq .Status "error"}}
                        <span class="badge-error">Error</span>
                        {{else if eq .Status "stopped"}}
                        <span class="badge-neutral">Stopped</span>
                        {{else}}
                        <span class="badge-neutral">{{.Status}}</span>
                        {{end}}
                    </td>
                    <td class="text-right">
                        <div class="flex justify-end gap-2">
                            <a href="/apps/{{.ID}}" class="btn-text text-sm py-1 px-2">View</a>
                            <a href="/apps/{{.ID}}/edit" class="btn-secondary text-sm py-1 px-2">Edit</a>
                            <form method="POST" action="/apps/{{.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}}