{{template "base" .}}

{{define "title"}}Deployments - {{.App.Name}} - upaas{{end}}

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

<main class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 inline-flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to {{.App.Name}}
        </a>
    </div>

    <div class="section-header">
        <h1 class="text-2xl font-medium text-gray-900">Deployment History</h1>
        <form method="POST" action="/apps/{{.App.ID}}/deploy">
            <button type="submit" class="btn-success">Deploy Now</button>
        </form>
    </div>

    {{if .Deployments}}
    <div class="space-y-4">
        {{range .Deployments}}
        <div class="card p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
                <div class="flex items-center gap-2 text-sm text-gray-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>{{.StartedAt.Format "2006-01-02 15:04:05"}}</span>
                    {{if .FinishedAt.Valid}}
                    <span class="text-gray-400">-</span>
                    <span>{{.FinishedAt.Time.Format "15:04:05"}}</span>
                    {{end}}
                </div>
                <div>
                    {{if eq .Status "success"}}
                    <span class="badge-success">Success</span>
                    {{else if eq .Status "failed"}}
                    <span class="badge-error">Failed</span>
                    {{else if eq .Status "building"}}
                    <span class="badge-warning">Building</span>
                    {{else if eq .Status "deploying"}}
                    <span class="badge-info">Deploying</span>
                    {{else}}
                    <span class="badge-neutral">{{.Status}}</span>
                    {{end}}
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                {{if .CommitSHA.Valid}}
                <div>
                    <span class="font-medium text-gray-700">Commit:</span>
                    <span class="font-mono text-gray-500 ml-1">{{.CommitSHA.String}}</span>
                </div>
                {{end}}

                {{if .ImageID.Valid}}
                <div>
                    <span class="font-medium text-gray-700">Image:</span>
                    <span class="font-mono text-gray-500 ml-1 text-xs">{{slice .ImageID.String 0 24}}...</span>
                </div>
                {{end}}

                {{if .ContainerID.Valid}}
                <div>
                    <span class="font-medium text-gray-700">Container:</span>
                    <span class="font-mono text-gray-500 ml-1 text-xs">{{slice .ContainerID.String 0 12}}</span>
                </div>
                {{end}}
            </div>

            {{if .Logs.Valid}}
            <details class="mt-4">
                <summary class="cursor-pointer text-sm text-primary-600 hover:text-primary-800 font-medium inline-flex items-center">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                    View Logs
                </summary>
                <pre class="mt-3 p-4 bg-gray-900 text-gray-100 rounded-lg text-xs overflow-x-auto font-mono leading-relaxed">{{.Logs.String}}</pre>
            </details>
            {{end}}
        </div>
        {{end}}
    </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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
            </svg>
            <h3 class="empty-state-title">No deployments yet</h3>
            <p class="empty-state-description">Deploy your application to see the deployment history here.</p>
            <div class="mt-6">
                <form method="POST" action="/apps/{{.App.ID}}/deploy">
                    <button type="submit" class="btn-success">Deploy Now</button>
                </form>
            </div>
        </div>
    </div>
    {{end}}
</main>
{{end}}