{% extends "base.html" %}

{% block title %}Admin | Tenant Instanzen{% endblock %}

{% block content %}
<section class="instance-header">
    <h1>Tenant Instanzen Übersicht</h1>
    <p>Übersicht aller zugewiesenen und aktiven Schul-Instanzen im System.</p>
</section>

<section class="instance-table-wrap">
    <div class="table-head">
        <h2>Vorhandene Tenant Instanzen</h2>
    </div>
    {% if instances %}
    <table>
        <thead>
            <tr>
                <th>Schule</th>
                <th>Nutzer (Owner)</th>
                <th>Subdomain / Domain</th>
                <th>HTTPS-Port</th>
                <th>Version</th>
                <th>Bibliothek</th>
                <th>Status</th>
                <th>Nginx Status</th>
                <th>Letzte Meldung</th>
                <th>Aktualisiert</th>
            </tr>
        </thead>
        <tbody>
            {% for item in instances %}
            <tr>
                <td><strong>{{ item.school_name or '-' }}</strong></td>
                <td>{{ item.owner_username or '-' }}</td>
                <td>
                    {% if item.domain %}
                        <a class="instance-domain-link" href="https://{{ item.domain }}" target="_blank" rel="noopener noreferrer">
                            {{ item.domain }}
                        </a>
                    {% elif item.subdomain %}
                        {{ item.subdomain }}.{{ parent_domain }}
                    {% else %}
                        -
                    {% endif %}
                </td>
                <td>{{ item.https_port or '-' }}</td>
                <td><code>{{ item.app_image_tag or 'latest' }}</code></td>
                <td>
                    <span class="pill {{ 'ok' if item.library_enabled else 'inactive' }}">
                        {{ 'Aktiv' if item.library_enabled else 'Inaktiv' }}
                    </span>
                </td>
                <td>
                    <span class="pill {{ 'ok' if item.status in ['Läuft', 'ready', 'active'] else 'error' }}">
                        {{ item.status or 'Unbekannt' }}
                    </span>
                </td>
                <td>{{ item.nginx_status or 'unbekannt' }}</td>
                <td class="last-msg-cell">{{ item.last_message or '-' }}</td>
                <td>{{ item.updated_at or '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="empty-state">Aktuell sind keine Tenant-Instanzen in der Datenbank vorhanden.</p>
    {% endif %}

    <form action="{{ url_for('admin_delete_all_instances') }}" method="POST">
        <button type="submit" class="btn-delete-all">ALLE INSTANZEN LÖSCHEN</button>
    </form>
</section>

<style>
.instance-header {
    margin-bottom: 1.5rem;
}

.instance-table-wrap {
    border: 1px solid #d8e1e8;
    background: #ffffff;
    border-radius: 14px;
    padding: 1.25rem;
    overflow-x: auto;
}

.table-head {
    margin-bottom: 1rem;
}

.table-head h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #11364a;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    border-bottom: 1px solid #e7edf3;
    padding: 0.75rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

th {
    background-color: #f8fafc;
    color: #4b6170;
    font-weight: 700;
}

.instance-domain-link {
    color: #0b5b89;
    font-weight: 700;
    text-decoration: none;
}

.instance-domain-link:hover {
    text-decoration: underline;
}

.last-msg-cell {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-state {
    color: #64748b;
    font-style: italic;
    padding: 1rem 0;
}

.pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-weight: 700;
    font-size: 0.78rem;
}

.pill.ok {
    background: #eaf8f1;
    border: 1px solid #8cc9a6;
    color: #0f5c3a;
}

.pill.error {
    background: #fef2f2;
    border: 1px solid #e3adad;
    color: #8b2a27;
}

.pill.inactive {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
}
</style>
{% endblock %}