{{template "base" .}}

{{define "title"}}Deployments - {{.App.Name}} - µPaaS{{end}}

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

<main class="max-w-4xl mx-auto px-4 py-8" x-data="deploymentsPage({ appId: '{{.App.ID}}' })">
    <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" @submit="submitDeploy()">
            <button type="submit" class="btn-success" x-bind:disabled="isDeploying" x-bind:class="{ 'opacity-50 cursor-not-allowed': isDeploying }">
                <span x-text="isDeploying ? 'Deploying...' : 'Deploy Now'"></span>
            </button>
        </form>
    </div>

    <div id="deployments-list" class="space-y-4">
        {{if .Deployments}}
        {{range .Deployments}}
        <div class="card p-6 deployment-card" data-deployment-id="{{.ID}}" data-status="{{.Status}}"
             x-data="deploymentCard({
                 appId: '{{$.App.ID}}',
                 deploymentId: {{.ID}},
                 status: '{{.Status}}'
             })">
            <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 x-data="relativeTime('{{.StartedAt.Format `2006-01-02T15:04:05Z07:00`}}')" x-text="display" title="{{.StartedAt.Format `2006-01-02 15:04:05`}}"></span>
                    {{if .FinishedAt.Valid}}
                    <span class="text-gray-400">•</span>
                    <span>{{.Duration}}</span>
                    {{end}}
                </div>
                <div>
                    <span class="deployment-status" x-bind:class="statusBadgeClass" x-text="statusLabel"></span>
                </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">{{.ShortCommit}}</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 or .Logs.Valid (eq .Status "building") (eq .Status "deploying")}}
            <div class="mt-4">
                <div class="flex items-start gap-4 mb-2">
                    <span class="text-sm text-primary-600 font-medium">Build Logs</span>
                    {{if or (eq .Status "success") (eq .Status "failed")}}
                    <a href="/apps/{{$.App.ID}}/deployments/{{.ID}}/download" class="text-sm text-primary-600 hover:text-primary-800 inline-flex items-center ml-auto" title="Download logs">
                        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                        Download
                    </a>
                    {{end}}
                </div>
                <div x-ref="logsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
                    <pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap" x-text="logs"></pre>
                </div>
                {{if .Logs.Valid}}<script type="text/plain" class="initial-logs">{{.Logs.String}}</script>{{end}}
            </div>
            {{end}}
        </div>
        {{end}}
        {{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" @submit="submitDeploy()">
                        <button type="submit" class="btn-success" x-bind:disabled="isDeploying" x-bind:class="{ 'opacity-50 cursor-not-allowed': isDeploying }">
                            <span x-text="isDeploying ? 'Deploying...' : 'Deploy Now'"></span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {{end}}
    </div>
</main>
{{end}}