{{template "main.html" .}}

{{define "title"}}{{if explorer.Repo}}{{explorer.Repo.Name}}{{else}}Project{{end}} — Congo Dev{{end}}

{{define "content"}}
{{if explorer.Repo}}
<div class="fade-up">
<!-- Header -->
<div class="flex items-center gap-3 mb-4">
    <a href="/" class="w-9 h-9 inline-flex items-center justify-center rounded-xl text-slate-400 hover:text-slate-600 hover:bg-white/60 transition-all btn-press">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
    </a>
    <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2.5">
            <h1 class="text-lg font-bold text-slate-800 truncate">{{explorer.Repo.Name}}</h1>
            {{if explorer.Repo.Branch}}
            <span class="text-[10px] font-mono text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">{{explorer.Repo.Branch}}</span>
            {{end}}
            {{if explorer.Repo.StatusDetail}}
            <span class="inline-flex items-center gap-1 text-[10px] font-medium {{if eq explorer.Repo.StatusDetail "clean"}}text-emerald-500{{else}}text-amber-500{{end}}">
                {{if eq explorer.Repo.StatusDetail "clean"}}
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                {{end}}
                {{explorer.Repo.StatusDetail}}
            </span>
            {{end}}
        </div>
        {{if explorer.Repo.URL}}
        <p class="text-[11px] text-slate-400 font-mono mt-0.5 truncate">{{explorer.Repo.ShortURL}}</p>
        {{end}}
    </div>
    <div class="flex items-center gap-1.5 shrink-0">
        {{if explorer.Repo.URL}}
        <button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-xl text-[11px] font-medium text-slate-500 bg-white/80 border border-slate-200/60 hover:border-slate-300 hover:text-slate-700 transition-all hover:shadow-sm btn-press"
            hx-post="/repos/{{explorer.Repo.ID}}/pull" hx-target="body" title="Pull latest changes">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
            Pull
        </button>
        {{end}}
        <a href="/repos/{{explorer.Repo.ID}}/files" hx-boost="true"
           class="inline-flex items-center gap-1.5 px-3 h-8 rounded-xl text-[11px] font-medium text-slate-500 bg-white/80 border border-slate-200/60 hover:border-slate-300 hover:text-slate-700 transition-all hover:shadow-sm btn-press">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
            Browse
        </a>
        <a href="/coder/?folder=/home/coder/repos/{{explorer.Repo.Name}}" target="_blank"
           class="inline-flex items-center gap-1.5 px-3 h-8 rounded-xl text-[11px] font-medium text-slate-500 bg-white/80 border border-slate-200/60 hover:border-indigo-200 hover:text-indigo-600 transition-all hover:shadow-sm btn-press">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
            Code
        </a>
        <button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-xl text-[11px] font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 transition-all shadow-sm shadow-indigo-500/20 btn-press"
            onclick="document.getElementById('add-service-modal').showModal()">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
            Add Service
        </button>
    </div>
</div>

