<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>{{ measurement["equipment_id"] }} · Sentinel</title>

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

    <script
        src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"
        defer
    ></script>

    <script
        src="/static/js/sentinel-v5.js?v=1"
        defer
    ></script>
    <link rel="stylesheet" href="/static/css/sentinel-v58.css?v=1">
</head>

<body
    data-equipment-id="{{ measurement['equipment_id'] }}"
    data-initial-health="{{ analysis.health_score }}"
    data-initial-status="{{ analysis.status }}"
>
    <div class="app-layout">

        <aside class="sidebar">
            <a href="/" class="brand">
                <img
                    src="/static/images/sentinel-logo.png"
                    alt="Sentinel"
                >
                <div>
                    <strong>Sentinel</strong>
                    <span data-i18n="brand.subtitle">
                        Equipment Intelligence
                    </span>
                </div>
            </a>

            <nav class="nav-list" aria-label="Equipment navigation">
                <button class="nav-item active" data-tab="overview">
                    <span class="nav-icon">01</span>
                    <span data-i18n="nav.overview">Overview</span>
                </button>

                <button class="nav-item" data-tab="analysis">
                    <span class="nav-icon">02</span>
                    <span data-i18n="nav.analysis">Trends & Analysis</span>
                </button>

                <button class="nav-item" data-tab="live">
                    <span class="nav-icon">03</span>
                    <span data-i18n="nav.live">Live Data</span>
                </button>

                <button class="nav-item" data-tab="profile">
                    <span class="nav-icon">04</span>
                    <span data-i18n="nav.profile">Equipment Profile</span>
                </button>

                <button class="nav-item" data-tab="history">
                    <span class="nav-icon">05</span>
                    <span data-i18n="nav.history">History</span>
                </button>

                <button class="nav-item" data-tab="maintenance">
                    <span class="nav-icon">06</span>
                    <span data-i18n="nav.maintenance">Maintenance</span>
                </button>
                <a class="nav-item nav-link-item" href="/alarms">
                    <span class="nav-icon">07</span>
                    <span>Alarms</span>
                </a>

                <a class="nav-item nav-link-item" href="/organization">
                    <span class="nav-icon">08</span>
                    <span>Administration</span>
                </a>
            </nav>

            <div class="sidebar-status">
                <span class="online-dot"></span>
                <div>
                    <strong data-i18n="status.online">Sentinel online</strong>
                    <span id="sidebar-connection">
                        Receiving data
                    </span>
                </div>
            </div>

            <a href="/" class="fleet-link">
                ← <span data-i18n="nav.fleet">Fleet overview</span>
            </a>
        </aside>

        <section class="workspace">
            <header class="workspace-header">
                <div>
                    <span class="page-kicker" data-i18n="header.equipment">
                        Monitored equipment
                    </span>

                    <h1 id="equipment-title">
                        {{ measurement["equipment_id"] }}
                    </h1>

                    <div class="header-meta">
                        <span>
                            <span data-i18n="header.device">Device</span>
                            <strong id="device-id">
                                {{ measurement["device_id"] }}
                            </strong>
                        </span>

                        <span>
                            <span data-i18n="header.last_update">
                                Last update
                            </span>
                            <strong id="recorded-at">
                                {{ measurement["recorded_at"] }}
                            </strong>
                        </span>
                    </div>
                </div>

                <div class="header-actions">
                    <label class="language-select">
                        <span data-i18n="header.language">Language</span>
                        <select id="language-selector">
                            <option value="en">English</option>
                            <option value="fr">Français</option>
                        </select>
                    </label>

                    <span id="header-status" class="status-pill">
                        {{ analysis.status }}
                    </span>
                </div>
            </header>

            <main class="content">

                <section class="tab-panel active" data-panel="overview">
                    <div class="section-title">
                        <div>
                            <span class="page-kicker" data-i18n="overview.kicker">
                                Client overview
                            </span>
                            <h2 data-i18n="overview.title">
                                Equipment status
                            </h2>
                        </div>

                        <span class="simple-badge" id="overview-updated">
                            Live
                        </span>
                    </div>

                    <div class="overview-layout">
                        <article class="hero-health card">
                            <span class="card-label" data-i18n="overview.health">
                                Equipment Health
                            </span>

                            <div class="health-value">
                                <strong id="health-score">
                                    {{ analysis.health_score | round(0) }}
                                </strong>
                                <span>%</span>
                            </div>

                            <div id="health-label" class="health-label">
                                {{ analysis.status }}
                            </div>

                            <p id="overview-summary">
                                {{ analysis.analysis }}
                            </p>
                        </article>

                        <div class="overview-cards">
                            <article class="summary-card card">
                                <span data-i18n="overview.risk">Risk level</span>
                                <strong id="risk-level">Very low</strong>
                                <small id="risk-index">0%</small>
                            </article>

                            <article class="summary-card card">
                                <span data-i18n="overview.prediction">
                                    Prediction
                                </span>
                                <strong id="overview-prediction">
                                    No near-term warning
                                </strong>
                                <small id="prediction-confidence">—</small>
                            </article>

                            <article class="summary-card card">
                                <span data-i18n="overview.action">
                                    Recommended action
                                </span>
                                <strong id="overview-action">
                                    {{ analysis.recommendation }}
                                </strong>
                                <small data-i18n="overview.action_note">
                                    Based on the current analysis
                                </small>
                            </article>

                            <article class="summary-card card">
                                <span data-i18n="overview.cause">
                                    Most likely cause
                                </span>
                                <strong id="overview-cause">
                                    {{ analysis.root_cause or "No anomaly detected" }}
                                </strong>
                                <small id="overview-cause-confidence">
                                    {{ analysis.root_cause_confidence | default(0, true) | round(0) }}%
                                </small>
                            </article>
                        </div>
                    </div>

                    <article class="simple-report card">
                        <div>
                            <span class="card-label" data-i18n="overview.report">
                                Sentinel summary
                            </span>
                            <h3 id="simple-report-title">
                                Everything is working normally.
                            </h3>
                            <p id="simple-report-text">
                                Cooling, electrical load and sensor readings
                                match the usual behavior of this equipment.
                            </p>
                        </div>

                        <button
                            type="button"
                            class="primary-button"
                            data-open-tab="analysis"
                            data-i18n="overview.view_details"
                        >
                            View analysis
                        </button>
                    </article>
                </section>

                <section class="tab-panel" data-panel="analysis">
                    <div class="section-title">
                        <div>
                            <span class="page-kicker" data-i18n="analysis.kicker">
                                Sentinel Brain
                            </span>
                            <h2 data-i18n="analysis.title">
                                Why Sentinel reached this conclusion
                            </h2>
                        </div>
                    </div>

                    <div class="analysis-layout">
                        <article class="card analysis-main">
                            <span class="card-label" data-i18n="analysis.assessment">
                                Current assessment
                            </span>
                            <h3 id="brain-analysis">
                                {{ analysis.analysis }}
                            </h3>

                            <div class="analysis-row">
                                <div>
                                    <span data-i18n="analysis.root_cause">
                                        Most likely cause
                                    </span>
                                    <strong id="root-cause">
                                        {{ analysis.root_cause or "No anomaly detected" }}
                                    </strong>
                                </div>

                                <div>
                                    <span data-i18n="analysis.confidence">
                                        Confidence
                                    </span>
                                    <strong>
                                        <span id="root-cause-confidence">
                                            {{ analysis.root_cause_confidence | default(0, true) | round(0) }}
                                        </span>%
                                    </strong>
                                </div>
                            </div>

                            <p id="root-cause-explanation">
                                {{
                                    analysis.root_cause_explanation
                                    or "No technical problem was detected."
                                }}
                            </p>
                        </article>

                        <article class="card subsystem-card">
                            <span class="card-label" data-i18n="analysis.health_areas">
                                Health areas
                            </span>

                            <div class="subsystem-list">
                                <div>
                                    <span data-i18n="analysis.thermal">Thermal</span>
                                    <strong id="thermal-score">
                                        {{ analysis.thermal_score | default(0, true) | round(0) }}%
                                    </strong>
                                </div>

                                <div>
                                    <span data-i18n="analysis.electrical">Electrical</span>
                                    <strong id="electrical-score">
                                        {{ analysis.electrical_score | default(0, true) | round(0) }}%
                                    </strong>
                                </div>

                                <div>
                                    <span data-i18n="analysis.cooling">Cooling</span>
                                    <strong id="cooling-score">
                                        {{ analysis.cooling_score | default(0, true) | round(0) }}%
                                    </strong>
                                </div>

                                <div>
                                    <span data-i18n="analysis.sensors">Sensors</span>
                                    <strong id="sensor-score">
                                        {{ analysis.sensor_score | default(0, true) | round(0) }}%
                                    </strong>
                                    <small class="score-help">Sensor integrity score: 100% = no anomaly detected; a lower score reflects findings such as missing, implausible or unstable sensor data.</small>
                                </div>
                            </div>
                        </article>
                    </div>

                    <div class="findings-header">
                        <h3 data-i18n="analysis.findings">Technical findings</h3>
                        <span id="findings-count">
                            {{ analysis.findings | length }}
                        </span>
                    </div>

                    <div id="findings-grid" class="findings-grid">
                        {% for finding in analysis.findings %}
                            <article class="finding-card card">
                                <div class="finding-head">
                                    <span class="finding-severity">
                                        {{ finding.severity }}
                                    </span>
                                    <strong>
                                        {{ finding.confidence | round(0) }}%
                                    </strong>
                                </div>

                                <h4>
                                    {{ finding.code | replace("_", " ") }}
                                </h4>

                                <p>{{ finding.explanation }}</p>

                                <small>
                                    {{ finding.value }} {{ finding.unit }}
                                </small>
                            </article>
                        {% endfor %}
                    </div>
                </section>

                <section class="tab-panel" data-panel="live">
                    <div class="section-title">
                        <div>
                            <span class="page-kicker" data-i18n="live.kicker">
                                Real-time data
                            </span>
                            <h2 data-i18n="live.title">
                                Current measurements
                            </h2>
                        </div>

                        <div class="chart-actions">
                            <button id="period-120" class="small-button">
                                10 min
                            </button>
                            <button id="period-720" class="small-button active">
                                1 hour
                            </button>
                            <button id="period-5000" class="small-button">
                                All
                            </button>
                        </div>
                    </div>

                    <div class="metrics-grid">
                        <article class="metric-card card">
                            <span data-i18n="live.internal">Internal</span>
                            <strong id="internal-temperature">
                                {{ measurement["internal_temperature_c"] }}
                            </strong>
                            <small>°C</small>
                        </article>

                        <article class="metric-card card">
                            <span data-i18n="live.ambient">Ambient</span>
                            <strong id="ambient-temperature">
                                {{ measurement["ambient_temperature_c"] }}
                            </strong>
                            <small>°C</small>
                        </article>

                        <article class="metric-card card">
                            <span data-i18n="live.evaporator">Evaporator</span>
                            <strong id="evaporator-temperature">
                                {{ measurement["evaporator_temperature_c"] }}
                            </strong>
                            <small>°C</small>
                        </article>

                        <article class="metric-card card">
                            <span data-i18n="live.compressor">Compressor</span>
                            <strong id="compressor-temperature">
                                {{ measurement["compressor_temperature_c"] }}
                            </strong>
                            <small>°C</small>
                        </article>

                        <article class="metric-card card">
                            <span data-i18n="live.current">Current</span>
                            <strong id="compressor-current">
                                {{ measurement["compressor_current_a"] }}
                            </strong>
                            <small>A</small>
                        </article>
                    </div>

                    <article class="chart-card card">
                        <div class="chart-header">
                            <h3 data-i18n="live.chart">Temperature history</h3>
                            <button id="reset-zoom" class="small-button">
                                Reset
                            </button>
                        </div>

                        <div class="chart-container">
                            <canvas id="temperature-chart"></canvas>
                        </div>
                    </article>
                </section>

                <section class="tab-panel" data-panel="profile">
                    <div class="section-title">
                        <div>
                            <span class="page-kicker">Sentinel DNA</span>
                            <h2 data-i18n="profile.title">
                                Normal behavior of this equipment
                            </h2>
                        </div>

                        <span id="profile-status" class="simple-badge">
                            Learning
                        </span>
                    </div>

                    <div class="profile-grid">
                        <article class="profile-card card">
                            <span data-i18n="profile.internal">
                                Normal internal temperature
                            </span>
                            <strong id="profile-internal">—</strong>
                        </article>

                        <article class="profile-card card">
                            <span data-i18n="profile.compressor">
                                Normal compressor temperature
                            </span>
                            <strong id="profile-compressor">—</strong>
                        </article>

                        <article class="profile-card card">
                            <span data-i18n="profile.current">
                                Normal compressor current
                            </span>
                            <strong id="profile-current">—</strong>
                        </article>

                        <article class="profile-card card">
                            <span data-i18n="profile.delta">
                                Normal cooling difference
                            </span>
                            <strong id="profile-delta">—</strong>
                        </article>

                        <article class="profile-card card">
                            <span data-i18n="profile.run">
                                Average run time
                            </span>
                            <strong id="profile-run">—</strong>
                        </article>

                        <article class="profile-card card">
                            <span data-i18n="profile.rest">
                                Average rest time
                            </span>
                            <strong id="profile-rest">—</strong>
                        </article>
                    </div>

                    <article class="card profile-footer">
                        <span data-i18n="profile.samples">Samples used</span>
                        <strong id="profile-samples">—</strong>
                    </article>
                </section>

                <section class="tab-panel" data-panel="history">
                    <div class="section-title">
                        <div>
                            <span class="page-kicker" data-i18n="history.kicker">
                                Brain Memory
                            </span>
                            <h2 data-i18n="history.title">
                                Health history
                            </h2>
                        </div>

                        <span id="history-trend" class="simple-badge">
                            Learning
                        </span>
                    </div>

                    <div class="history-summary">
                        <article class="card">
                            <span data-i18n="history.diagnostics">
                                Stored diagnostics
                            </span>
                            <strong id="history-count">—</strong>
                        </article>

                        <article class="card">
                            <span data-i18n="history.first">
                                First Health Score
                            </span>
                            <strong id="history-first">—</strong>
                        </article>

                        <article class="card">
                            <span data-i18n="history.current">
                                Current Health Score
                            </span>
                            <strong id="history-current">—</strong>
                        </article>

                        <article class="card">
                            <span data-i18n="history.change">
                                Health change
                            </span>
                            <strong id="history-change">—</strong>
                        </article>
                    </div>

                    <article class="chart-card card">
                        <h3 data-i18n="history.chart">Health Score evolution</h3>
                        <div class="chart-container">
                            <canvas id="health-chart"></canvas>
                        </div>
                    </article>

                    <article class="card timeline-card">
                        <h3 data-i18n="history.timeline">Brain timeline</h3>
                        <div id="brain-timeline" class="timeline"></div>
                    </article>
                </section>

                <section class="tab-panel" data-panel="maintenance">
                    <div class="section-title">
                        <div>
                            <span class="page-kicker" data-i18n="maintenance.kicker">
                                Technical tools
                            </span>
                            <h2 data-i18n="maintenance.title">
                                Maintenance
                            </h2>
                        </div>
                    </div>

                    <div class="maintenance-grid v6-maintenance-grid">
                        <article class="maintenance-card card">
                            <strong>Calibration</strong>
                            <p>Record a comparison between a Sentinel sensor and a traceable reference.</p>
                            <form id="calibration-form" class="v6-calibration-form">
                                <label><span>Sensor</span><select name="sensor_id" required>
                                    {% for sensor in calibratable_sensors %}<option value="{{ sensor['sensor_id'] }}" data-metric="{{ sensor['metric'] }}">{{ sensor['role'] }} — {{ sensor['sensor_type'] }} — {{ sensor['channel'] or '—' }}</option>{% endfor %}
                                </select></label>
                                <label><span>Sentinel reading</span><input name="sentinel_value" type="number" step="0.001" placeholder="Measured by Sentinel" required></label>
                                <label><span>Reference reading</span><input name="reference_value" type="number" step="0.001" placeholder="Traceable reference value" required></label>
                                <label><span>Reference instrument</span><input name="reference_instrument" placeholder="e.g. Fluke 1523 · S/N 12345"></label>
                                <label><span>Technician</span><input name="technician" placeholder="Technician / initials" required></label>
                                <label><span>Comment</span><input name="comment" placeholder="Comment (optional)"></label>
                                <button class="primary-button" type="submit">Record calibration</button>
                            </form>
                        </article>

                        <article class="maintenance-card card">
                            <strong>Sensor health</strong>
                            <p>Sensor integrity is evaluated by Sentinel Brain from recent real measurements.</p>
                            <div class="v6-status-line"><span>Sensor score</span><b>{{ '%.0f'|format(analysis.sensor_score) if analysis.sensor_score is defined else '—' }}/100</b></div>
                            <a class="secondary-button" href="#" data-tab-link="analysis">Open sensor findings</a>
                        </article>

                        <article class="maintenance-card card">
                            <strong>Diagnostics</strong>
                            <p>Database integrity and local storage are checked directly on this Sentinel node.</p>
                            <div class="v6-status-line"><span>System</span><b>{{ diagnostics['status'] }}</b></div>
                            {% for check in diagnostics['checks'] %}
                            <small class="v6-check {{ 'ok' if check['ok'] else 'bad' }}">{{ check['name'] }} · {{ check['detail'] }}</small>
                            {% endfor %}
                            <button id="refresh-diagnostics" class="secondary-button" type="button">Run diagnostics</button>
                        </article>

                        <article class="maintenance-card card">
                            <strong>Backup</strong>
                            <p>Create a ZIP containing configuration, databases, code, templates, logs and tests.</p>
                            <a class="primary-button" href="/api/system/backup">Download full backup</a>
                        </article>
                    </div>

                    <article class="card v6-calibration-history">
                        <div class="table-card-header"><div><span class="card-label">Calibration history</span><h3>Recorded reference comparisons</h3></div></div>
                        {% if calibrations %}
                        <div class="history-table-wrap"><table class="history-table"><thead><tr><th>Date</th><th>Sensor</th><th>Sensor ID</th><th>Sentinel</th><th>Reference</th><th>Offset</th><th>Reference instrument</th><th>Technician</th></tr></thead><tbody>
                        {% for row in calibrations %}<tr><td>{{ row['created_at'] }}</td><td>{{ row['sensor'] }}</td><td>{{ row['sensor_id'] or 'legacy' }}</td><td>{{ row['sentinel_value'] }}</td><td>{{ row['reference_value'] }}</td><td>{{ '%+.3f'|format(row['offset']) }}</td><td>{{ row['reference_instrument'] or '—' }}</td><td>{{ row['technician'] }}</td></tr>{% endfor %}
                        </tbody></table></div>
                        {% else %}<div class="empty-table-state">No calibration recorded for this equipment yet.</div>{% endif %}
                    </article>
                </section>


                <section class="tab-panel legacy-global-panel" data-panel="alarms">
                    <div class="section-title">
                        <div>
                            <span
                                class="page-kicker"
                                data-i18n="alarms.kicker"
                            >
                                Alarm management
                            </span>

                            <h2 data-i18n="alarms.title">
                                Alarms
                            </h2>
                        </div>

                        <span class="simple-badge alarm-state-ok">
                            <span class="status-dot-inline"></span>
                            <span data-i18n="alarms.no_active">
                                No active alarms
                            </span>
                        </span>
                    </div>

                    <div class="alarms-summary">
                        <article class="card alarm-stat">
                            <span data-i18n="alarms.active">
                                Active alarms
                            </span>
                            <strong>0</strong>
                            <small data-i18n="alarms.active_help">
                                Requires attention now
                            </small>
                        </article>

                        <article class="card alarm-stat">
                            <span data-i18n="alarms.awaiting_ack">
                                Awaiting acknowledgement
                            </span>
                            <strong>0</strong>
                            <small data-i18n="alarms.awaiting_ack_help">
                                Waiting for a user response
                            </small>
                        </article>

                        <article class="card alarm-stat">
                            <span data-i18n="alarms.escalated">
                                Escalated
                            </span>
                            <strong>0</strong>
                            <small data-i18n="alarms.escalated_help">
                                Sent to the next contact
                            </small>
                        </article>

                        <article class="card alarm-stat">
                            <span data-i18n="alarms.history">
                                Alarm history
                            </span>
                            <strong>0</strong>
                            <small data-i18n="alarms.history_help">
                                Recorded alarm events
                            </small>
                        </article>
                    </div>

                    <div class="alarms-layout">
                        <article class="card alarm-empty">
                            <div class="alarm-empty-icon">✓</div>

                            <div>
                                <span
                                    class="card-label"
                                    data-i18n="alarms.current_state"
                                >
                                    Current state
                                </span>

                                <h3 data-i18n="alarms.all_clear">
                                    Everything is clear.
                                </h3>

                                <p data-i18n="alarms.all_clear_text">
                                    Sentinel has no active alarm for this
                                    equipment.
                                </p>
                            </div>
                        </article>

                        <article class="card escalation-card">
                            <span
                                class="card-label"
                                data-i18n="alarms.escalation"
                            >
                                Escalation
                            </span>

                            <h3 data-i18n="alarms.escalation_title">
                                Automatic notification chain
                            </h3>

                            <div class="escalation-flow">
                                <div class="escalation-step">
                                    <span>1</span>
                                    <div>
                                        <strong data-i18n="alarms.contact_primary">
                                            Primary contact
                                        </strong>
                                        <small data-i18n="alarms.email_sms">
                                            Email / SMS
                                        </small>
                                    </div>
                                </div>

                                <div class="escalation-arrow">→</div>

                                <div class="escalation-step">
                                    <span>2</span>
                                    <div>
                                        <strong data-i18n="alarms.ack">
                                            Acknowledgement
                                        </strong>
                                        <small data-i18n="alarms.wait_delay">
                                            Wait configured delay
                                        </small>
                                    </div>
                                </div>

                                <div class="escalation-arrow">→</div>

                                <div class="escalation-step">
                                    <span>3</span>
                                    <div>
                                        <strong data-i18n="alarms.next_contact">
                                            Next contact
                                        </strong>
                                        <small data-i18n="alarms.if_no_ack">
                                            If not acknowledged
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="foundation-note">
                                <strong data-i18n="alarms.foundation">
                                    Architecture ready
                                </strong>

                                <span data-i18n="alarms.foundation_text">
                                    Email, SMS, acknowledgement, delays,
                                    groups and escalation rules will use
                                    this page.
                                </span>
                            </div>
                        </article>
                    </div>

                    <article class="card alarm-table-card">
                        <div class="table-card-header">
                            <div>
                                <span
                                    class="card-label"
                                    data-i18n="alarms.recent"
                                >
                                    Recent alarms
                                </span>

                                <h3 data-i18n="alarms.recent_title">
                                    Alarm events
                                </h3>
                            </div>

                            <button class="small-button" disabled>
                                <span data-i18n="alarms.configure">
                                    Configure
                                </span>
                            </button>
                        </div>

                        <div class="empty-table-state">
                            <span data-i18n="alarms.no_history">
                                No alarm has been recorded yet.
                            </span>
                        </div>
                    </article>
                </section>

            </main>
        </section>
    </div>
</body>
</html>
