<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title data-i18n="fleet.page_title">Sentinel Fleet</title>

    <link
        rel="stylesheet"
        href="/static/css/style.css?v=4"
    >

    <link
        rel="stylesheet"
        href="/static/css/fleet-v5.css?v=1"
    >

    <link
        rel="stylesheet"
        href="/static/css/monitoring-console.css?v=1"
    >

    <script
        src="/static/js/fleet-v5.js?v=1"
        defer
    ></script>
</head>

<body>
    <div class="app-shell">

        <header class="topbar fleet-topbar">
            <div class="brand-block">
                <img
                    src="/static/images/sentinel-logo.png"
                    alt="Sentinel"
                    class="brand-logo"
                >

                <div class="equipment-title">
                    <span
                        class="eyebrow"
                        data-i18n="fleet.kicker"
                    >
                        Fleet intelligence
                    </span>

                    <h1 data-i18n="fleet.title">
                        Equipment overview
                    </h1>

                    <div class="equipment-meta">
                        <span>
                            <strong>{{ equipment | length }}</strong>
                            <span data-i18n="fleet.registered">
                                registered equipment
                            </span>
                        </span>
                    </div>
                </div>
            </div>

            <div class="fleet-topbar-actions">
                <label class="fleet-language-select">
                    <span data-i18n="common.language">
                        Language
                    </span>

                    <select id="fleet-language-selector">
                        <option value="en">English</option>
                        <option value="fr">Français</option>
                    </select>
                </label>

                <div class="online-status">
                    <span class="status-dot"></span>

                    <div>
                        <strong data-i18n="fleet.platform_online">
                            Sentinel platform online
                        </strong>

                        <span data-i18n="fleet.monitoring_active">
                            Fleet monitoring active
                        </span>
                    </div>
                </div>
            </div>
        </header>

        <nav class="global-nav" aria-label="Sentinel">
            <a class="global-nav-item active" href="/"><span data-i18n="global.fleet">Fleet</span></a>
            <a class="global-nav-item" href="/alarms"><span data-i18n="global.alarms">Alarms</span></a>
            <a class="global-nav-item" href="/trends"><span data-i18n="global.trends">Trends</span></a>
            <a class="global-nav-item" href="/reports"><span data-i18n="global.reports">Reports</span></a>
            <a class="global-nav-item" href="/events"><span data-i18n="global.events">Events</span></a>
            <a class="global-nav-item" href="/administration"><span data-i18n="global.administration">Administration</span></a>
        </nav>

        <main>
            {% if groups %}
            <div class="fleet-group-filter-wrap">
                <label>
                    <span>Group</span>
                    <select id="fleet-group-filter">
                        <option value="">All groups</option>
                        {% for group in groups %}
                        <option value="{{ group['group_code'] }}" {% if selected_group == group['group_code'] %}selected{% endif %}>{{ group["group_code"] }} · {{ group["display_name"] }}</option>
                        {% endfor %}
                    </select>
                </label>
            </div>
            {% endif %}
            <section class="fleet-summary">
                <article class="fleet-stat">
                    <span data-i18n="fleet.total">
                        Total equipment
                    </span>

                    <strong>{{ equipment | length }}</strong>
                </article>

                <article class="fleet-stat fleet-stat-good">
                    <span data-i18n="fleet.excellent">
                        Excellent
                    </span>

                    <strong>
                        {{
                            equipment
                            | selectattr("health_score", "ge", 85)
                            | list
                            | length
                        }}
                    </strong>
                </article>

                <article class="fleet-stat">
                    <span data-i18n="fleet.attention">
                        Attention required
                    </span>

                    <strong>
                        {{
                            equipment
                            | rejectattr("health_score", "ge", 85)
                            | list
                            | length
                        }}
                    </strong>
                </article>
            </section>

            <section class="fleet-heading">
                <div>
                    <span
                        class="eyebrow"
                        data-i18n="fleet.assets"
                    >
                        Monitored assets
                    </span>

                    <h2 data-i18n="fleet.equipment_fleet">
                        Equipment fleet
                    </h2>
                </div>
            </section>

            <section class="fleet-grid">
                {% for item in equipment %}

                    <a
                        class="equipment-card"
                        href="/equipment/{{ item['equipment_id'] }}"
                    >
                        <div class="equipment-card-header">
                            <div>
                                <span
                                    class="equipment-type"
                                    data-i18n="fleet.freezer"
                                >
                                    Laboratory freezer
                                </span>

                                <h3>{{ item["equipment_id"] }}</h3>

                                <span class="equipment-device">
                                    {{ item["device_id"] }}
                                </span>
                            </div>

                            {% if item["health_score"] is not none %}
                                {% if item["health_score"] >= 85 %}
                                    <span
                                        class="fleet-health excellent"
                                        data-health-status="EXCELLENT"
                                    >
                                        Excellent
                                    </span>
                                {% elif item["health_score"] >= 60 %}
                                    <span
                                        class="fleet-health watch"
                                        data-health-status="WATCH"
                                    >
                                        Watch
                                    </span>
                                {% elif item["health_score"] >= 35 %}
                                    <span
                                        class="fleet-health warning"
                                        data-health-status="WARNING"
                                    >
                                        Warning
                                    </span>
                                {% else %}
                                    <span
                                        class="fleet-health critical"
                                        data-health-status="CRITICAL"
                                    >
                                        Critical
                                    </span>
                                {% endif %}
                            {% else %}
                                <span
                                    class="fleet-health offline"
                                    data-health-status="OFFLINE"
                                >
                                    Offline
                                </span>
                            {% endif %}
                        </div>

                        <div class="equipment-card-values">
                            <div>
                                <span data-i18n="fleet.health_score">
                                    Health score
                                </span>

                                <strong>
                                    {% if item["health_score"] is not none %}
                                        {{ item["health_score"] | round(0) }}%
                                    {% else %}
                                        —
                                    {% endif %}
                                </strong>
                            </div>

                            <div>
                                <span data-i18n="fleet.internal">
                                    Internal
                                </span>

                                <strong>
                                    {% if item["internal_temperature_c"] is not none %}
                                        {{
                                            item["internal_temperature_c"]
                                            | round(2)
                                        }} °C
                                    {% else %}
                                        —
                                    {% endif %}
                                </strong>
                            </div>
                        </div>

                        <div class="equipment-card-footer">
                            <span>
                                <span data-i18n="fleet.last_measurement">
                                    Last measurement
                                </span>:
                                <span
                                    class="fleet-recorded-at"
                                    data-recorded-at="{{ item['recorded_at'] or '' }}"
                                >
                                    {{ item["recorded_at"] or "No data" }}
                                </span>
                            </span>

                            <strong data-i18n="fleet.open">
                                Open equipment →
                            </strong>
                        </div>
                    </a>

                {% else %}

                    <div class="empty-state">
                        <h2 data-i18n="fleet.empty">
                            No equipment registered
                        </h2>
                    </div>

                {% endfor %}
            </section>
        </main>

        <footer>
            <span>Sentinel Platform V5.1</span>
            <span data-i18n="fleet.tagline">
                Equipment Intelligence · Before Failure
            </span>
        </footer>
    </div>
</body>
</html>
