{% extends 'base.html' %}
{% from 'components.html' import icon, option %}
{% set collections = [('trindade', 'Trindade16', 'Fundamental logic', trindade), ('fontes', 'Fontes18', 'Arithmetic & logic', fontes), ('iscas', 'ISCAS85', 'Combinational circuits', iscas), ('epfl', 'EPFL', 'Arithmetic & control', epfl)] %}
{% block content %}
<div class="page-shell explorer-page">
  <section class="explorer-hero" aria-labelledby="explorer-title">
    <div class="hero-copy">
      <div class="eyebrow">Open benchmark library</div>
      <h1 id="explorer-title">Small circuits.<br><span>Big possibilities.</span></h1>
      <p>Explore circuit layouts for field-coupled nanocomputing.<br class="desktop-break"> Find the right benchmark. Build what comes next.</p>
      <div class="hero-links"><a class="text-link" href="{{ url_for('description') }}">Get to know the library {{ icon('arrow') }}</a><span class="hero-separator"></span><span>Open source. Built for research.</span></div>
    </div>
    <div class="circuit-art" aria-hidden="true">
      <img src="{{ url_for('static', filename='qca_wordmark.svg') }}" alt="" width="1152" height="608">
    </div>
  </section>
  <div class="library-stats" aria-label="Library at a glance">
    <div>{{ icon('layers') }} <strong>{{ "{:,}".format(library_stats.layouts) }}</strong><span>circuit layouts</span></div>
    <div>{{ icon('circuit') }} <strong>{{ library_stats.functions }}</strong><span>benchmark functions</span></div>
    <div>{{ icon('grid') }} <strong>2</strong><span>gate libraries</span></div>
    <a href="{{ url_for('download_pre_gen_zip') }}">{{ icon('download') }}<span>Get the complete library</span>{{ icon('arrow') }}</a>
  </div>

  <form id="benchmark_form" class="explorer-layout" action="{{ url_for('download_data') }}" method="post" data-summary-url="{{ url_for('get_num_benchmarks') }}">
    <aside class="filter-sidebar" aria-label="Technology filters">
      <div class="filter-heading"><h2>{{ icon('filter') }} Refine your search</h2><button type="reset" class="text-button">Reset</button><button type="button" id="toggle-filters" class="text-button filter-toggle" aria-expanded="true" aria-controls="filters-body">Hide filters</button></div>
      <p class="filter-intro">Tailor the library to your technology.</p>
      <div id="filters-body">
      <details class="filter-section" open>
        <summary>Abstraction level {{ icon('chevron') }}</summary>
        <fieldset class="filter-options"><legend class="sr-only">Abstraction level</legend>
          {{ option('gate', 'Gate-level layouts', true, '.fgl') }}
          {{ option('network', 'Logic networks', true, '.v') }}
        </fieldset>
      </details>
      <details class="filter-section" open>
        <summary>Gate library {{ icon('chevron') }}</summary>
        <fieldset class="filter-options" id="library-options"><legend class="sr-only">Gate library</legend>
          {{ option('one', 'QCA ONE', true, 'QCA') }}
          {{ option('bestagon', 'Bestagon', true, 'SiDB') }}
        </fieldset>
      </details>
      <div class="best-layout-option">
        <label for="best-layout"><span>{{ icon('layers') }} Smallest layouts only</span><input id="best-layout" name="best-layout" type="checkbox" value="true" role="switch"></label>
        <p>Best available layout area for each function and gate library.</p>
      </div>
      <details class="filter-section" open>
        <summary>Clocking scheme {{ icon('chevron') }}</summary>
        <fieldset class="filter-options chip-options" id="clock-options"><legend class="sr-only">Clocking scheme</legend>
          {% for name, label in [('twoddwave', '2DDWave'), ('use', 'USE'), ('res', 'RES'), ('esr', 'ESR'), ('row', 'ROW')] %}
          <label><input type="checkbox" id="{{ name }}" name="{{ name }}" value="true"><span>{{ label }}</span></label>
          {% endfor %}
        </fieldset>
        <p class="field-help" id="clock-help">Any scheme when none selected.</p>
      </details>
      <details class="filter-section" open>
        <summary>Design algorithm {{ icon('chevron') }}</summary>
        <fieldset class="filter-options" id="algorithm-options"><legend class="sr-only">Physical design algorithm</legend>
          {{ option('exact', 'Exact') }}{{ option('ortho', 'Ortho') }}{{ option('nanoplacer', 'NanoPlaceR') }}{{ option('gold', 'Gold') }}
        </fieldset>
        <p class="field-help">Any algorithm when none selected.</p>
      </details>
      <details class="filter-section">
        <summary>Optimization {{ icon('chevron') }}</summary>
        <fieldset class="filter-options" id="optimization-options"><legend class="sr-only">Optimization</legend>
          {{ option('post-layout', 'Post-layout optimized only') }}{{ option('input-ordering', 'Ordered inputs only') }}
        </fieldset>
        <p class="field-help">Applies to the selected eligible algorithms.</p>
      </details>
      <details class="filter-section">
        <summary>Gold cost objective {{ icon('chevron') }}</summary>
        <fieldset class="filter-options" id="cost-options"><legend class="sr-only">Gold cost objective</legend>
          {{ option('area', 'Layout area') }}{{ option('wires', 'Number of wires') }}{{ option('crossings', 'Number of crossings') }}{{ option('acp', 'Area × crossings') }}
        </fieldset>
      </details>
      <a class="filter-guide" href="{{ url_for('description') }}">{{ icon('book') }} <span>New to nanocomputing?<br><strong>Explore the library guide {{ icon('arrow') }}</strong></span></a>
      </div>
    </aside>

    <div class="explorer-workspace">
      <section class="panel circuit-selection" aria-labelledby="circuits-heading">
        <div class="section-heading">
          <div><div class="eyebrow">01 / Choose your circuits</div><h2 id="circuits-heading">A starting point for every idea.</h2></div>
          <label class="select-all"><input id="all-benchmarks" type="checkbox" checked><span>Select all <span class="count-badge">{{ library_stats.functions }}</span></span></label>
        </div>
        <div class="circuit-toolbar">
          <div class="collection-tabs" role="group" aria-label="Benchmark collection">
            <button type="button" data-collection="all" aria-pressed="true">All collections</button>
            {% for key, title, description, benchmarks in collections %}<button type="button" data-collection="{{ key }}" aria-pressed="false">{{ title }}</button>{% endfor %}
          </div>
          <label class="search-field">{{ icon('search') }}<input id="circuit-search" type="search" placeholder="Find a circuit…" aria-label="Find a circuit by name"></label>
        </div>
        <div class="collection-list">
          {% for key, title, description, benchmarks in collections %}
          <section class="collection" data-collection-name="{{ key }}">
            <div class="collection-heading"><label><input type="checkbox" data-group="{{ key }}" checked><strong>{{ title }}</strong><span>{{ description }}</span></label><span class="group-count">{{ benchmarks|length }} / {{ benchmarks|length }}</span></div>
            <div class="circuit-chips">
              {% for benchmark in benchmarks %}
              <label class="circuit-chip" data-circuit-name="{{ benchmark.name|lower }} {{ benchmark.filename|lower }}">
                <input type="checkbox" name="selectBench_{{ benchmark.id }}" id="selectBench_{{ benchmark.id }}" value="{{ benchmark.name }}" data-circuit-group="{{ key }}" checked>
                <span>{{ icon('check') }}{{ benchmark.name }}</span>
              </label>
              {% endfor %}
            </div>
          </section>
          {% endfor %}
          <p id="no-circuits" class="empty-circuits" hidden>No circuits match your search. Try a function such as “adder” or “xor”.</p>
        </div>
        <div class="selection-footer"><span><strong id="selected-functions">{{ library_stats.functions }}</strong> functions selected across the library</span><button type="button" id="clear-circuits" class="text-button">Clear selection</button></div>
      </section>

      <section class="panel results-panel" aria-labelledby="results-heading">
        <div class="results-heading section-heading">
          <div><div class="eyebrow">02 / Explore &amp; download</div><h2 id="results-heading">Your benchmark collection <span id="result-count" class="count-badge">…</span></h2></div>
          <button class="button button-primary" type="submit" name="button" value="submit" id="download-button" disabled>{{ icon('download') }} Download ZIP</button>
        </div>
        <div class="results-toolbar">
          <div class="results-summary" aria-live="polite" aria-atomic="true"><span id="results-status">Finding your benchmarks…</span></div>
          <div class="export-controls"><label class="sr-only" for="format">Table export format</label><select name="format" id="format"><option value="csv">CSV</option><option value="excel">Excel</option><option value="json">JSONL</option></select><button type="submit" class="button button-quiet" name="button" value="submitTable" id="export-button" disabled>{{ icon('download') }} Export table</button></div>
        </div>
        <div class="table-scroll" id="results-container" tabindex="0" aria-label="Benchmark results. Scroll horizontally for more columns." aria-busy="true">
          <table class="benchmark-table">
            <caption class="sr-only">Matching benchmarks. Activate a column heading to sort; inspect a benchmark for all file details.</caption>
            <thead><tr>
              {% for label, key in [('Benchmark', 0), ('Gate library', 2), ('Clocking', 3), ('Algorithm', 4), ('Dimensions', 10), ('File size', 12)] %}
              <th scope="col" {% if loop.first %}aria-sort="ascending"{% endif %}><button type="button" data-sort="{{ key }}">{{ label }} <span aria-hidden="true">↕</span></button></th>
              {% endfor %}
              <th scope="col"><span class="sr-only">File details</span></th>
            </tr></thead>
            <tbody id="results-body"></tbody>
          </table>
        </div>
        <div id="empty-results" class="empty-state" hidden>{{ icon('search') }}<h3>No matching benchmarks</h3><p>Select a circuit or try a different combination of technology filters.</p><button type="reset" class="button button-secondary">Reset filters</button></div>
        <div id="results-error" class="empty-state" hidden>{{ icon('circuit') }}<h3>We couldn’t load the benchmarks</h3><p>Check your connection and try again. Your selection is still here.</p><button type="button" id="retry-results" class="button button-secondary">Try again</button></div>
        <div class="results-footer">
          <p id="page-status">Preparing results</p>
          <div class="pagination"><label for="page-size">Rows</label><select id="page-size"><option>10</option><option>25</option><option>50</option></select><button type="button" id="previous-page" class="icon-button" aria-label="Previous page" disabled>{{ icon('chevron', 'reverse') }}</button><span id="page-number">1 / 1</span><button type="button" id="next-page" class="icon-button" aria-label="Next page" disabled>{{ icon('chevron') }}</button></div>
        </div>
        <div class="download-summary"><span>{{ icon('layers') }} <strong id="compressed-size">—</strong> compressed <span class="summary-divider">/</span> <span id="uncompressed-size">—</span> uncompressed</span><span>All matching files are included in your download.</span></div>
      </section>
      <noscript><p class="notice">Enable JavaScript for live filtering and the results table. You can also <a href="{{ url_for('download_pre_gen_zip') }}">download the complete library</a>.</p></noscript>
    </div>
  </form>

  <section class="research-note">
    <div class="research-icon">{{ icon('book') }}</div>
    <div><div class="eyebrow">Built for the research community</div><h2>Good research starts with a shared foundation.</h2><p>Using MNT Bench in your work? Cite the library to help others build on your results.</p><a href="{{ url_for('static', filename='mntbench_technical_report.pdf') }}" target="_blank" rel="noopener noreferrer" class="text-link">Read the technical report {{ icon('external') }}</a></div>
    <button type="button" class="button button-secondary" data-open-dialog="citation-dialog">{{ icon('copy') }} Cite MNT Bench</button>
  </section>
