{{define "server_detail.html"}}
{{template "partials/header.html" .}}

<style>
    .badge {
        display: inline-block;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .badge-online { background: #dcfce7; color: #166534; }
    .badge-offline { background: #fef2f2; color: #dc2626; }
    .badge-unknown { background: #f3f4f6; color: #6b7280; }
    .badge-running { background: #dcfce7; color: #166534; }
    .badge-stopped { background: #fef2f2; color: #dc2626; }
    .badge-active { background: #dcfce7; color: #166534; }
    .badge-inactive { background: #f3f4f6; color: #6b7280; }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .info-item dt {
        color: var(--pico-muted-color);
        font-size: 0.85rem;
    }
    .info-item dd {
        margin: 0;
        font-weight: 500;
    }
    .action-bar {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }
    .action-bar button, .action-bar a {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
    .table-container {
        overflow-x: auto;
    }
    table {
        width: 100%;
        font-size: 0.9rem;
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        margin: 0.1rem;
    }
    .btn-danger {
        background: #dc2626;
        border-color: #dc2626;
    }
</style>

<nav aria-label="breadcrumb">
    <ul>
        <li><a href="/admin/infra">Infrastructure</a></li>
        <li>{{.Server.Name}}</li>
    </ul>
</nav>

<h1>
    {{.Server.Name}}
    {{if eq .Server.Status "online"}}<span class="badge badge-online">Online</span>{{end}}
    {{if eq .Server.Status "offline"}}<span class="badge badge-offline">Offline</span>{{end}}
    {{if eq .Server.Status "unknown"}}<span class="badge badge-unknown">?</span>{{end}}
</h1>

{{if eq .Flash "success"}}
<div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a;padding:0.75rem 1rem;border-radius:var(--pico-border-radius);margin-bottom:1rem;">
    {{.FlashMessage}}
</div>
{{end}}

{{if eq .Flash "error"}}
<div style="background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:0.75rem 1rem;border-radius:var(--pico-border-radius);margin-bottom:1rem;">
    {{.FlashMessage}}
</div>
{{end}}

<!-- Informations -->
<article>
    <header>Informations</header>
    <dl class="info-grid">
        <div class="info-item">
            <dt>Host</dt>
            <dd>{{.Server.Host}}</dd>
        </div>
        {{if .Server.VpnIP}}
        <div class="info-item">
            <dt>VPN IP</dt>
            <dd>{{.Server.VpnIP}}</dd>
        </div>
        {{end}}
        <div class="info-item">
            <dt>SSH</dt>
            <dd>{{.Server.SSHUser}}@{{.Server.Host}}:{{.Server.SSHPort}}</dd>
        </div>
        <div class="info-item">
            <dt>Clé SSH</dt>
            <dd style="font-size:0.8rem;">{{.Server.SSHKeyFile}}</dd>
        </div>
    </dl>

    <div class="action-bar">
        <form action="/admin/infra/servers/{{.Server.ID}}/test-ssh" method="post" style="display:inline;">
            <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
            <button type="submit" class="outline">Tester SSH</button>
        </form>
        <form action="/admin/infra/servers/{{.Server.ID}}/delete" method="post" style="display:inline;"
              onsubmit="return confirm('Supprimer ce serveur ?');">
            <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
            <button type="submit" class="btn-danger outline">Supprimer</button>
        </form>
    </div>
</article>

<!-- Containers Incus -->
{{if .Server.HasIncus}}
<article>
    <header style="display:flex;justify-content:space-between;align-items:center;">
        <span>Containers Incus ({{len .Containers}})</span>
        <form action="/admin/infra/servers/{{.Server.ID}}/sync-containers" method="post" style="margin:0;">
            <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
            <button type="submit" class="outline btn-sm">Synchroniser</button>
        </form>
    </header>

    {{if .Containers}}
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>IP</th>
                    <th>Image</th>
                    <th>Statut</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {{range .Containers}}
                <tr>
                    <td><strong>{{.Name}}</strong></td>
                    <td>{{if .IP}}{{.IP}}{{else}}-{{end}}</td>
                    <td style="font-size:0.8rem;">{{if .Image}}{{.Image}}{{else}}-{{end}}</td>
                    <td>
                        {{if eq .Status "running"}}<span class="badge badge-running">Running</span>{{end}}
                        {{if eq .Status "stopped"}}<span class="badge badge-stopped">Stopped</span>{{end}}
                        {{if eq .Status "unknown"}}<span class="badge badge-unknown">?</span>{{end}}
                    </td>
                    <td>
                        {{if eq .Status "stopped"}}
                        <form action="/admin/infra/containers/{{.ID}}/action" method="post" style="display:inline;">
                            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                            <input type="hidden" name="action" value="start">
                            <button type="submit" class="btn-sm outline">Start</button>
                        </form>
                        {{end}}
                        {{if eq .Status "running"}}
                        <form action="/admin/infra/containers/{{.ID}}/action" method="post" style="display:inline;">
                            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                            <input type="hidden" name="action" value="stop">
                            <button type="submit" class="btn-sm outline secondary">Stop</button>
                        </form>
                        <form action="/admin/infra/containers/{{.ID}}/action" method="post" style="display:inline;">
                            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                            <input type="hidden" name="action" value="restart">
                            <button type="submit" class="btn-sm outline">Restart</button>
                        </form>
                        {{end}}
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
    {{else}}
    <p style="color:var(--pico-muted-color);text-align:center;">
        Aucun container. Cliquez sur "Synchroniser" pour importer depuis Incus.
    </p>
    {{end}}
</article>
{{end}}

<!-- Configurations Nginx -->
{{if .Server.HasNginx}}
<article>
    <header style="display:flex;justify-content:space-between;align-items:center;">
        <span>Sites Nginx ({{len .NginxConfigs}})</span>
        <div>
            <form action="/admin/infra/servers/{{.Server.ID}}/sync-nginx" method="post" style="display:inline;">
                <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                <button type="submit" class="outline btn-sm">Synchroniser</button>
            </form>
            <form action="/admin/infra/servers/{{.Server.ID}}/nginx-reload" method="post" style="display:inline;">
                <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                <button type="submit" class="outline btn-sm">Reload Nginx</button>
            </form>
        </div>
    </header>

    {{if .NginxConfigs}}
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Domaine</th>
                    <th>Type</th>
                    <th>SSL</th>
                    <th>Statut</th>
                </tr>
            </thead>
            <tbody>
                {{range .NginxConfigs}}
                <tr>
                    <td><strong>{{.Domain}}</strong></td>
                    <td>{{.Type}}</td>
                    <td>{{if .SSLEnabled}}Oui{{else}}Non{{end}}</td>
                    <td>
                        {{if eq .Status "active"}}<span class="badge badge-active">Actif</span>{{end}}
                        {{if eq .Status "inactive"}}<span class="badge badge-inactive">Inactif</span>{{end}}
                        {{if eq .Status "error"}}<span class="badge badge-offline">Erreur</span>{{end}}
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
    {{else}}
    <p style="color:var(--pico-muted-color);text-align:center;">
        Aucun site. Cliquez sur "Synchroniser" pour importer depuis Nginx.
    </p>
    {{end}}
</article>
{{end}}

{{template "partials/footer.html" .}}
{{end}}
