{% 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 %}Account {{ 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">Last change: {{ last_change_label }} (+{{ status.last_change_counts.added }} −{{ status.last_change_counts.removed }} ~{{ status.last_change_counts.changed }})</span>
    {% endif %}
  </div>
  <div class="topbar-actions">
    <a id="history-link" class="btn" href="{{ base_path }}/history">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' %}Scanning{% elif snapshot %}Up to date{% else %}No data yet{% endif %}</span>
    </span>
    <button id="refresh-btn" class="btn btn-primary" type="button">Refresh now</button>
  </div>
</header>

<main class="layout">
  <nav class="sidebar" aria-label="Diagrams">
    <h2 class="side-title">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' %}{{ page.counts.get('regions', 0) }} regions · {{ page.counts.get('external_accounts', 0) }} external{% else %}{% set vpcs = page.counts.get('vpcs', 0) %}{% set subnets = page.counts.get('subnets', 0) %}{{ vpcs }} VPC{{ '' if vpcs == 1 else 's' }} · {{ subnets }} subnet{{ '' if subnets == 1 else 's' }}{% endif %}</span>
        </a>
      </li>
      {% endfor %}
      {% endfor %}
    </ul>
    <p id="side-empty" class="muted side-empty"{% if snapshot %} hidden{% endif %}>No diagrams yet.</p>
    <div class="side-downloads">
      <a id="dl-all-drawio" class="link" href="{{ base_path }}/export/all.drawio" download>All pages in one .drawio</a>
      <a id="dl-bundle" class="link" href="{{ base_path }}/export/all.zip" download>Everything as .zip</a>
    </div>
  </nav>

  <section class="content">
    <div class="tabs" role="tablist" aria-label="Views">
      <button id="tab-diagram" class="tab" role="tab" type="button" data-panel="diagram" aria-controls="panel-diagram" aria-selected="true">Diagram</button>
      <button id="tab-inventory" class="tab" role="tab" type="button" data-panel="inventory" aria-controls="panel-inventory" aria-selected="false">Inventory</button>
      <button id="tab-external" class="tab" role="tab" type="button" data-panel="external" aria-controls="panel-external" aria-selected="false">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">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">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>Download .drawio</a>
          <a id="dl-lucid" class="btn" href="{% if shown %}{{ base_path }}/export/{{ shown.key|urlencode }}.lucid{% else %}#{% endif %}" download>Download .lucid</a>
          <a id="dl-all" class="btn" href="{{ base_path }}/export/all.zip" download title="Every page as .drawio and .lucid, the multi-page .drawio, the inventory and the graph">Download all</a>
        </div>
      </div>
      <div id="family-bar" class="family-bar" role="group" aria-label="Families of services to show"{% if not shown or not shown.families %} hidden{% endif %}>
        <span class="family-bar-title">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"> Simple detail</label>
      </div>
      <div id="viewer-host" class="viewer-host" aria-live="polite">
        <p class="viewer-message">{% if snapshot %}Loading the diagram…{% else %}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 %}>diagram sha256:<code id="diagram-sha256">{% if shown %}{{ hashes.get(shown.key, '') }}{% endif %}</code> · generated at <span id="diagram-generated">{{ generated_label }}</span><span id="diagram-mismatch" class="fingerprint-alert" hidden> · the file received does not match the hash the server sent</span></p>
      <p class="hint">
        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.
        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>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>
        </div>
      </div>
      <div class="table-wrap">
        <table class="table">
          <thead><tr><th>Type</th><th class="num">Count</th></tr></thead>
          <tbody id="type-body"></tbody>
        </table>
      </div>
      <div class="panel-head spaced"><h2>Full inventory</h2></div>
      <iframe id="inventory-frame" class="inventory-frame" title="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>External accounts and cross-account links</h2></div>
      <p class="hint">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>Account</th><th>Name</th><th>Seen through</th><th class="num">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>Collection gaps</h2></div>
      <p class="hint">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>Service</th><th>Region</th><th>Operation</th><th>Code</th><th>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">This page needs JavaScript to draw the diagrams. The files are still available:
    <a href="{{ base_path }}/export/global.drawio">global .drawio</a>,
    <a href="{{ base_path }}/export/all.zip">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 %}