</div>
{% endblock %}
{% block dialogs %}
<dialog id="citation-dialog" aria-labelledby="citation-title">
  <div class="dialog-heading"><div><div class="eyebrow">SUPPORT OPEN RESEARCH</div><h2 id="citation-title">Cite MNT Bench</h2></div><button type="button" class="icon-button" data-close-dialog aria-label="Close citation">{{ icon('close') }}</button></div>
  <p>If you use the library in your research, please cite the following publication.</p>
  <pre id="citation-text">{% raw %}@inproceedings{hofmann2024mntbench,
  author = {Hofmann, Simon and Walter, Marcel and Wille, Robert},
  booktitle = {2024 Design, Automation and Test in Europe (DATE)},
  title = {{MNT Bench}: Benchmarking Software and Layout Libraries for Field-coupled Nanocomputing},
  year = {2024}
}{% endraw %}</pre>
  <button type="button" id="copy-citation" class="button button-primary">{{ icon('copy') }} Copy BibTeX</button>
  <p id="citation-status" class="field-help" role="status"></p>
  <p class="field-help">Please also consider citing the <a href="https://fiction.readthedocs.io/en/latest/publications.html" target="_blank" rel="noopener noreferrer">algorithms used to create your layouts</a>.</p>
</dialog>
<dialog id="file-dialog" aria-labelledby="file-title">
  <div class="dialog-heading"><div><div class="eyebrow">BENCHMARK DETAILS</div><h2 id="file-title"></h2></div><button type="button" class="icon-button" data-close-dialog aria-label="Close benchmark details">{{ icon('close') }}</button></div>
  <code id="file-name" class="file-name"></code><dl id="file-details" class="file-details"></dl>
</dialog>
{% endblock %}