{% import 'region_table_macros.html' as region_table %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{page_title}} - {{regions_written}} region(s) - antiSMASH results</title>
  <style>img {width: 20px; height: 20px;}</style>
  <link rel="stylesheet" type="text/css" href="css/{{options.taxon}}.css">
  <meta property="og:title" content="{{page_title}} - {{records | length}} record(s) - {{regions_written}} region(s)" />
  <meta property="og:description" content="{{options.html_description}}">
  <meta property="og:image" content="https://antismash.secondarymetabolites.org/images/{{options.taxon}}_logo.png" />
  <meta property="og:image:alt" content="antiSMASH logo" />
  <meta property="og:image:width" content="600" />
  <meta property="og:image:height" content="600" />
  <meta property="og:url" content="{{options.base_url}}upload/{{job_id}}/index.html" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@antismash_dev" />
</head>
{% set multi_record = records | length + records_without_regions | length > 1 %}
<body>
  <div id="header">
    {% include 'header.html' %}
    <div id="buttons">
      <span id="region-type">Select genomic region:</span>
      <div id="regionbuttons">
        <div class="arrow-left" id="prev-region"></div>
        <div class="regbutton" style="min-width: inherit;"><a href="#">Overview</a></div>
        <div style="display: flex; flex-wrap: wrap">
        {% for record in records %}
          {% for region in record.regions %}
            {{region_table.region_button(region, "div", get_region_css(region))}}
              <a href="#{{region.anchor_id}}">{{record.record_index}}.{{region.get_region_number()}}</a>
            </div>
          {% endfor %}
        {% endfor %}
        </div>
        <div id="last-regbutton"><div class="arrow-right" id="next-region"></div></div>
      </div>
    </div>
  </div>

  <!-- overview page -->
  {% if records %}
  <div class="page" id="overview">
   {% set intro = "Identified secondary metabolite regions using strictness '{}'".format(options.hmmdetection_strictness) %}
   {% if options.triggered_limit %}
     <h3>{{intro}} (truncated to the first {{options.limit}} record(s)) <span id="truncated"></span></h3>
   {% else %}
     <h3>{{intro}}<span id="truncated"></span></h3>
   {% endif %}
   <div class="overview-layout">
    <div id="record-tables">
     <div id="single-record-tables">
     {% for record in records -%}
      <div class="record-overview-header">
        {{record.get_from_record()}}
        <div class="download-container">
          <div class="download-icon-inverse download-svg" data-tag="record-minimap-{{record.record_index}}" data-filename="{{record.id}}_overview.svg">
          </div>
        </div>
      </div>
      <div class="record-overview-details">
        <svg id="record-minimap-{{record.record_index}}" class="record-overview-svg" height="1" width="1"></svg>
        {{ region_table.single_record_table(record, multi_record, options, get_region_css) }}
      </div>
     {%- endfor %}
     </div>
     {% if multi_record %}
     <div id="compact-record-table" style="display: none;">
      <div class="record-table">
       {{ region_table.compact_records_table(records, options, get_region_css) }}
      </div>
     </div>
     {% endif %}
     {% if records_without_regions %}
     <dl id="regionless-records">
      <dt class="record-overview-header">No secondary metabolite regions were found in these records:</dt>
       {% for record in records_without_regions %}
         <dd>{{record.get_from_record()}}</dd>
       {% endfor %}
     </dl>
     {% endif %}
    </div>
    {% if multi_record %}
    <div class="overview-switches">
     {{switch("Compact view", "overview-switch-compact", starts_on=options.html_start_compact)}}
    </div>
    {% endif %}
   </div>
  </div>
  {% else %}
  <div class="page" id="overview">
    <div class="no-results">No results found on input.</div>
  </div>
  {% endif %}

{% include 'regions.html' %}
{% include 'footer.html' %}

  <script src="js/jquery.js"></script>
  <script src="{{as_js_url}}"></script>
  <script src="regions.js"></script>
  <script>
    $(document).ready(function() {
        viewer["start"](all_regions, details_data, resultsData, recordData);
    })
  </script>

{% include 'svg_references.html' %}
</body>
</html>
