{{template "base" .}}

{{define "title"}}Deployments - {{.App.Name}} - µPaaS{{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 id="deploy-form" method="POST" action="/apps/{{.App.ID}}/deploy">
            <button id="deploy-btn" type="submit" class="btn-success">Deploy Now</button>
        </form>
    </div>

    <!-- Live Build Logs (shown during active deployment) -->
    <div id="live-logs-section" class="card p-6 mb-4" style="display: none;">
        <div class="flex items-center justify-between mb-4">
            <h2 class="section-title">Live Build Logs</h2>
            <span id="live-status" class="badge-neutral text-xs">Building</span>
        </div>
        <div id="live-logs-wrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
            <pre id="live-logs" class="text-gray-100 text-xs font-mono whitespace-pre-wrap">Waiting for logs...</pre>
        </div>
    </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}}">
            <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 class="relative-time" data-time="{{.StartedAt.Format "2006-01-02T15:04:05Z07:00"}}" title="{{.StartedAt.Format "2006-01-02 15:04:05"}}">{{.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 {{if eq .Status "success"}}badge-success{{else if eq .Status "failed"}}badge-error{{else if eq .Status "building"}}badge-warning{{else if eq .Status "deploying"}}badge-info{{else}}badge-neutral{{end}}">{{if eq .Status "success"}}Success{{else if eq .Status "failed"}}Failed{{else if eq .Status "building"}}Building{{else if eq .Status "deploying"}}Deploying{{else}}{{.Status}}{{end}}</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")}}
            <details class="mt-4 deployment-logs" {{if or (eq .Status "building") (eq .Status "deploying")}}open{{end}}>
                <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 transition-transform" 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>
                <div class="logs-wrapper mt-3 overflow-auto" style="max-height: 400px;">
                    <pre class="logs-content p-4 bg-gray-900 text-gray-100 rounded-lg text-xs font-mono leading-relaxed whitespace-pre-wrap">{{if .Logs.Valid}}{{.Logs.String}}{{else}}Loading...{{end}}</pre>
                </div>
            </details>
            {{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 id="deploy-form-empty" method="POST" action="/apps/{{.App.ID}}/deploy">
                        <button id="deploy-btn-empty" type="submit" class="btn-success">Deploy Now</button>
                    </form>
                </div>
            </div>
        </div>
        {{end}}
    </div>
</main>

<script>
upaas.initDeploymentsPage({
    appId: "{{.App.ID}}"
});
</script>
{{end}}