{{define "dashboard"}}
<div class="dashboard" data-dashboard>
  <div class="dashboard-toolbar">
    <p>장치 상태와 연결 현황을 한눈에 확인하세요.</p>
    <div class="dashboard-sync" data-dashboard-sync data-state="loading" role="status">
      <span class="dashboard-status-dot" aria-hidden="true"></span>
      <span data-dashboard-value="sync-label">데이터 불러오는 중</span>
      <time data-dashboard-value="updated" data-i18n-skip>—</time>
    </div>
  </div>

  <div class="dashboard-metrics" aria-label="핵심 상태">
    <section class="dashboard-metric" data-metric="cpu">
      <div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">CPU</span><h2>CPU 사용률</h2></div>
      <div class="dashboard-metric-value" data-dashboard-value="cpu" data-i18n-skip>—</div>
      <meter min="0" max="100" value="0" aria-label="CPU 사용률" hidden></meter>
      <p><span>온도</span> <strong data-dashboard-value="temperature" data-i18n-skip>—</strong></p>
    </section>
    <section class="dashboard-metric" data-metric="storage">
      <div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">DISK</span><h2>저장장치 사용량</h2></div>
      <div class="dashboard-metric-value" data-dashboard-value="storage" data-i18n-skip>—</div>
      <meter min="0" max="100" value="0" aria-label="저장장치 사용률" hidden></meter>
      <p><span>사용 / 전체</span> <strong data-dashboard-value="storage-detail" data-i18n-skip>—</strong></p>
      <p><span>사용 가능 공간</span> <strong data-dashboard-value="storage-available" data-i18n-skip>—</strong></p>
      <p class="dashboard-metric-description">로그·백업 등이 함께 사용하는 데이터 파티션</p>
    </section>
    <section class="dashboard-metric" data-metric="sessions">
      <div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">SES</span><h2>활성 세션</h2></div>
      <div class="dashboard-metric-value" data-dashboard-value="sessions" data-i18n-skip>—</div>
      <p class="dashboard-metric-description">현재 접속 중인 포트 세션</p>
    </section>
    <section class="dashboard-metric" data-metric="alarms">
      <div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">ALM</span><h2>활성 알람</h2></div>
      <div class="dashboard-metric-value" data-dashboard-value="alarms" data-i18n-skip>—</div>
      <p class="dashboard-metric-description" data-dashboard-value="alarm-description">데이터 불러오는 중</p>
    </section>
  </div>

  <section class="panel dashboard-ports">
    <div class="panel-header dashboard-panel-heading">
      <div><h2>포트 링크 상태</h2><p>포트를 선택하면 상세 설정으로 이동합니다.</p></div>
      <a class="dashboard-detail-link" href="/port-status">전체 포트 보기 <span aria-hidden="true">↗</span></a>
    </div>
    <div class="dashboard-port-toolbar">
      <div class="dashboard-port-summary"><span>활성 포트</span><strong data-dashboard-value="active-ports" data-i18n-skip>—</strong><span>/</span><span data-dashboard-value="total-ports" data-i18n-skip>48</span></div>
      <div class="dashboard-filters" role="group" aria-label="포트 상태 필터">
        <button type="button" data-port-filter="all" aria-pressed="true"><span>전체</span><b data-port-count="all">48</b></button>
        <button type="button" data-port-filter="up" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>UP</span><b data-port-count="up">—</b></button>
        <button type="button" data-port-filter="session" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>세션 연결</span><b data-port-count="session">—</b></button>
        <button type="button" data-port-filter="down" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>DOWN</span><b data-port-count="down">—</b></button>
        <button type="button" data-port-filter="unknown" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>미확인</span><b data-port-count="unknown">—</b></button>
      </div>
    </div>
    <div class="port-link-grid">
      {{range (index .Blocks 0).PortLinks}}
      <a class="port-link" href="/ports/{{.Number}}/parameters" data-dashboard-port="{{.Number}}" data-port-state="unknown" aria-label="포트 {{.Number}}: 상태 확인 중">
        <span class="dashboard-port-top"><span class="port-link-number" data-i18n-skip>{{.Number}}</span><i class="dashboard-status-dot" aria-hidden="true"></i></span>
        <span class="port-link-state">미확인</span>
      </a>
      {{end}}
    </div>
    <p class="dashboard-port-empty" hidden>선택한 상태의 포트가 없습니다.</p>
    <div class="dashboard-port-note"><span>미확인은 아직 장비 응답을 확인하지 못한 상태이며, 장애를 의미하지 않습니다.</span><span data-dashboard-value="port-sync-label">상태 확인 중</span></div>
  </section>

  <div class="dashboard-details">
    <section class="panel dashboard-network">
      <div class="panel-header dashboard-panel-heading"><h2>네트워크 정보</h2><span class="dashboard-section-tag">NETWORK</span></div>
      <div data-dashboard-network><p class="dashboard-placeholder">데이터 불러오는 중</p></div>
      <dl class="dashboard-facts dashboard-network-meta">
        <div><dt>호스트 이름</dt><dd data-dashboard-value="host" data-i18n-skip>—</dd></div>
        <div><dt>운영 모드</dt><dd data-dashboard-value="network-mode" data-i18n-skip>—</dd></div>
      </dl>
    </section>
    <section class="panel dashboard-traffic">
      <div class="panel-header dashboard-panel-heading"><h2>포트 사용 현황</h2><span class="dashboard-section-tag">TRAFFIC</span></div>
      <div class="dashboard-traffic-totals">
        <div><span>누적 수신</span><strong data-dashboard-value="rx" data-i18n-skip>—</strong></div>
        <div><span>누적 송신</span><strong data-dashboard-value="tx" data-i18n-skip>—</strong></div>
      </div>
      <h3>트래픽 상위 포트</h3>
      <ol class="dashboard-ranking" data-dashboard-ranking><li class="dashboard-placeholder">데이터 불러오는 중</li></ol>
      <p class="dashboard-footnote">누적 수신 + 송신 기준 · 실시간 속도가 아닙니다.</p>
    </section>
    <section class="panel dashboard-system">
      <div class="panel-header dashboard-panel-heading"><h2>시스템 정보</h2><span class="dashboard-section-tag">SYSTEM</span></div>
      <div class="dashboard-device"><strong data-dashboard-value="model" data-i18n-skip>—</strong><span><span>가동 시간</span> <b data-dashboard-value="uptime">—</b></span></div>
      <dl class="dashboard-facts dashboard-system-facts">
        <div><dt>하드웨어 프로필</dt><dd data-dashboard-value="hardware" data-i18n-skip>—</dd></div>
        <div><dt>펌웨어</dt><dd data-dashboard-value="firmware" data-i18n-skip>—</dd></div>
        <div><dt>빌드번호</dt><dd data-dashboard-value="build" data-i18n-skip>—</dd></div>
        <div><dt>장치 ID</dt><dd data-dashboard-value="device-id" data-i18n-skip>—</dd></div>
        <div><dt>시스템 시간</dt><dd data-dashboard-value="system-time" data-i18n-skip>—</dd></div>
        <div><dt>CPU 평균 (1 / 5 / 15분)</dt><dd data-dashboard-value="load" data-i18n-skip>—</dd></div>
        <div><dt>RAM 사용률</dt><dd data-dashboard-value="memory" data-i18n-skip>—</dd></div>
        <div><dt>RAM 사용 / 전체</dt><dd data-dashboard-value="memory-detail" data-i18n-skip>—</dd></div>
        <div><dt>남은 RAM</dt><dd data-dashboard-value="memory-available" data-i18n-skip>—</dd></div>
        <div><dt>저장공간 측정 경로</dt><dd data-dashboard-value="storage-path" data-i18n-skip>—</dd></div>
      </dl>
      <p class="dashboard-footnote">저장공간과 RAM은 별개입니다. 사용 가능 공간은 파일시스템 예약 영역을 제외합니다.</p>
    </section>
  </div>
</div>
{{end}}