<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sentinel</title>
<link rel="stylesheet" href="/static/css/style.css?v=4">
<link rel="stylesheet" href="/static/css/monitoring-console.css?v=64">
<script src="/static/js/monitoring-console.js?v=64" defer></script>
    <link rel="stylesheet" href="/static/css/monitoring-v58.css?v=1">
</head>
<body data-page="{{ page }}">
<div class="app-shell monitoring-shell">
<header class="topbar monitoring-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="console.kicker">Laboratory monitoring</span>
<h1 id="console-title">Sentinel</h1>
<div class="equipment-meta"><span><strong>{{ equipment | length }}</strong> <span data-i18n="console.assets">monitored assets</span></span></div>
</div>
</div>
<div class="monitoring-header-actions">
<label class="console-language"><span data-i18n="common.language">Language</span><select id="console-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="console.online">Monitoring online</strong><span data-i18n="console.online_detail">Sentinel services available</span></div></div>
</div>
</header>

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

<main class="monitoring-main">
<section class="monitoring-summary">
<article class="monitor-stat"><span data-i18n="summary.assets">Assets</span><strong>{{ equipment | length }}</strong><small data-i18n="summary.assets_help">Registered equipment</small></article>
<a class="monitor-stat-link" href="/equipment-overview?status=healthy"><article class="monitor-stat monitor-good"><span data-i18n="summary.healthy">Healthy</span><strong>{{ healthy_count }}</strong><small data-i18n="summary.healthy_help">Health Score ≥ 85 · click to view</small></article></a>
<a class="monitor-stat-link" href="/equipment-overview?status=attention"><article class="monitor-stat"><span data-i18n="summary.attention">Attention</span><strong>{{ attention_count }}</strong><small data-i18n="summary.attention_help">Health Score below 85 · click to view</small></article></a>
<article class="monitor-stat monitor-alarm"><span data-i18n="summary.active_alarms">Active alarms</span><strong>{{ alarm_summary["active"] }}</strong><small data-i18n="summary.active_alarms_help">Threshold, device, system or predictive</small></article>
</section>

