{% extends '@Projet/website_fleet/layout.html.twig' %}
{% block fleet_title %}Parc web{% endblock %}
{% block fleet_content %}
<header class="capsule-page-header website-fleet__header">
    <div><span class="website-fleet__eyebrow">Projet · Supervision</span><h1>Parc web</h1><p>Sites clients, environnements, hébergement et état de santé en un seul endroit.</p></div>
    <div class="capsule-page-actions"><a class="capsule-button capsule-button--secondary" href="{{ path('project_website_incident_index') }}"><i class="ti ti-alert-triangle"></i> Incidents</a><a class="capsule-button capsule-button--secondary" href="{{ path('project_website_infrastructure_index') }}"><i class="ti ti-server"></i> Hébergements</a>{% if can_check %}<form method="post" action="{{ path('project_website_check_all') }}"><input type="hidden" name="_token" value="{{ csrf_token('website_check_all') }}"><button class="capsule-button capsule-button--secondary" {{ has_pending_checks ? 'disabled' : '' }}><i class="ti {{ has_pending_checks ? 'ti-loader-2' : 'ti-refresh' }}"></i> {{ has_pending_checks ? 'Contrôles en attente' : 'Contrôler tous les sites' }}</button></form>{% endif %}{% if can_create %}<a class="capsule-button capsule-button--primary" href="{{ path('project_website_new') }}"><i class="ti ti-plus"></i> Ajouter un site</a>{% endif %}</div>
</header>

<section class="website-fleet__kpis">
    <article><span>Total</span><strong>{{ stats.total }}</strong><i class="ti ti-world-www"></i></article>
    <article class="is-online"><span>En ligne</span><strong>{{ stats.online }}</strong><i class="ti ti-circle-check"></i></article>
    <article class="is-degraded"><span>Dégradés</span><strong>{{ stats.degraded }}</strong><i class="ti ti-alert-triangle"></i></article>
    <article class="is-offline"><span>Hors ligne</span><strong>{{ stats.offline }}</strong><i class="ti ti-plug-off"></i></article>
</section>

<form class="website-fleet__filters" method="get">
    <input type="hidden" name="view" value="{{ view }}">
    <label><i class="ti ti-search"></i><input type="search" name="q" value="{{ filters.q }}" placeholder="Site, client, référence…"></label>
    <select name="status"><option value="">Tous les statuts</option>{% for status in statuses %}<option value="{{ status }}" {{ filters.status == status ? 'selected' }}>{{ status|replace({'_':' '})|capitalize }}</option>{% endfor %}</select>
    <select name="cms"><option value="">Tous les CMS</option>{% for cms in cms_types %}<option value="{{ cms }}" {{ filters.cms == cms ? 'selected' }}>{{ cms|capitalize }}</option>{% endfor %}</select>
    <button class="capsule-button capsule-button--secondary">Filtrer</button>
</form>

<nav class="website-fleet__view-switcher" aria-label="Mode d’affichage">
    <a class="{{ view == 'cards' ? 'is-active' }}" href="{{ path('project_website_index', filters|merge({view: 'cards'})) }}" aria-current="{{ view == 'cards' ? 'page' : 'false' }}"><i class="ti ti-layout-grid"></i> Cartes</a>
    <a class="{{ view == 'table' ? 'is-active' }}" href="{{ path('project_website_index', filters|merge({view: 'table'})) }}" aria-current="{{ view == 'table' ? 'page' : 'false' }}"><i class="ti ti-table"></i> Tableau</a>
</nav>

{% if view == 'table' %}
<section class="website-fleet__table table-responsive">
    <table class="table align-middle mb-0">
        <thead><tr><th>Site</th><th>Client</th><th>Statut</th><th>URL</th><th>Hébergement</th><th>Réponse</th><th></th></tr></thead>
        <tbody>
        {% for website in websites %}
            {% set primary = null %}{% for environment in website.environments %}{% if environment.primaryProductionSlot == 'primary' %}{% set primary = environment %}{% endif %}{% endfor %}
            {% set health = primary ? primary.healthStatus : 'unknown' %}
            <tr>
                <td><a class="website-fleet__table-name" href="{{ path('project_website_show', {token: website.idtoken}) }}">{{ website.name }}</a><small>{{ website.cmsType|upper }}</small></td>
                <td>{{ website.client.nom }}</td>
                <td><span class="health-label is-{{ health }}"><span class="health-dot is-{{ health }}"></span>{{ health == 'checking' ? 'Contrôle en attente' : health|replace({'_':' '})|capitalize }}</span></td>
                <td>{% if primary %}<a class="website-fleet__table-url" href="{{ primary.baseUrl }}" target="_blank" rel="noopener noreferrer">{{ primary.baseUrl }}</a>{% else %}<span class="text-body-secondary">Aucun environnement principal</span>{% endif %}</td>
                <td>{% if primary and primary.server %}<strong>{{ primary.server.name }}</strong><small>{{ primary.server.provider }}</small>{% else %}<span class="text-body-secondary">Non renseigné</span>{% endif %}</td>
                <td>{{ primary and primary.lastResponseTimeMs is not null ? primary.lastResponseTimeMs ~ ' ms' : 'Non mesuré' }}</td>
                <td><a class="website-fleet__table-open" href="{{ path('project_website_show', {token: website.idtoken}) }}" aria-label="Ouvrir {{ website.name }}"><i class="ti ti-chevron-right"></i></a></td>
            </tr>
        {% else %}
            <tr><td colspan="7"><div class="website-fleet__empty"><i class="ti ti-world-off"></i><h2>Aucun site dans ce parc</h2><p>Ajoutez un site client pour commencer sa documentation et sa supervision.</p></div></td></tr>
        {% endfor %}
        </tbody>
    </table>
</section>
{% else %}
<section class="website-fleet__grid">
{% for website in websites %}
    {% set primary = null %}{% for environment in website.environments %}{% if environment.primaryProductionSlot == 'primary' %}{% set primary = environment %}{% endif %}{% endfor %}
    {% set health = primary ? primary.healthStatus : 'unknown' %}
    <a class="website-card" href="{{ path('project_website_show', {token: website.idtoken}) }}">
        <div class="website-card__top"><span class="health-dot is-{{ health }}"></span><span class="website-card__status">{{ health == 'checking' ? 'Contrôle en attente' : health|replace({'_':' '})|capitalize }}</span><span class="website-card__cms">{{ website.cmsType|upper }}</span></div>
        <h2>{{ website.name }}</h2><p>{{ website.client.nom }}</p>
        <div class="website-card__url"><i class="ti ti-link"></i>{{ primary ? primary.baseUrl : 'Aucun environnement de production' }}</div>
        <footer><span><i class="ti ti-stack-2"></i>{{ website.environments|length }} env.</span><span>{{ primary and primary.lastResponseTimeMs ? primary.lastResponseTimeMs ~ ' ms' : 'Non mesuré' }}</span><i class="ti ti-chevron-right"></i></footer>
    </a>
{% else %}
    <div class="website-fleet__empty"><i class="ti ti-world-off"></i><h2>Aucun site dans ce parc</h2><p>Ajoutez un site client pour commencer sa documentation et sa supervision.</p></div>
{% endfor %}
</section>
{% endif %}
{% endblock %}