{% extends "base.html" %}
{% block title %}{{ device_name }} – GANDALF{% endblock %}

{% block content %}
<div class="lt-page-header">
  <div>
    <p class="g-page-sub"><a href="{{ url_for('index') }}">← Dashboard</a></p>
    <h1 class="lt-page-title device-title">
      <span id="device-dot" class="dot-unknown"></span>
      <span>{{ device_name }}</span>
    </h1>
    <p class="g-page-sub" id="device-subtitle"></p>
  </div>
  <div id="device-actions" class="device-actions"></div>
</div>

<div id="device-root"><div class="link-loading">Loading device</div></div>

<!-- Outside device-root: auto-refresh must not reset the filter or port panel -->
<section class="g-section" id="device-ports" hidden>
  <div class="g-section-header"><h2 class="g-section-title" id="device-ports-title">Ports</h2></div>
  <div class="device-inspector" id="device-inspector">
    <div class="device-chassis" id="device-chassis" role="region" aria-label="Front panel"></div>
    <div class="inspector-panel" id="inspector-panel" role="complementary" aria-label="Port detail panel">
      <div class="inspector-panel-inner" id="inspector-panel-inner"></div>
    </div>
    <div class="lt-frame device-port-table">
      <span class="lt-frame-bl">&#x255A;</span>
      <span class="lt-frame-br">&#x255D;</span>
      <div class="lt-toolbar device-toolbar">
        <div class="lt-toolbar-left">
          <div class="lt-search">
            <input type="search" class="lt-input lt-search-input lt-search-input--sm" id="device-table-search"
                   placeholder="Filter…" autocomplete="off" aria-label="Filter ports">
          </div>
          <div class="sev-pills" role="group" aria-label="Filter by state">
            <button type="button" class="pill active" data-device-filter="all" aria-pressed="true">All</button>
            <button type="button" class="pill" data-device-filter="up" aria-pressed="false">Up</button>
            <button type="button" class="pill" data-device-filter="problems" aria-pressed="false">Errors (<span id="device-error-count">0</span>)</button>
          </div>
        </div>
      </div>
      <div id="device-table-wrap"></div>
    </div>
  </div>
</section>

{% include "_modem_panel.html" %}
{% endblock %}

{% block scripts %}
<script>const DEVICE_NAME = {{ device_name | tojson }};</script>
<script src="{{ url_for('static', filename='port-inspector.js') }}"></script>
<script src="{{ url_for('static', filename='device.js') }}"></script>
{% endblock %}