{% if page == "alarms" %}
<section class="console-section">
<div class="section-heading-row"><div><span class="eyebrow" data-i18n="alarms.kicker">Alarm management</span><h2 data-i18n="alarms.title">Alarm console</h2><a class="primary-action alarm-config-link" href="/administration#alarm-rules">Configure alarm rules</a><p data-i18n="alarms.intro">One place for active, acknowledged and resolved events, including predictive alarms.</p></div>
<div class="console-toolbar">
<label><span>Group</span><select id="alarm-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 class="pill-row"><span class="state-pill"><span data-i18n="alarms.active">Active</span> {{ alarm_summary["active"] }}</span><span class="state-pill"><span data-i18n="alarms.ack">Acknowledged</span> {{ alarm_summary["acknowledged"] }}</span><span class="state-pill"><span data-i18n="alarms.resolved">Resolved</span> {{ alarm_summary["resolved"] }}</span></div></div></div>
<div class="alarm-category-grid">
<article><strong data-i18n="alarmcat.threshold">Threshold</strong><span data-i18n="alarmcat.threshold_text">Temperature or configured limit exceeded.</span></article>
<article><strong data-i18n="alarmcat.device">Device</strong><span data-i18n="alarmcat.device_text">Sensor, logger or communication issue.</span></article>
<article><strong data-i18n="alarmcat.system">System</strong><span data-i18n="alarmcat.system_text">Sentinel platform or infrastructure issue.</span></article>
<article class="predictive-category"><strong data-i18n="alarmcat.predictive">Predictive</strong><span data-i18n="alarmcat.predictive_text">Degradation detected before a conventional alarm.</span></article>
</div>
<article class="console-card"><div class="card-head"><div><span class="card-label" data-i18n="alarms.list">Alarm register</span><h3 data-i18n="alarms.list_title">Current and recent alarms</h3></div></div>
{% if alarms %}<div class="console-table-wrap"><table class="console-table"><thead><tr><th>State</th><th>Severity</th><th>Category</th><th>Equipment</th><th>Message</th><th>Opened</th><th>Action</th></tr></thead><tbody>{% for alarm in alarms %}<tr id="alarm-{{ alarm['id'] }}"><td><span class="alarm-state">{{ alarm["state"] }}</span>{% if alarm["suppressed"] %}<span class="suppressed-badge">SUPPRESSED</span>{% endif %}</td><td>{{ alarm["severity"] }}</td><td>{{ alarm["category"] }}</td><td><a href="/equipment/{{ alarm['equipment_id'] }}">{{ alarm["equipment_id"] }}</a></td><td>{{ alarm["message"] }}</td><td>{{ alarm["opened_at"] }}</td><td><div class="row-actions">{% if alarm["state"] == "ACTIVE" %}<button class="small-action" data-alarm-action="acknowledge" data-alarm-id="{{ alarm['id'] }}">Acknowledge</button>{% endif %}{% if alarm["state"] != "RESOLVED" %}<button class="small-action secondary" data-alarm-action="resolve" data-alarm-id="{{ alarm['id'] }}">Resolve</button>{% endif %}<button class="small-action" type="button" data-alarm-details="{{ alarm['id'] }}">History</button></div></td></tr>
<tr class="alarm-detail-row" id="alarm-detail-{{ alarm['id'] }}" hidden><td colspan="7"><div class="alarm-detail-grid"><section><h4>Alarm lifecycle & comments</h4>{% for event in alarm_events_map.get(alarm['id'], []) %}<div class="alarm-history-item"><strong>{{ event['event_type'] }}</strong><span>{{ event['created_at'] }} · {{ event['actor'] or 'Sentinel' }}</span><p>{{ event['comment'] or '—' }}</p></div>{% else %}<p>No lifecycle event recorded.</p>{% endfor %}</section><section><h4>Notification cascade</h4>{% set ns = namespace(count=0) %}{% for notification in alarm_notifications %}{% if notification['alarm_id'] == alarm['id'] %}{% set ns.count = ns.count + 1 %}<div class="alarm-history-item"><strong>Step {{ notification['step_order'] }} · {{ notification['channel'] }} → {{ notification['recipient'] }}</strong><span>{{ notification['status'] }} · scheduled {{ notification['scheduled_at'] }}</span><p>{{ notification['detail'] or 'Waiting for scheduled dispatch.' }}</p></div>{% endif %}{% endfor %}{% if ns.count == 0 %}<p>No recipient cascade is attached to this alarm rule.</p>{% endif %}</section></div></td></tr>{% endfor %}</tbody></table></div>{% else %}<div class="console-empty"><strong data-i18n="alarms.empty_title">No alarms recorded</strong><span data-i18n="alarms.empty_text">Sentinel will keep this register for active, acknowledged and resolved alarms.</span></div>{% endif %}
<div class="transport-status"><strong>Notification transport:</strong> E-mail {% if notification_transport.email_configured %}<span class="status-chip enabled">configured</span>{% else %}<span class="status-chip disabled">not configured</span>{% endif %} · SMS <span class="status-chip disabled">not configured</span><small>Recipients and cascade are always audited. Messages are only marked SENT when a real transport confirms delivery to the gateway.</small></div></article>

</section>
{% endif %}

