{% extends "base.html" %}
{% block body %}
{% set shown = snapshot.pages[0] if snapshot and snapshot.pages else none %}
<style>
  .page-group { margin: 14px 4px 6px; }
  .page-group:first-child { margin-top: 0; }
</style>
<header class="topbar">
  <div class="brand">
    <svg class="logo" viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
      <rect width="32" height="32" rx="6" fill="#ff9900"/>
      <path d="M16 11v5m0 0-6 5m6-5 6 5" stroke="#232f3e" stroke-width="1.8" fill="none" stroke-linecap="round"/>
      <circle cx="16" cy="9" r="3.2" fill="#232f3e"/>
      <circle cx="9" cy="23" r="3.2" fill="#232f3e"/>
      <circle cx="23" cy="23" r="3.2" fill="#232f3e"/>
    </svg>
    <h1>VPC Atlas</h1>
    <span class="badge">v{{ version }}</span>
  </div>
  <div class="topbar-meta">
    <span id="account" class="meta-item">{% if snapshot and snapshot.account_id %}{{ tr('Account {id}', id=snapshot.account_id) }}{% endif %}</span>
    <span id="updated" class="meta-item muted"></span>
    {% if status.last_change %}
    <span id="last-change" class="meta-item muted">{{ tr('Last change: {when} (+{added} −{removed} ~{changed})', when=last_change_label, added=status.last_change_counts.added, removed=status.last_change_counts.removed, changed=status.last_change_counts.changed) }}</span>
    {% endif %}
  </div>
  <div class="topbar-actions">
    <a id="history-link" class="btn" href="{{ base_path }}/history">{{ tr('History') }}</a>
    <span id="state-pill" class="pill" data-state="{% if status.state == 'scanning' %}scanning{% elif snapshot %}ready{% else %}empty{% endif %}">
      <span class="dot"></span>
      <span id="state-text">{% if status.state == 'scanning' %}{{ tr('Scanning') }}{% elif snapshot %}{{ tr('Up to date') }}{% else %}{{ tr('No data yet') }}{% endif %}</span>
    </span>
    <button id="refresh-btn" class="btn btn-primary" type="button">{{ tr('Refresh now') }}</button>
  </div>
</header>