<!-- Two-Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-5 gap-4">
    <!-- Left: Files -->
    <div class="lg:col-span-3 space-y-4">
        <div class="panel-card overflow-hidden">
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
                <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Files</h3>
                <span class="text-[10px] text-slate-300 font-mono">{{len explorer.Entries}} items</span>
            </div>
            {{if explorer.Entries}}
            <div hx-boost="true">
                {{range $entry := explorer.Entries}}
                <a href="/repos/{{explorer.Repo.ID}}/files/{{$entry.Path}}" class="flex items-center justify-between gap-3 px-4 py-1.5 border-b border-slate-50 last:border-b-0 hover:bg-slate-50/80 transition-colors">
                    <div class="flex items-center gap-2.5 min-w-0">
                        {{if $entry.IsDir}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                        {{else}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-slate-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        {{end}}
                        <span class="text-[12px] font-mono truncate {{if $entry.IsDir}}text-slate-700 font-medium{{else}}text-slate-500{{end}}">{{$entry.Name}}</span>
                    </div>
                    {{if $entry.Size}}<span class="text-[10px] text-slate-300 font-mono shrink-0">{{$entry.Size}}</span>{{end}}
                </a>
                {{end}}
            </div>
            {{else}}
            <div class="px-4 py-8 text-center text-slate-400 text-sm">Empty repository</div>
            {{end}}
        </div>
    </div>

    <!-- Right: Services, Routes, Infra -->
    <div class="lg:col-span-2 space-y-4">
        <!-- Services from this repo's infra.json -->
        {{$svcs := explorer.LinkedServices}}
        <div class="panel-card">
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
                <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Services</h3>
                <div class="flex items-center gap-1.5">
                    {{if $svcs}}
                    <span class="text-[10px] font-mono text-slate-300 mr-1">{{len $svcs}} defined{{if explorer.LinkedRunningCount}} · <span class="text-emerald-500">{{explorer.LinkedRunningCount}} running</span>{{end}}</span>
                    {{end}}
                    {{if explorer.HasInfra}}
                    <button class="w-6 h-6 inline-flex items-center justify-center rounded-lg text-slate-300 hover:text-violet-600 hover:bg-violet-50 transition-colors btn-press"
                        hx-post="/services/{{explorer.Repo.Name}}/launch" hx-target="body" hx-confirm="Deploy all services to remote infrastructure?" title="Deploy Remote">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
                    </button>
                    {{end}}
                    <button class="w-6 h-6 inline-flex items-center justify-center rounded-lg text-slate-300 hover:text-indigo-600 hover:bg-indigo-50 transition-colors btn-press"
                        onclick="document.getElementById('add-service-modal').showModal()" title="Add Service">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
                    </button>
                </div>
            </div>
            {{if $svcs}}
            <div class="divide-y divide-slate-50">
                {{range $svc := $svcs}}
                <div class="group flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50/80 transition-colors">
                    {{if eq $svc.Status "running"}}
                    <span class="w-2 h-2 rounded-full bg-emerald-500 glow-emerald shrink-0"></span>
                    {{else if eq $svc.Status "stopped"}}
                    <span class="w-2 h-2 rounded-full bg-slate-300 shrink-0"></span>
                    {{else}}
                    <span class="w-2 h-2 rounded-full bg-slate-200 shrink-0"></span>
                    {{end}}
                    <div class="flex-1 min-w-0">
                        <a href="/services/{{$svc.RepoName}}/{{$svc.Name}}" class="text-[13px] font-medium text-slate-700 truncate group-hover:text-indigo-600 transition-colors block">{{$svc.Name}}</a>
                        <div class="text-[10px] font-mono text-slate-400">
                            {{if $svc.ContainerPort}}port {{$svc.ContainerPort}}{{end}}
                            {{if $svc.Domain}} · <span class="text-indigo-400">{{$svc.Domain}}</span>{{end}}
                        </div>
                    </div>
                    <div class="flex items-center gap-0.5 shrink-0">
                        {{if eq $svc.Status "running"}}
                        <button class="w-6 h-6 inline-flex items-center justify-center rounded-lg text-slate-300 hover:text-slate-500 hover:bg-slate-100 btn-press opacity-0 group-hover:opacity-100 transition-opacity"
                            hx-post="/services/{{$svc.RepoName}}/{{$svc.Name}}/restart" hx-target="body" title="Restart">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                        </button>
                        {{if eq $svc.Mode "binary"}}
                        <button class="w-6 h-6 inline-flex items-center justify-center rounded-lg text-slate-200 hover:text-red-400 hover:bg-red-50 btn-press opacity-0 group-hover:opacity-100 transition-opacity"
                            hx-post="/services/{{$svc.RepoName}}/{{$svc.Name}}/stop-binary" hx-target="body" title="Stop">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1" /></svg>
                        </button>
                        {{else}}
                        <button class="w-6 h-6 inline-flex items-center justify-center rounded-lg text-slate-200 hover:text-red-400 hover:bg-red-50 btn-press opacity-0 group-hover:opacity-100 transition-opacity"
                            hx-post="/services/{{$svc.RepoName}}/{{$svc.Name}}/stop" hx-target="body" title="Stop">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1" /></svg>
                        </button>
                        {{end}}
                        {{else if eq $svc.Status "stopped"}}
                        <button class="w-6 h-6 inline-flex items-center justify-center rounded-lg text-emerald-300 hover:text-emerald-500 hover:bg-emerald-50 btn-press opacity-0 group-hover:opacity-100 transition-opacity"
                            hx-post="/services/{{$svc.RepoName}}/{{$svc.Name}}/start" hx-target="body" title="Start Docker container">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3" /></svg>
                        </button>
                        {{else}}
                        <button class="inline-flex items-center gap-1 px-2 h-6 rounded-lg text-[10px] font-medium text-teal-600 bg-teal-50 hover:bg-teal-100 btn-press transition-colors"
                            hx-post="/services/{{$svc.RepoName}}/{{$svc.Name}}/run-binary" hx-target="body" title="Build Go binary and run">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3" /></svg>
                            Binary
                        </button>
                        <button class="inline-flex items-center gap-1 px-2 h-6 rounded-lg text-[10px] font-medium text-indigo-500 bg-indigo-50 hover:bg-indigo-100 btn-press transition-colors"
                            hx-post="/services/{{$svc.RepoName}}/{{$svc.Name}}/redeploy" hx-target="body" title="Build Docker image and run">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" /></svg>
                            Docker
                        </button>
                        {{end}}
                    </div>
                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-full shrink-0
                        {{if eq $svc.Status "running"}}text-emerald-600 bg-emerald-50
                        {{else if eq $svc.Status "stopped"}}text-slate-400 bg-slate-100
                        {{else}}text-slate-400 bg-slate-50{{end}}">{{if and (eq $svc.Status "running") $svc.Mode}}<span class="text-slate-300">{{$svc.Mode}}</span> · {{end}}{{$svc.Status}}</span>
                </div>
                {{end}}
            </div>
            {{else}}
            <div class="px-4 py-6 text-center">
                <p class="text-[12px] text-slate-400 mb-2">No services defined</p>
                <p class="text-[11px] text-slate-300 mb-3">Define services in this project's infra.json</p>
                <button class="inline-flex items-center gap-1.5 px-3 h-7 rounded-lg text-[11px] font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors btn-press"
                    onclick="document.getElementById('add-service-modal').showModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
                    Add Service
                </button>
            </div>
            {{end}}
        </div>

        <!-- Routes -->
        {{if explorer.LinkedRoutes}}
        <div class="panel-card">
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
                <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Routes</h3>
                <span class="text-[10px] font-mono text-slate-300">{{len explorer.LinkedRoutes}}</span>
            </div>
            <div class="divide-y divide-slate-50">
                {{range $route := explorer.LinkedRoutes}}
                <div class="flex items-center gap-2.5 px-4 py-2 text-[12px]">
                    {{if $route.Active}}
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span>
                    {{else}}
                    <span class="w-1.5 h-1.5 rounded-full bg-slate-300 shrink-0"></span>
                    {{end}}
                    <span class="text-slate-600 font-mono truncate flex-1">{{$route.Host}}</span>
                    <span class="text-slate-300">&rarr;</span>
                    <span class="text-slate-400 font-mono shrink-0 text-[11px]">{{$route.Target}}:{{$route.Port}}</span>
                    <span hx-get="/routes/{{$route.ID}}/check" hx-trigger="load" hx-swap="innerHTML" class="shrink-0"></span>
                </div>
                {{end}}
            </div>
        </div>
        {{end}}

        <!-- infra.json -->
        {{if explorer.HasInfra}}
        {{with explorer.Infra}}
        <div class="panel-card overflow-hidden">
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
                <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Infrastructure</h3>
                <span class="text-[10px] font-mono text-slate-300">infra.json</span>
            </div>
            <div class="p-3 space-y-3">
                {{if .Provider}}
                <div class="flex items-center gap-2 px-1">
                    <span class="text-[10px] font-medium text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full capitalize">{{.Provider}}</span>
                    {{if .Region}}
                    <span class="text-[10px] font-mono text-slate-400">{{.Region}}</span>
                    {{end}}
                </div>
                {{end}}

                {{range .ServerGroups}}
                <div>
                    <div class="flex items-center justify-between px-1 mb-1.5">
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{.Name}}</span>
                            {{if .Size}}
                            <span class="text-[9px] font-mono text-slate-300 bg-slate-50 px-1.5 py-0.5 rounded">{{.Size}}</span>
                            {{end}}
                        </div>
                        <span class="text-[9px] text-slate-300">{{len .Instances}}</span>
                    </div>
                    <div class="space-y-1">
                        {{range .Instances}}
                        <div class="flex items-center gap-2 px-2.5 py-1.5 bg-slate-50/80 rounded-lg">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span>
                            <span class="text-[11px] font-mono font-medium text-slate-600 truncate">{{.Name}}</span>
                            {{if .Role}}
                            <span class="text-[9px] text-indigo-500 bg-indigo-50 px-1.5 py-0.5 rounded shrink-0">{{.Role}}</span>
                            {{end}}
                            <span class="text-[10px] font-mono text-slate-400 ml-auto shrink-0">{{.IP}}</span>
                            {{if .Region}}
                            <span class="text-[9px] font-mono text-slate-300 shrink-0">{{.Region}}</span>
                            {{end}}
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}

                {{if .ServiceList}}
                <div>
                    <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 px-1 mb-1.5">Services</div>
                    <div class="space-y-0.5">
                        {{range .ServiceList}}
                        <div class="flex items-center gap-2 px-2.5 py-1 text-[11px]">
                            <span class="font-mono font-medium text-slate-600 shrink-0">{{.Name}}</span>
                            {{if .Source}}
                            <span class="font-mono text-indigo-400 truncate">{{.Source}}</span>
                            {{else if .Image}}
                            <span class="font-mono text-slate-400 truncate">{{.Image}}</span>
                            {{end}}
                            {{if .Ports}}
                            <span class="font-mono text-slate-300 ml-auto shrink-0">{{.Ports}}</span>
                            {{end}}
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}

                <details>
                    <summary class="flex items-center gap-2 cursor-pointer select-none py-1.5 group text-[12px]">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-slate-300 transition-transform [details[open]>&]:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                        <span class="font-medium text-slate-400 group-hover:text-slate-500 transition-colors">View raw</span>
                    </summary>
                    <pre class="mt-2 bg-slate-900 text-slate-300 rounded-lg p-3 text-[11px] font-mono max-h-64 overflow-auto whitespace-pre-wrap leading-relaxed"><code class="language-json">{{.Raw}}</code></pre>
                </details>
            </div>
        </div>
        {{end}}
        {{end}}

        <!-- Danger zone -->
        <div class="panel-card border-red-100">
            <details>
                <summary class="flex items-center gap-2 cursor-pointer select-none px-4 py-3 text-[12px] group">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-slate-300 transition-transform [details[open]>&]:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                    <span class="font-medium text-slate-400 group-hover:text-red-400 transition-colors">Danger Zone</span>
                </summary>
                <div class="px-4 pb-3 pt-1">
                    <p class="text-[11px] text-slate-400 mb-2">This will permanently delete the project and all its files from disk.</p>
                    <button class="inline-flex items-center gap-1.5 px-3 h-7 rounded-lg text-[11px] font-medium text-red-500 bg-red-50 border border-red-200 hover:bg-red-100 transition-colors"
                        hx-post="/repos/{{explorer.Repo.ID}}/delete" hx-confirm="Delete {{explorer.Repo.Name}}? This cannot be undone." hx-target="body">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                        Delete Project
                    </button>
                </div>
            </details>
        </div>
    </div>
