{% import 'legend_entry_macro.html' as le %}

{% set results = results_by_record_id[record.id] %}
{% set show_tta = tta_name in results and record.get_gc_content() >= options.tta_threshold %}
<div class="region-grid">
  <div class = "content">
    <div class ="description-container">
      <div class="heading"> {{record.get_name()}} - Region {{region.get_region_number()}} - {{region.get_product_string()}} {{help_tooltip(svg_tooltip, "region_svg")}}</div>
      {% if options.region_gbks %}
        <div class="region-download">
          <a href = {{ '%s.region%03d.gbk' % (record.id, region.get_region_number()) }}>Download region GenBank file</a>
       </div>
      {% endif %}
      <div class="region-download">
        <div class="link-like download-svg" data-tag="{{region.anchor_id}}-svg" data-filename="{{record.id}}_{{region.anchor_id}}.svg">Download region SVG</div>
      </div>
      <div class = 'description-text'>
        {{region.description_text()}}
        {% if region.detection_rules %}
        <a class="cluster-rules-header" id="{{region.anchor_id}}-rules-header" href="#{{region.anchor_id}}">Show pHMM detection rules used</a>
        {% endif %}
        {% if region.contig_edge %}
          <div class="contig-edge-warning">Region on contig edge.</div>
        {% endif %}
      </div>
      {% if region.detection_rules %}
      <div class="cluster-rules" id="{{region.anchor_id}}-rules">
        {{- region.detection_rules|join('<br>'|safe) -}}
      </div>
      {% endif %}
      <div class="region-svg-container">
       <div id='{{region.anchor_id}}-svg'>
       </div>
      </div>
    </div>
    <div class="legend">
      <h4>Legend:</h4>
      <div class="legend-items">
        {{le.legend('legend-type-biosynthetic', 'core biosynthetic genes')}}
        {{le.legend('legend-type-biosynthetic-additional', 'additional biosynthetic genes')}}
        {{le.legend('legend-type-transport', 'transport-related genes')}}
        {{le.legend('legend-type-regulatory', 'regulatory genes')}}
        {{le.legend('legend-type-other', 'other genes')}}
        <div style="margin-right: 2em;"></div>
        {% call le.symbol_legend('legend-resistance', 'resistance') %}
            <svg viewbox="0 0 8 8">
                <rect x=0 y=2 height=4 width=8 class="svgene-resistance"></rect>
            </svg>
        {% endcall %}
        {% if show_tta %}
            {% call le.symbol_legend('legend-tta-codon', 'TTA codons') %}
                <svg viewbox="0 0 6 6">
                    <polyline class="svgene-tta-codon" points="3,0 0,6 6,6 3,0"/>
                </svg>
            {% endcall %}
        {% endif %}
        {% if tfbs_name in results %}
            {% call le.static_symbol_legend('legend-binding-site', 'binding site') %}
                <svg viewbox="0 -1 8 8">
                    <g class="svgene-binding-site">
                    <line x1="4" y1="8" x2="4" y2="4"></line>
                    <circle cx="4" cy="2" r="2"></circle>
                    </g>
                </svg>
            {% endcall %}
        {% endif %}
        {% if region.has_subregion_by_tool("cassis") %}
            {{le.static_legend('legend-border-cassis', 'cluster extent as predicted by CASSIS')}}
        {% endif %}
      </div>
    </div>
    <div class="zoom-buttons">
      <div class="button-like zoom-button zoom-reset"><img src="images/expand-arrows-alt-solid.svg" alt="reset zoom">reset view</div>
      <div class="button-like zoom-button zoom-in"><img src="images/search-solid.svg" alt="zoom">zoom to selection</div>
    </div>
  </div>

  <div class="focus-panel">
    <div class="heading">
      <span>Gene details</span>
      {{help_tooltip("Shows details of the most recently selected gene, including names, products, location, and other annotations.", "focus-panel")}}
    </div>
    <div class="focus-panel-content focus-panel-content-{{region.anchor_id}}">
        <div style="text-align: center; margin-top: 30%;">
            Select a gene to view the details available for it
        </div>
    </div>
  </div>

  {% set all_module_sections = sections[record.id][region.get_region_number()] %}
  <div class="body-details">
    <div class="body-details-headers">
    {% for module_sections in all_module_sections %}
     {% for section in module_sections.detail_sections %}
      <div class="body-details-header {{region.anchor_id}}-{{section.class_name}}" data-name="{{region.anchor_id}}-{{section.class_name}}">
        {{section.label}}
      </div>
     {% endfor %}
    {% endfor %}
    </div>
    {% for module_sections in all_module_sections %}
     {% for section in module_sections.detail_sections %}
    <div class="body-details-section {{region.anchor_id}}-{{section.class_name}}">
      {{section.content}}
    </div>
     {% endfor %}
    {% endfor %}
  </div>

  <div class="sidepanel">
    <div class="sidepanel-details-headers">
    {% for module_sections in all_module_sections %}
     {% for section in module_sections.sidepanel_sections %}
      <div class="sidepanel-details-header {{region.anchor_id}}-{{section.class_name}}" data-name="{{region.anchor_id}}-{{section.class_name}}">
        {{section.label}}
      </div>
     {% endfor %}
    {% endfor %}
    </div>
    {% for module_sections in all_module_sections %}
     {% for section in module_sections.sidepanel_sections %}
    <div class="sidepanel-details-section {{region.anchor_id}}-{{section.class_name}}">
      {{section.content}}
    </div>
     {% endfor %}
    {% endfor %}
  </div>

</div>