<main class="layout">
  <nav class="sidebar" aria-label="{{ tr('Diagrams') }}">
    <h2 class="side-title">{{ tr('Diagrams') }}</h2>
    <ul id="page-list" class="page-list">
      {% for group in groups %}
      <li class="side-title page-group" data-level="{{ group.level }}">{{ group.title }}</li>
      {% for page in group.pages %}
      <li>
        <a href="#{{ page.key }}" class="page-link" data-key="{{ page.key }}" data-sha256="{{ hashes.get(page.key, '') }}">
          <span class="page-name">{{ page.title }}</span>
          <span class="page-meta">{% if page.scope == 'global' %}{{ tr('{regions} regions · {external} external', regions=page.counts.get('regions', 0), external=page.counts.get('external_accounts', 0)) }}{% elif page.scope == 'focus' %}{{ tr('{resources} resources · {links} links', resources=page.counts.get('resources', 0), links=page.counts.get('links', 0)) }}{% else %}{% set vpcs = page.counts.get('vpcs', 0) %}{% set subnets = page.counts.get('subnets', 0) %}{{ trn('{count} VPC', '{count} VPCs', vpcs) }} · {{ trn('{count} subnet', '{count} subnets', subnets) }}{% endif %}</span>
        </a>
      </li>
      {% endfor %}
      {% endfor %}
    </ul>
    <p id="side-empty" class="muted side-empty"{% if snapshot %} hidden{% endif %}>{{ tr('No diagrams yet.') }}</p>
    <div class="side-downloads">
      <a id="dl-all-drawio" class="link" href="{{ base_path }}/export/all.drawio" download>{{ tr('All pages in one .drawio') }}</a>
      <a id="dl-bundle" class="link" href="{{ base_path }}/export/all.zip" download>{{ tr('Everything as .zip') }}</a>
    </div>
  </nav>

  <section class="content">
    <div class="tabs" role="tablist" aria-label="{{ tr('Views') }}">
      <button id="tab-diagram" class="tab" role="tab" type="button" data-panel="diagram" aria-controls="panel-diagram" aria-selected="true">{{ tr('Diagram') }}</button>
      <button id="tab-inventory" class="tab" role="tab" type="button" data-panel="inventory" aria-controls="panel-inventory" aria-selected="false">{{ tr('Inventory') }}</button>
      <button id="tab-external" class="tab" role="tab" type="button" data-panel="external" aria-controls="panel-external" aria-selected="false">{{ tr('External accounts') }} <span id="external-count" class="count">0</span></button>
      <button id="tab-issues" class="tab" role="tab" type="button" data-panel="issues" aria-controls="panel-issues" aria-selected="false">{{ tr('Collection gaps') }} <span id="issues-count" class="count">0</span></button>
    </div>

    <div id="notice" class="notice" data-kind="info" hidden></div>

    <section id="panel-diagram" class="panel" role="tabpanel" aria-labelledby="tab-diagram">
      <div class="panel-head">
        <h2 id="diagram-title">{{ tr('Diagram') }}</h2>
        <div class="panel-actions">
          <a id="dl-drawio" class="btn" href="{% if shown %}{{ base_path }}/export/{{ shown.key|urlencode }}.drawio{% else %}#{% endif %}" download>{{ tr('Download .drawio') }}</a>
          <a id="dl-lucid" class="btn" href="{% if shown %}{{ base_path }}/export/{{ shown.key|urlencode }}.lucid{% else %}#{% endif %}" download>{{ tr('Download .lucid') }}</a>
          <a id="dl-all" class="btn" href="{{ base_path }}/export/all.zip" download title="{{ tr('Every page as .drawio and .lucid, the multi-page .drawio, the inventory and the graph') }}">{{ tr('Download all') }}</a>
        </div>
      </div>
      <div id="family-bar" class="family-bar" role="group" aria-label="{{ tr('Families of services to show') }}"{% if not shown or not shown.families %} hidden{% endif %}>
        <span class="family-bar-title">{{ tr('Show') }}</span>
        {% for family in (shown.families if shown else []) %}
        <label class="family-toggle"><input type="checkbox" data-family-name="{{ family }}" data-family-slug="{{ family|lower|replace(' ', '-') }}" checked> {{ family }}</label>
        {% endfor %}
        <label class="family-toggle family-detail"><input type="checkbox" id="detail-simple"> {{ tr('Simple detail') }}</label>
      </div>
      <div id="viewer-host" class="viewer-host" aria-live="polite">
        <p class="viewer-message">{% if snapshot %}{{ tr('Loading the diagram…') }}{% else %}{{ tr('The diagram appears here once a scan has produced a snapshot: press Refresh now to start one.') }}{% endif %}</p>
      </div>
      <p id="diagram-fingerprint" class="fingerprint" aria-live="polite"{% if not shown %} hidden{% endif %}>{{ tr('diagram sha256:') }}<code id="diagram-sha256">{% if shown %}{{ hashes.get(shown.key, '') }}{% endif %}</code> · {{ tr('generated at') }} <span id="diagram-generated">{{ generated_label }}</span><span id="diagram-mismatch" class="fingerprint-alert" hidden> · {{ tr('the file received does not match the hash the server sent') }}</span></p>
      <p class="hint">
        {{ tr('Drawn in your browser by the diagrams.net viewer, from the very file the buttons above download: drag to pan, use the toolbar to zoom or open the full-screen view.') }}
        {{ tr('The hash under the diagram identifies that file. The .drawio file opens in draw.io; each .lucid file is a Lucid Standard Import package, imported through the Lucid API.') }}
      </p>
    </section>

    <section id="panel-inventory" class="panel" role="tabpanel" aria-labelledby="tab-inventory" hidden>
      <div id="summary-cards" class="cards"></div>
      <div class="panel-head">
        <h2>{{ tr('Resources by type') }}</h2>
        <div class="panel-actions">
          <a id="dl-inv-json" class="btn" href="#" download>.json</a>
          <a id="dl-inv-md" class="btn" href="#" download>.md</a>
          <a id="dl-inv-html" class="btn" href="#" download>.html</a>
          <a id="dl-inv-csv" class="btn" href="#" download>.csv</a>
        </div>
      </div>
      <div class="table-wrap">
        <table class="table">
          <thead><tr><th>{{ tr('Type') }}</th><th class="num">{{ tr('Count') }}</th></tr></thead>
          <tbody id="type-body"></tbody>
        </table>
      </div>
      <div class="panel-head spaced"><h2>{{ tr('Full inventory') }}</h2></div>
      <iframe id="inventory-frame" class="inventory-frame" title="{{ tr('Network inventory') }}" sandbox="allow-scripts"></iframe>
    </section>

    <section id="panel-external" class="panel" role="tabpanel" aria-labelledby="tab-external" hidden>
      <div class="panel-head"><h2>{{ tr('External accounts and cross-account links') }}</h2></div>
      <p class="hint">{{ tr('Accounts other than the audited ones that own or share resources seen in this network: Transit Gateways shared through RAM, peering partners, endpoint services and so on.') }}</p>
      <div class="table-wrap">
        <table class="table">
          <thead><tr><th>{{ tr('Account') }}</th><th>{{ tr('Name') }}</th><th>{{ tr('Seen through') }}</th><th class="num">{{ tr('Links') }}</th></tr></thead>
          <tbody id="external-body"></tbody>
        </table>
      </div>
    </section>

    <section id="panel-issues" class="panel" role="tabpanel" aria-labelledby="tab-issues" hidden>
      <div class="panel-head"><h2>{{ tr('Collection gaps') }}</h2></div>
      <p class="hint">{{ tr('Calls that could not be completed, usually because the role lacks a permission or a service is not offered in a region. The rest of the inventory is still complete.') }}</p>
      <div class="table-wrap">
        <table class="table">
          <thead><tr><th>{{ tr('Service') }}</th><th>{{ tr('Region') }}</th><th>{{ tr('Operation') }}</th><th>{{ tr('Code') }}</th><th>{{ tr('Message') }}</th></tr></thead>
          <tbody id="issues-body"></tbody>
        </table>
      </div>
    </section>
  </section>
</main>

<div id="toast-host" class="toast-host" aria-live="polite"></div>

<noscript>
  <p class="noscript">{{ tr('This page needs JavaScript to draw the diagrams. The files are still available:') }}
    <a href="{{ base_path }}/export/global.drawio">{{ tr('global .drawio') }}</a>,
    <a href="{{ base_path }}/export/all.zip">{{ tr('everything as .zip') }}</a>.</p>
</noscript>

<script id="viewer-script" src="{{ viewer_url }}" async></script>
<script src="{{ base_path }}/static/app.js?v={{ version }}" defer></script>
{% endblock %}