{% if page == "trends" %}
<section class="console-section">
<div class="section-heading-row"><div><span class="eyebrow" data-i18n="trends.kicker">Trend explorer</span><h2 data-i18n="trends.title">Trends</h2><p data-i18n="trends.intro">Compare temperature and Health Score using real measurement history.</p></div><label class="equipment-picker"><span data-i18n="trends.equipment">Equipment</span><select id="trend-equipment">{% for item in equipment %}<option value="{{ item['equipment_id'] }}">{{ item["equipment_id"] }}</option>{% endfor %}</select></label></div>
<div class="trend-grid"><article class="console-card trend-card"><div class="card-head"><div><span class="card-label" data-i18n="trends.temperature">Internal temperature</span><h3 id="trend-temp-value">—</h3></div><span class="unit-pill">°C</span></div><svg id="temperature-trend-chart" class="trend-chart" viewBox="0 0 900 260" preserveAspectRatio="none"></svg></article><article class="console-card trend-card"><div class="card-head"><div><span class="card-label" data-i18n="trends.health">Health Score</span><h3 id="trend-health-value">—</h3></div><span class="unit-pill">/100</span></div><svg id="health-trend-chart" class="trend-chart" viewBox="0 0 900 260" preserveAspectRatio="none"></svg></article></div>
<article class="console-card trend-interpretation"><span class="card-label" data-i18n="trends.interpretation">Sentinel interpretation</span><p id="trend-interpretation-text" data-i18n="trends.loading">Loading real equipment history…</p></article>
</section>
{% endif %}

{% if page == "reports" %}
<section class="console-section">
<div class="section-heading-row"><div><span class="eyebrow" data-i18n="reports.kicker">Reporting</span><h2 data-i18n="reports.title">Report center</h2><p data-i18n="reports.intro">Monitoring, alarm, technical and predictive reports are kept separate for clear client use.</p></div></div>
<div class="report-grid">
<article class="console-card report-card"><span class="report-icon">01</span><strong>Monitoring report</strong><p>Export up to 5,000 real measurements with temperature, current and Health Score.</p><span class="foundation-tag foundation-live">CSV export</span></article>
<article class="console-card report-card"><span class="report-icon">02</span><strong>Alarm report</strong><p>Export the alarm register including states, acknowledgements, resolution and suppression.</p><span class="foundation-tag foundation-live">CSV export</span></article>
<article class="console-card report-card"><span class="report-icon">03</span><strong>Technical report</strong><p>Generate the current explainable Sentinel Brain expert report.</p><span class="foundation-tag foundation-live">JSON export</span></article>
<article class="console-card report-card predictive-report"><span class="report-icon">04</span><strong>Predictive report</strong><p>Export current analysis plus long-term Brain Health Score trend.</p><span class="foundation-tag foundation-live">JSON export</span></article>
</div>
<article class="console-card"><div class="card-head"><div><span class="card-label">Equipment reports</span><h3>Generate a report now</h3></div></div>
<div class="v6-report-table">
{% for item in equipment %}
<div class="v6-report-row"><strong>{{ item["equipment_id"] }}</strong><div class="v6-report-actions">
<a href="/reports/print/{{ item['equipment_id'] }}" target="_blank">Printable report</a><a href="/reports/export/monitoring/{{ item['equipment_id'] }}.csv">Excel-compatible CSV</a>
<a href="/reports/export/alarms/{{ item['equipment_id'] }}.csv">Alarms CSV</a>
<a href="/reports/export/technical/{{ item['equipment_id'] }}.json">Technical JSON</a>
<a href="/reports/export/predictive/{{ item['equipment_id'] }}.json">Predictive JSON</a>
</div></div>
{% endfor %}
</div></article>
</section>
{% endif %}