</div>

<!-- Add Service Modal -->
<dialog id="add-service-modal" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box bg-white/95 backdrop-blur-xl border border-slate-200/60 shadow-2xl max-w-md p-6 rounded-2xl">
        <h3 class="text-base font-bold text-slate-800 mb-0.5">Add Service</h3>
        <p class="text-[11px] text-slate-400 mb-5">Define a new service in {{explorer.Repo.Name}}'s infra.json</p>
        <form method="dialog"><button class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3 text-slate-300">x</button></form>
        <form hx-post="/services/deploy" hx-target="body">
            <input type="hidden" name="repo_id" value="{{explorer.Repo.ID}}" />
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div class="form-control">
                    <label class="label"><span class="label-text text-slate-500 text-xs">Service Name</span></label>
                    <input type="text" name="service_name" value="app" class="input input-bordered w-full font-mono" placeholder="app" required />
                </div>
                <div class="form-control">
                    <label class="label"><span class="label-text text-slate-500 text-xs">Container Port</span></label>
                    <input type="number" name="container_port" value="5000" min="1" max="65535" class="input input-bordered w-full font-mono" />
                </div>
            </div>
            <div class="form-control mb-4">
                <label class="label"><span class="label-text text-slate-500 text-xs">Source Path</span></label>
                <input type="text" name="build_path" placeholder=". (repo root)" class="input input-bordered w-full font-mono" />
                <p class="text-[10px] text-slate-400 mt-1 ml-0.5">Path to Dockerfile directory relative to repo root</p>
            </div>
            <div class="form-control mb-5">
                <label class="label"><span class="label-text text-slate-500 text-xs">Volumes</span></label>
                {{render "VolumeEditor" (dict "volumes" "" "actionUrl" "" "fieldName" "volumes" "inline" true)}}
            </div>
            <div class="flex justify-end gap-2">
                <button type="button" class="btn btn-ghost btn-sm" onclick="document.getElementById('add-service-modal').close()">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm">Add &amp; Deploy</button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop bg-black/10 backdrop-blur-[1px]"><button>close</button></form>
</dialog>
</div>

{{else}}
<div class="text-center py-16 fade-up">
    <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-slate-50 mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    </div>
    <p class="text-slate-400 mb-3 text-sm">Project not found</p>
    <a href="/" class="text-indigo-500 hover:text-indigo-600 text-sm transition-colors">Back to Dashboard</a>
</div>
{{end}}
{{end}}