<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sentinel · Operations</title>
<link rel="stylesheet" href="/static/css/operations-v59.css?v=64">
<script src="/static/js/operations-v59.js?v=64" defer></script>
</head>
<body data-page="{{ page }}">
<div class="ops-shell">
  <aside class="ops-sidebar">
    <a class="ops-brand" href="/">
      <div class="brand-mark">S</div>
      <div><strong>Sentinel</strong><span>Equipment Intelligence</span></div>
    </a>

    <nav class="ops-nav">
      <a href="/" data-nav="dashboard"><span class="nav-glyph">⌁</span>Dashboard</a>
      <a href="/equipment-overview" data-nav="equipment"><span class="nav-glyph">▣</span>Equipment</a>
      <a href="/cloud"><span class="nav-glyph">☁</span>Cloud & Devices</a>
      <a href="/alarms" data-nav="alarms"><span class="nav-glyph">!</span>Alarms</a>
      <a href="/alarm-blocking" data-nav="alarm-blocking"><span class="nav-glyph">◫</span>Alarm blocking</a>
      <a href="/trends" data-nav="trends"><span class="nav-glyph">↗</span>Trends</a>
      <a href="/reports" data-nav="reports"><span class="nav-glyph">▤</span>Reports</a>
      <div class="nav-divider"></div>
      <span class="nav-section">Administration</span>
      <a href="/organization" data-nav="organization"><span class="nav-glyph">⌘</span>Organization units</a>
      <a href="/users" data-nav="users"><span class="nav-glyph">♙</span>Users</a>
      <a href="/audit" data-nav="audit"><span class="nav-glyph">≡</span>Audit log</a>
      <a href="/administration"><span class="nav-glyph">⚙</span>Advanced configuration</a>
    </nav>

    <div class="sidebar-foot">
      <span class="online-dot"></span>
      <div><strong>Sentinel online</strong><span>V7.0 Operations</span></div>
    </div>
  </aside>

  <section class="ops-workspace">
    <header class="ops-header">
      <div>
        {% if page == "dashboard" %}<h1>Dashboard</h1><span>Operational status and predictive insight</span>{% endif %}
        {% if page == "equipment" %}<h1>Equipment overview</h1><span>Monitoring status, alarms and Health Score</span>{% endif %}
        {% if page == "alarm-blocking" %}<h1>Alarm blocking</h1><span>Maintenance and deviation calendar</span>{% endif %}
        {% if page == "organization" %}<h1>Organization units</h1><span>Structure users and equipment by laboratory group</span>{% endif %}
        {% if page == "users" %}<h1>Users</h1><span>Manage users and group access</span>{% endif %}
        {% if page == "audit" %}<h1>Audit log</h1><span>Trace configuration and alarm actions</span>{% endif %}
      </div>
      <div class="header-actions">
        <span class="header-site">LCSB</span>
        <span class="header-user">Sentinel Admin</span>
        <div class="avatar">S</div>
      </div>
    </header>

    <main class="ops-main">

    {% if page == "dashboard" %}
      <section class="metric-strip">
        <article><span>Equipment</span><strong>{{ equipment|length }}</strong><small>registered assets</small></article>
        <a class="metric-link" href="/equipment-overview?status=healthy"><article class="good"><span>Healthy</span><strong>{{ healthy_count }}</strong><small>Health Score ≥ 85 · click to view</small></article></a>
        <a class="metric-link" href="/equipment-overview?status=attention"><article class="warn"><span>Attention</span><strong>{{ attention_count }}</strong><small>requires review · click to view</small></article></a>
        <article class="alarm"><span>Active alarms</span><strong>{{ alarm_summary["active"] }}</strong><small>open conditions</small></article>
        <article class="predictive"><span>Predictive layer</span><strong>ON</strong><small>Sentinel Brain enabled</small></article>
      </section>

      <section class="dashboard-grid">
        <article class="ops-card alarm-chart-card">
          <div class="card-title"><div><h2>Alarm status per day</h2><span>Recent recorded alarms</span></div><a href="/alarms">Open alarms →</a></div>
          <div class="bar-chart">
            {% if alarm_daily %}
              {% set max_alarm = alarm_daily|map(attribute='total')|max %}
              {% for day in alarm_daily %}
              <div class="bar-column">
                <div class="bar-stack">
                  <span class="bar resolved" style="height: {{ (day.resolved / max_alarm * 170) if max_alarm else 0 }}px"></span>
                  <span class="bar open" style="height: {{ (day.open / max_alarm * 170) if max_alarm else 0 }}px"></span>
                </div>
                <strong>{{ day.total }}</strong>
                <small>{{ day.date[5:] }}</small>
              </div>
              {% endfor %}
            {% else %}
              <div class="empty-state">No alarm history recorded yet.</div>
            {% endif %}
          </div>
          <div class="legend"><span><i class="legend-good"></i>Resolved</span><span><i class="legend-bad"></i>Open</span></div>
        </article>

        <article class="ops-card health-overview">
          <div class="card-title"><div><h2>Fleet health</h2><span>Predictive overview</span></div><a href="/equipment-overview">Equipment →</a></div>
          <div class="health-ring-wrap">
            {% set total = equipment|length %}
            {% set pct = ((healthy_count / total * 100) if total else 0)|round(0) %}
            <div class="health-ring" style="--pct: {{ pct }}deg;">
              <div><strong>{{ pct|int }}%</strong><span>healthy</span></div>
            </div>
            <div class="health-copy">
              <strong>{{ healthy_count }} healthy</strong>
              <span>{{ attention_count }} need attention</span>
              <span>{{ offline_count }} without recent data</span>
            </div>
          </div>
          <div class="predictive-callout"><span>Sentinel Brain</span><strong>Look for degradation before a conventional alarm.</strong></div>
        </article>

        <article class="ops-card recent-alarms">
          <div class="card-title"><div><h2>Current and recent alarms</h2><span>Most relevant events</span></div></div>
          {% if alarms %}
          <div class="compact-table">
            {% for alarm in alarms %}
            <a href="/alarms#alarm-{{ alarm['id'] }}">
              <span class="state-dot {{ alarm['state']|lower }}"></span>
              <div><strong>{{ alarm["equipment_id"] }}</strong><small>{{ alarm["title"] }}</small></div>
              <span>{{ alarm["severity"] }}</span>
              <time>{{ alarm["opened_at"] }}</time>
            </a>
            {% endfor %}
          </div>
          {% else %}<div class="empty-state">No alarms recorded.</div>{% endif %}
        </article>

        <article class="ops-card group-summary">
          <div class="card-title"><div><h2>Laboratory groups</h2><span>Visibility and operational scope</span></div><a href="/organization">Manage →</a></div>
          {% if groups %}
          <div class="group-summary-list">
            {% for group in groups %}
            <a href="/equipment-overview?group={{ group['group_code'] }}">
              <div><strong>{{ group["group_code"] }}</strong><span>{{ group["display_name"] }}</span></div>
              <span>{{ group["equipment_count"] }} equipment</span>
            </a>
            {% endfor %}
          </div>
          {% else %}<div class="empty-state">No groups configured.</div>{% endif %}
        </article>
      </section>
    {% endif %}

    {% if page == "equipment" %}
      <section class="page-toolbar">
        <div class="filter-row">
          <label><span>Group</span><select id="equipment-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>
          <label class="search-field"><span>Search</span><input id="equipment-search" placeholder="Equipment ID, device or group"></label>{% if selected_status %}<span class="active-filter">Filter: {{ selected_status }}</span><a href="/equipment-overview">Clear</a>{% endif %}
        </div>
        <a class="primary-btn" href="/administration">Manage equipment</a>
      </section>

      <section class="ops-card equipment-table-card">
        <div class="equipment-table-head">
          <span></span><span>Status</span><span>Alarm</span><span>Equipment</span><span>Group</span><span>Temperature</span><span>Health Score</span><span>Last update</span>
        </div>
        <div id="equipment-list">
          {% for item in equipment %}
          {% set has_alarm = false %}
          {% for alarm in alarms %}
            {% if alarm["equipment_id"] == item["equipment_id"] and alarm["state"] != "RESOLVED" %}{% set has_alarm = true %}{% endif %}
          {% endfor %}
          <article class="equipment-row-wrap" data-search="{{ item['equipment_id'] }} {{ item['device_id'] }} {% for g in item['groups'] %}{{ g['group_code'] }} {{ g['display_name'] }} {% endfor %}">
            <div class="equipment-row">
              <button class="expand-btn" data-expand-equipment="{{ item['equipment_id'] }}">›</button>
              <span class="icon-state {% if item['recorded_at'] %}ok{% else %}bad{% endif %}">{% if item['recorded_at'] %}✓{% else %}×{% endif %}</span>
              <span class="icon-state {% if has_alarm %}bad{% else %}ok{% endif %}">{% if has_alarm %}!{% else %}✓{% endif %}</span>
              <div><a href="/equipment/{{ item['equipment_id'] }}">{{ item["equipment_id"] }}</a>{% if item.get('simulated') %}<span class="simulated-badge">SIMULATED</span>{% endif %}<small>{{ item["device_id"] }}</small></div>
              <div class="group-chips">{% for g in item["groups"] %}<span>{{ g["group_code"] }}</span>{% else %}<span class="muted-chip">Unassigned</span>{% endfor %}</div>
              <strong>{% if item["internal_temperature_c"] is not none %}{{ "%.2f"|format(item["internal_temperature_c"]) }} °C{% else %}—{% endif %}</strong>
              <div class="health-cell"><strong>{{ (item["health_score"]|round(0)|int) if item["health_score"] is not none else "—" }}</strong><span>/100</span></div>
              <time>{{ item["recorded_at"] or "No data" }}</time>
            </div>
            <div class="equipment-expand" id="expand-{{ item['equipment_id'] }}" hidden>
              <div class="sparkline-panel">
                <div><span>Recent temperature</span><strong class="spark-current">Loading…</strong></div>
                <svg class="equipment-sparkline" viewBox="0 0 600 130" data-equipment="{{ item['equipment_id'] }}"></svg>
              </div>
              <div class="expand-actions"><a href="/equipment/{{ item['equipment_id'] }}">Open full equipment dashboard</a><a href="/alarms">View alarms</a></div>
            </div>
          </article>
          {% else %}<div class="empty-state roomy">No equipment matches this group.</div>{% endfor %}
        </div>
      </section>
    {% endif %}

    {% if page == "alarm-blocking" %}
      <section class="page-toolbar">
        <div><strong>Maintenance & deviations</strong><span>Suppress notifications while keeping full traceability.</span></div>
        <button class="primary-btn" id="add-deviation-btn">+ Add deviation</button>
      </section>

      <section class="ops-card calendar-card">
        <div class="calendar-toolbar">
          <div><button id="cal-prev">‹</button><button id="cal-next">›</button><button id="cal-today">Today</button></div>
          <h2 id="calendar-title">Calendar</h2>
          <div class="view-switch"><button data-calendar-view="month" class="active">Month</button><button data-calendar-view="week">Week</button><button data-calendar-view="day">Day</button></div>
        </div>
        <div id="alarm-calendar"></div>
      </section>

      <script type="application/json" id="schedule-json">{{ alarm_schedules|tojson }}</script>

      <div class="modal-backdrop" id="deviation-modal" hidden>
        <div class="modal-card">
          <div class="modal-head"><h2 id="deviation-modal-title">Create a new deviation</h2><button id="close-deviation">×</button></div>
          <form id="calendar-schedule-form" class="modal-form"><input type="hidden" name="schedule_id">
            <label><span>Deviation level</span><select name="scope_type" id="deviation-scope-type"><option value="EQUIPMENT">Equipment</option><option value="GROUP">Group</option><option value="SITE">Site</option></select></label><label id="deviation-equipment-target"><span>Equipment</span><select id="deviation-equipment">{% for item in equipment %}<option value="{{ item['equipment_id'] }}">{{ item["equipment_id"] }}</option>{% endfor %}</select></label><label id="deviation-group-target" hidden><span>Group</span><select id="deviation-group">{% for group in groups %}<option value="{{ group['group_code'] }}">{{ group["group_code"] }} — {{ group["display_name"] }}</option>{% endfor %}</select></label><input type="hidden" name="scope_id" id="deviation-scope-id">
            <label><span>Deviation name</span><input name="name" placeholder="Preventive maintenance" required></label>
            <div class="two-col"><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></div>
            <label><span>Alarm category</span><select name="alarm_category"><option value="">All alarm categories</option><option>THRESHOLD</option><option>PREDICTIVE</option><option>DEVICE</option><option>SYSTEM</option></select></label>
            <label><span>Reason</span><textarea name="reason" rows="3" placeholder="Reason for alarm blocking" required></textarea></label>
            <label><span>Created by</span><input name="created_by" placeholder="Name / initials"></label>
            <div class="modal-actions"><button type="button" id="cancel-deviation">Cancel</button><button type="submit" class="primary-btn">Save deviation</button></div>
          </form>
        </div>
      </div>
    {% endif %}

    {% if page == "organization" %}
      <section class="page-toolbar">
        <div><strong>Organization tree</strong><span>Use groups to organize users and equipment.</span></div>
        <a class="primary-btn" href="/administration">+ Manage groups</a>
      </section>
      <section class="organization-layout">
        <article class="ops-card org-tree-card">
          <div class="org-root">
            <button class="tree-toggle">⌄</button><span class="tree-icon">⌘</span><strong>LCSB</strong><small>{{ users|length }} users · {{ equipment|length }} equipment</small>
          </div>
          <div class="tree-children">
            {% for group in groups %}
            <div class="org-group">
              <div class="org-line"><button class="tree-toggle">⌄</button><span class="tree-icon">●</span><strong>{{ group["group_code"] }} · {{ group["display_name"] }}</strong><small>{{ group["user_count"] }} users · {{ group["equipment_count"] }} equipment</small></div>
              <div class="org-equipment">
                {% for item in equipment %}
                  {% for g in item["groups"] %}
                    {% if g["group_code"] == group["group_code"] %}
                    <a href="/equipment/{{ item['equipment_id'] }}"><span>▦</span>{{ item["equipment_id"] }}<small>{{ item["device_id"] }}</small></a>
                    {% endif %}
                  {% endfor %}
                {% endfor %}
              </div>
            </div>
            {% endfor %}
            {% if not groups %}<div class="empty-state">No organization groups configured.</div>{% endif %}
          </div>
          <div class="org-unassigned"><strong>Unassigned equipment</strong>{% set ns = namespace(count=0) %}{% for item in equipment %}{% if not item['groups'] %}{% set ns.count = ns.count + 1 %}<a href="/equipment/{{ item['equipment_id'] }}"><span>▦</span>{{ item['equipment_id'] }}<small>{{ item['device_id'] }}</small></a>{% endif %}{% endfor %}{% if ns.count == 0 %}<small>All equipment is assigned to at least one group.</small>{% endif %}</div>
        </article>
        <aside class="ops-card org-help"><h3>How access works</h3><p>Assign users to one or more groups. Equipment assigned to those groups forms the user's operational scope.</p><a href="/users">Manage users →</a><a href="/administration">Advanced permissions →</a></aside>
      </section>
    {% endif %}

    {% if page == "users" %}
      <section class="page-toolbar">
        <label class="search-field wide"><span>Search users</span><input id="user-search" placeholder="Name, e-mail, role or group"></label>
        <a class="primary-btn" href="/administration">+ Create new user</a>
      </section>
      <section class="ops-card users-card">
        <div class="users-table-head"><span>User</span><span>Role</span><span>Organizational units</span><span>Status</span><span>Actions</span></div>
        <div id="users-list">
        {% for user in users %}
          <article class="user-row" data-search="{{ user['display_name'] }} {{ user['email'] }} {{ user['role_code'] }} {{ user['group_codes'] or '' }}">
            <div><strong>{{ user["display_name"] }}</strong><small>{{ user["email"] }}</small></div>
            <span class="role-chip">{{ user["role_code"] }}</span>
            <span>{{ user["group_codes"] or "LCSB / unassigned" }}</span>
            <span class="status-chip {% if user['enabled'] %}enabled{% else %}disabled{% endif %}">{% if user["enabled"] %}Active{% else %}Disabled{% endif %}</span>
            <a href="/administration">Actions</a>
          </article>
        {% else %}<div class="empty-state roomy">No users configured.</div>{% endfor %}
        </div>
      </section>
    {% endif %}

    {% if page == "audit" %}
      <section class="page-toolbar">
        <label class="search-field wide"><span>Search audit log</span><input id="audit-search" placeholder="Event, equipment, user or comment"></label>
      </section>
      <section class="ops-card audit-card">
        <div class="audit-head"><span>Time</span><span>Event</span><span>Equipment</span><span>User</span><span>Comment</span></div>
        <div id="audit-list">
          {% for event in events %}
          <article class="audit-row" data-search="{{ event['event_type'] }} {{ event['equipment_id'] }} {{ event['actor'] or '' }} {{ event['comment'] or '' }}">
            <time>{{ event["created_at"] }}</time><strong>{{ event["event_type"] }}</strong><span>{{ event["equipment_id"] }}</span><span>{{ event["actor"] or "Sentinel" }}</span><span>{{ event["comment"] or "—" }}</span>
          </article>
          {% else %}<div class="empty-state roomy">No audit events recorded.</div>{% endfor %}
        </div>
      </section>
    {% endif %}

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