{% if page == "events" %}
<section class="console-section"><div class="section-heading-row"><div><span class="eyebrow" data-i18n="events.kicker">Audit trail</span><h2 data-i18n="events.title">Events</h2><p data-i18n="events.intro">A chronological log of alarm and administration actions.</p></div></div><article class="console-card">{% if events %}<div class="console-table-wrap"><table class="console-table"><thead><tr><th data-i18n="table.time">Time</th><th data-i18n="table.event">Event</th><th data-i18n="table.equipment">Equipment</th><th data-i18n="table.actor">Actor</th><th data-i18n="table.comment">Comment</th></tr></thead><tbody>{% for event in events %}<tr><td>{{ event["created_at"] }}</td><td>{{ event["event_type"] }}</td><td>{{ event["equipment_id"] }}</td><td>{{ event["actor"] or "—" }}</td><td>{{ event["comment"] or "—" }}</td></tr>{% endfor %}</tbody></table></div>{% else %}<div class="console-empty tall"><strong data-i18n="events.empty_title">No events recorded</strong><span data-i18n="events.empty_text">No alarm or administration event has been recorded yet. Sentinel will not create fake audit entries.</span></div>{% endif %}</article></section>
{% endif %}

{% if page == "administration" %}
<section class="console-section admin-v58">
<div class="admin-hero">
  <div>
    <span class="eyebrow">Administration</span>
    <h2>Configure Sentinel</h2>
    <p>Manage people, access groups, alarm rules and maintenance windows from one clear workspace.</p>
  </div>
  <div id="backend-version-badge" class="backend-badge">Checking backend…</div>
</div>

<nav class="admin-tabs" aria-label="Administration sections">
  <button type="button" class="admin-tab active" data-admin-tab="users">Users</button>
  <button type="button" class="admin-tab" data-admin-tab="groups">Groups & access</button>
  <button type="button" class="admin-tab" data-admin-tab="rules">Alarm rules</button>
  <button type="button" class="admin-tab" data-admin-tab="maintenance">Maintenance calendar</button>
  <button type="button" class="admin-tab" data-admin-tab="simulation">Simulation lab</button>
</nav>

<div id="backend-warning" class="backend-warning" hidden>
  <strong>Frontend/backend version mismatch.</strong>
  <span>Restart Sentinel so the browser and Python backend use the same V6.3.1 release.</span>
</div>

<section class="admin-panel active" data-admin-panel="users">
  <div class="admin-panel-heading">
    <div>
      <span class="step-number">01</span>
      <div><h3>Users</h3><p>Create accounts and choose their role.</p></div>
    </div>
    <button type="button" class="primary-action" data-focus-form="create-user-form">+ New user</button>
  </div>

  <form id="create-user-form" class="friendly-form">
    <label><span>Name</span><input name="display_name" placeholder="Samir Menaouli" required></label>
    <label><span>E-mail</span><input name="email" type="email" placeholder="name@laboratory.org" required></label>
    <label><span>Role</span><select name="role_code"><option value="VIEWER">Viewer — read only</option><option value="OPERATOR">Operator — monitor & acknowledge</option><option value="MANAGER">Manager — manage alarms</option><option value="ADMIN">Admin — full access</option></select></label>
    <button type="submit" class="primary-action">Create user</button>
  </form>

  <div class="data-card">
    <div class="data-card-title"><h4>Configured users</h4><span>{{ users | length }} total</span></div><label class="admin-search"><span>Search</span><input id="admin-user-search" placeholder="Name, e-mail, role or group"></label>
    {% if users %}
    <div class="console-table-wrap"><table class="console-table"><thead><tr><th>Name</th><th>Role</th><th>Groups</th><th>Status</th><th></th></tr></thead><tbody>
      {% for user in users %}
      <tr class="admin-user-row" data-search="{{ user['display_name'] }} {{ user['email'] }} {{ user['role_code'] }} {{ user['group_codes'] or '' }}">
        <td><strong>{{ user["display_name"] }}</strong><small>{{ user["email"] }}</small></td>
        <td>{{ user["role_code"] }}</td>
        <td>{{ user["group_codes"] or "Not assigned" }}</td>
        <td><span class="status-chip {% if user['enabled'] %}enabled{% else %}disabled{% endif %}">{% if user["enabled"] %}Enabled{% else %}Disabled{% endif %}</span></td>
        <td><div class="row-actions"><button class="small-action" data-user-toggle="{{ user['id'] }}" data-user-enabled="{{ user['enabled'] }}" data-user-email="{{ user['email'] }}" data-user-name="{{ user['display_name'] }}" data-user-role="{{ user['role_code'] }}">{% if user["enabled"] %}Disable{% else %}Enable{% endif %}</button><button class="small-action danger" data-user-delete="{{ user['id'] }}">Delete</button></div></td>
      </tr>
      {% endfor %}
    </tbody></table></div>
    {% else %}<div class="empty-friendly">No users yet. Create the first one above.</div>{% endif %}
  </div>
</section>

<section class="admin-panel" data-admin-panel="groups">
  <div class="admin-panel-heading"><div><span class="step-number">02</span><div><h3>Groups & access</h3><p>Model the way the laboratory actually works: CS4, CS20, teams or departments.</p></div></div></div>

  <form id="create-group-form" class="friendly-form four">
    <label><span>Group code</span><input name="group_code" placeholder="CS4" required></label>
    <label><span>Display name</span><input name="display_name" placeholder="Frankenstein" required></label>
    <label><span>Site</span><input name="site_code" placeholder="LCSB"></label>
    <label><span>Description</span><input name="description" placeholder="Optional"></label>
    <button type="submit" class="primary-action">Create group</button>
  </form>

  <div class="data-card">
    <div class="data-card-title"><h4>Groups</h4><span>{{ groups | length }} total</span></div>
    {% if groups %}
    <div class="group-cards">
      {% for group in groups %}
      <article class="group-card">
        <div><span class="group-code">{{ group["group_code"] }}</span><h4>{{ group["display_name"] }}</h4><p>{{ group["site_code"] or "No site" }}</p></div>
        <div class="group-stats"><span><strong>{{ group["equipment_count"] }}</strong> equipment</span><span><strong>{{ group["user_count"] }}</strong> users</span></div>
        <button class="text-danger" data-group-delete="{{ group['id'] }}">Delete group</button>
      </article>
      {% endfor %}
    </div>
    {% else %}<div class="empty-friendly">No groups yet. Create CS4, CS20 or any structure used by the lab.</div>{% endif %}
  </div>

  {% if groups %}
  <div class="assignment-columns">
    <form id="equipment-group-form" class="assignment-card">
      <div><h4>Assign equipment</h4><p>Choose which group can see an equipment.</p></div>
      <label><span>Equipment</span><select name="equipment_id" required>{% for item in equipment %}<option value="{{ item['equipment_id'] }}">{{ item["equipment_id"] }}</option>{% endfor %}</select></label>
      <label><span>Group</span><select name="group_id" required>{% for group in groups %}<option value="{{ group['id'] }}">{{ group["group_code"] }} — {{ group["display_name"] }}</option>{% endfor %}</select></label>
      <button type="submit" class="primary-action">Assign equipment</button>
    </form>

    <form id="user-group-form" class="assignment-card">
      <div><h4>Assign user permissions</h4><p>Grant access only to the groups this user needs.</p></div>
      <label><span>User</span><select name="user_id" required>{% for user in users %}<option value="{{ user['id'] }}">{{ user["display_name"] }}</option>{% endfor %}</select></label>
      <label><span>Group</span><select name="group_id" required>{% for group in groups %}<option value="{{ group['id'] }}">{{ group["group_code"] }}</option>{% endfor %}</select></label>
      <div class="permission-list"><label><input type="checkbox" name="can_view" checked> View equipment</label><label><input type="checkbox" name="can_acknowledge"> Acknowledge alarms</label><label><input type="checkbox" name="can_manage_alarms"> Manage alarm rules</label></div>
      <button type="submit" class="primary-action">Save permissions</button>
    </form>
  </div>
  {% endif %}
  <div class="data-card membership-card"><div class="data-card-title"><h4>Equipment memberships</h4><span>One equipment may belong to several groups</span></div>
  <div class="membership-list">{% for item in equipment %}<article class="membership-row"><div><strong>{{ item['equipment_id'] }}</strong>{% if item.get('simulated') %}<span class="simulated-badge">SIMULATED</span>{% endif %}</div><div class="group-chips">{% for membership in group_memberships %}{% if membership['equipment_id'] == item['equipment_id'] %}<span>{{ membership['group_code'] }} <button type="button" title="Remove from group" data-membership-remove-group="{{ membership['group_id'] }}" data-membership-remove-equipment="{{ item['equipment_id'] }}">×</button></span>{% endif %}{% endfor %}{% if not equipment_group_map.get(item['equipment_id']) %}<span class="muted-chip">Unassigned</span>{% endif %}</div></article>{% endfor %}</div></div>
</section>

<section class="admin-panel" data-admin-panel="rules">
  <div class="admin-panel-heading"><div><span class="step-number">03</span><div><h3>Alarm rules</h3><p>Create operational rules at site, group or individual equipment level.</p></div></div></div>

  <form id="create-rule-form" class="friendly-form rule-grid">
    <input type="hidden" name="rule_id" id="rule-id">
    <label><span>Rule name</span><input name="name" placeholder="Freezer too warm" required></label>
    <label><span>Apply to</span><select name="scope_type" id="rule-scope-type"><option value="EQUIPMENT">One equipment</option><option value="GROUP">A group</option><option value="SITE">Entire site</option></select></label>
    <label id="rule-target-equipment"><span>Equipment</span><select name="scope_id" id="rule-equipment">{% for item in equipment %}<option value="{{ item['equipment_id'] }}">{{ item['equipment_id'] }}{% if item.get('simulated') %} · SIMULATED{% endif %}</option>{% endfor %}</select></label>
    <label id="rule-target-group" hidden><span>Group</span><select id="rule-group">{% for group in groups %}<option value="{{ group['group_code'] }}">{{ group['group_code'] }} — {{ group['display_name'] }}</option>{% endfor %}</select></label>
    <label><span>Measured value</span><select name="metric" id="rule-metric"><option value="internal_temperature_c">Internal temperature</option><option value="compressor_temperature_c">Compressor temperature</option><option value="ambient_temperature_c">Ambient temperature</option><option value="health_score">Health Score</option></select></label>
    <label id="rule-sensor-label"><span>Sensor</span><select name="sensor_id" id="rule-sensor"></select><small>Physical sensor used for temperature rules.</small></label>
    <label><span>Severity</span><select name="severity"><option>WARNING</option><option>ALARM</option><option>CRITICAL</option></select></label>
    <label><span>Condition</span><select name="operator"><option value="above">Above</option><option value="below">Below</option></select></label>
    <label><span>Threshold</span><input name="threshold" type="number" step="0.01" required></label>
    <label><span>Delay before alarm</span><input name="delay_minutes" type="number" min="0" max="1440" value="10" required><small>minutes continuously outside limit</small></label>
    <label><span>Hysteresis</span><input name="hysteresis" type="number" min="0" step="0.01" value="1.0" required></label>
    <input type="hidden" name="category" value="THRESHOLD">
    <div class="rule-form-actions"><button type="submit" class="primary-action" id="rule-submit">Create alarm rule</button><button type="button" class="secondary-action" id="rule-cancel-edit" hidden>Cancel edit</button></div>
  </form>

  <div class="data-card">
    <div class="data-card-title"><h4>Active configuration</h4><span>{{ alarm_rules | length }} rules</span></div>
    {% if alarm_rules %}
    <div class="rule-list">
      {% for rule in alarm_rules %}
      <article class="rule-row">
        <div><strong>{{ rule["name"] }}</strong><span>{{ rule["scope_type"] }} · {{ rule["scope_id"] }}</span></div>
        <div class="rule-condition">{{ rule["parameters"].get("sensor_id") or rule["parameters"]["metric"] }} · {{ ">" if rule["parameters"]["operator"] == "above" else "<" }} {{ rule["parameters"]["threshold"] }} · delay {{ rule["parameters"].get("delay_minutes",0) }} min · hyst. {{ rule["parameters"].get("hysteresis",0) }}</div>
        <span class="severity-chip">{{ rule["severity"] }}</span>
        <div class="row-actions"><button class="small-action" data-rule-edit='{{ rule|tojson }}'>Edit</button><button class="text-danger" data-rule-delete="{{ rule['id'] }}">Delete</button></div>
      </article>
      {% endfor %}
    </div>
    {% else %}<div class="empty-friendly">No alarm rules configured.</div>{% endif %}
  </div>

  <div class="data-card recipient-card">
    <div class="data-card-title"><h4>Recipients & escalation cascade</h4><span>{{ alarm_recipients | length }} configured steps</span></div>
    <form id="alarm-recipient-form" class="friendly-form four">
      <label><span>Alarm rule</span><select name="rule_id" required>{% for rule in alarm_rules %}<option value="{{ rule['id'] }}">{{ rule['name'] }}</option>{% endfor %}</select></label>
      <label><span>Escalation step</span><input name="step_order" type="number" min="1" value="1" required></label>
      <label><span>Channel</span><select name="channel"><option>EMAIL</option><option>SMS</option><option>BOTH</option></select></label>
      <label><span>Recipient</span><input name="recipient" placeholder="email, phone or on-call group" required></label>
      <label><span>Delay after previous step</span><input name="delay_minutes" type="number" min="0" value="10"><small>minutes without acknowledgement</small></label>
      <button type="submit" class="primary-action">Add escalation step</button>
    </form>
    {% if alarm_rules %}<div class="cascade-by-rule">{% for rule in alarm_rules %}<article class="cascade-rule-card"><div><strong>{{ rule['name'] }}</strong><span>{{ rule['scope_type'] }} · {{ rule['scope_id'] }}</span></div><div>{% set cascade = namespace(count=0) %}{% for recipient in alarm_recipients %}{% if recipient['rule_id'] == rule['id'] %}{% set cascade.count = cascade.count + 1 %}<div class="recipient-row"><strong>Step {{ recipient['step_order'] }}</strong><span>{{ recipient['channel'] }} → {{ recipient['recipient'] }} · +{{ recipient['delay_minutes'] }} min</span><button class="text-danger" data-recipient-delete="{{ recipient['id'] }}">Delete</button></div>{% endif %}{% endfor %}{% if cascade.count == 0 %}<div class="empty-friendly compact">No recipients for this rule.</div>{% endif %}</div></article>{% endfor %}</div>{% else %}<div class="empty-friendly">Create an alarm rule first.</div>{% endif %}
    <div class="transport-status"><strong>Transport status</strong><span>E-mail: {% if notification_transport.email_configured %}configured{% else %}NOT CONFIGURED{% endif %}</span><span>SMS: NOT CONFIGURED</span></div><small class="implementation-note">Cascade configuration is stored and audited. E-mail delivery uses SENTINEL_SMTP_* environment variables; SMS requires a site gateway integration.</small>
  </div>
</section>

<section class="admin-panel" data-admin-panel="maintenance">
  <div class="admin-panel-heading"><div><span class="step-number">04</span><div><h3>Maintenance calendar</h3><p>Temporarily suppress notifications without deleting the alarm or its audit trail.</p></div></div></div>

  <form id="create-schedule-form" class="friendly-form schedule-grid">
    <label><span>Window name</span><input name="name" placeholder="CS4 preventive maintenance" required></label>
    <input type="hidden" name="schedule_id" id="schedule-id"><label><span>Apply to</span><select name="scope_type" id="schedule-scope-type"><option value="GROUP">A group</option><option value="EQUIPMENT">One equipment</option><option value="SITE">Entire site</option></select></label>
    <label id="schedule-target-group"><span>Group</span><select id="schedule-group">{% for group in groups %}<option value="{{ group['group_code'] }}">{{ group['group_code'] }} — {{ group['display_name'] }}</option>{% endfor %}</select></label><label id="schedule-target-equipment" hidden><span>Equipment</span><select id="schedule-equipment">{% for item in equipment %}<option value="{{ item['equipment_id'] }}">{{ item['equipment_id'] }}</option>{% endfor %}</select></label><input type="hidden" name="scope_id" id="schedule-scope-id">
    <label><span>Alarm type</span><select name="alarm_category"><option value="">All alarms</option><option>THRESHOLD</option><option>PREDICTIVE</option><option>DEVICE</option><option>SYSTEM</option></select></label>
    <label><span>Start</span><input name="starts_at" type="datetime-local" required></label>
    <label><span>End</span><input name="ends_at" type="datetime-local" required></label>
    <label><span>Reason</span><input name="reason" placeholder="Preventive maintenance" required></label>
    <label><span>Created by</span><input name="created_by" placeholder="Samir"></label>
    <button type="submit" class="primary-action">Add maintenance window</button>
  </form>

  <div class="data-card">
    <div class="data-card-title"><h4>Scheduled windows</h4><span>{{ alarm_schedules | length }} total</span></div>
    {% if alarm_schedules %}
    <div class="schedule-list">
      {% for schedule in alarm_schedules %}
      <article class="schedule-row">
        <div><strong>{{ schedule["name"] }}</strong><span>{{ schedule["scope_type"] }} · {{ schedule["scope_id"] }}</span></div>
        <div><strong>{{ schedule["starts_at"] }}</strong><span>until {{ schedule["ends_at"] }}</span></div>
        <div><strong>{{ schedule["reason"] }}</strong><span>{{ schedule["alarm_category"] or "All alarms" }}</span></div>
        <span class="status-chip {% if schedule['enabled'] %}enabled{% else %}disabled{% endif %}">{% if schedule["enabled"] %}Enabled{% else %}Disabled{% endif %}</span>
        <div class="row-actions"><button class="small-action" data-schedule-edit='{{ schedule|tojson }}'>Edit / view</button><button class="small-action" data-schedule-toggle="{{ schedule['id'] }}" data-enabled="{{ schedule['enabled'] }}">{% if schedule["enabled"] %}Disable{% else %}Enable{% endif %}</button><button class="small-action danger" data-schedule-delete="{{ schedule['id'] }}">Delete</button></div>
      </article>
      {% endfor %}
    </div>
    {% else %}<div class="empty-friendly">No maintenance window scheduled.</div>{% endif %}
  </div>
</section>

<section class="admin-panel simulation-panel" data-admin-panel="simulation" id="simulation-lab">
  <div class="admin-panel-heading"><div><span class="step-number">05</span><div><h3>Simulation lab</h3><p>Create a realistic demonstration fleet without touching the real freezer data. Simulated devices are explicitly marked SIMULATED.</p></div></div></div>
  <div class="data-card">
    <div class="data-card-title"><h4>Demo fleet</h4><span>9 simulated assets + your real equipment</span></div>
    <p class="simulation-note">The simulator writes genuine measurement rows for test assets so Fleet, Trends, Brain, Alarms and Reports can be exercised end to end. Real equipment measurements are never deleted by the simulation controls.</p>
    <div class="simulation-actions"><button id="create-demo-fleet" class="primary-action" type="button">Create / refresh demo fleet</button><button id="clear-demo-fleet" class="secondary-action" type="button">Remove simulated equipment</button></div>
  </div>
</section>
</section>
{% endif %}
</main>
<footer><span>Sentinel Platform V7.0</span><span data-i18n="console.tagline">Monitoring familiar. Prediction different.</span></footer>
</div>
</body>
</html>
