<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="jquery-ui.css" />

        <script src="jquery.js"></script>
        <script src="jquery-ui.js"></script>

        <link rel="stylesheet" href="bootstrap.css">
        <script src="bootstrap.js"></script>

        <script src="jquery.mousewheel.js"></script>
        <script src="svgscroller.js"></script>

        <link href="main.css" rel="stylesheet" />
    </head>

<body>
<div class="doc">

<h2>{{ variantDescription | safe }}</h2>

<a href="#" data-toggle="modal" data-target="#exportModal">Export</a>
<form id="toggleFlanking">
  <label><input type="checkbox" checked>Show reads in flanking regions</label>
</form>

<span id="description">
    <table>
        <tr>
            <th>Sample</th>
            <th>Alt</th>
            <th>Ref</th>
            <th>Amb</th>
        </tr>

        {% for samplename, row in results_table.iteritems() %}
            <tr>
                <td>{{ samplename }}</td>
                {% for cell in ["alt", "ref", "amb"] %}
                    <td>{{ row[cell] }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
</span>

{% for allele in ["alt", "ref", "amb"] %}        
    <h2>{% filter capitalize %}{{ allele }}{% endfilter %}</h2>
    <div id="{{ allele }}_result">
        <div class="scrollsalot">
            <div class="svg_container">

                {% for sample in samples %}
                    <div class="one_svg {{ sample }}">
                        <div style="position:absolute; z-index:1; left:0; top:0; padding: 2px; background-color: rgba(255,255,255,0.7);">{{ sample }}</div>

                        {% if loop.first %}
                            <div style="position:absolute; z-index:1; right:10px; top:0; padding: 2px; background-color: rgba(255,255,255,0.7);">
                                <button class="zoomin">+</button>
                                <button class="zoomout">&minus;</button>
                            </div>
                        {% endif %}
                        <div class="track"></div>
                    </div>
                    <div style="height:2px; background-color:gray;"></div>
                {% endfor %}

                {% for annotation in annotations %}
                    <div class="one_svg anno {{ annotation }}">
                        <div style="position:absolute; z-index:1;left:0; top:0; padding: 2px; background-color: rgba(255,255,255,0.7);">{{ annotation }}</div>
                        <div class="track"></div>
                    </div>
                    <div style="height:2px; background-color:gray;"></div>
                {% endfor %}

                <div class="one_svg axis">
                    <div class="track"></div>
                </div>

            </div>
        </div>
        <p class="info"></p>
    </div>
{% endfor %}

{% if insertSizeDistributions %}
    {% for name in insertSizeDistributions %}
      <image src="_isizes/{{ name }}" width="500" height="500" />
    {% endfor %}
{% endif %}

{% if dotplots %}
    {% for name in dotplots %}
        <hr>
      <h3>{{name}} dotplot</h3>
      <image src="_dotplots/{{ name }}" width="500" height="500" />
    {% endfor %}
{% endif %}


<form action="/_export" method="POST" id="exportForm">

<div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exportLabel">Export</h4>
          </div>
          <div class="modal-body">
              Format:
              <div class="form-group" id="exportFormat">
                <div class="radio">
                  <label><input type="radio" name="format" value="svg" {{ 'checked=""' if session.last_format=="svg" else '' }}>SVG<br></label>
                </div>

                <div class="radio disabled">
                  <label><input type="radio" name="format" value="png" class="requiresPNG" disabled {{ 'checked=""' if session.last_format=="png" else '' }}>PNG<br></label>
                </div>

                <div class="radio disabled">
                  <label><input type="radio" name="format" value="pdf" class="requiresPDF" disabled {{ 'checked=""' if session.last_format=="pdf" else '' }}>PDF<br></label>
                </div>

                <span id="requiresRSVGText" class="help-block">PNG export requires librsvg or inkscape to be installed. PDF export requires one of those programs or webkitToPDF. Click <a href="installPDFExport.html">here</a> for instructions.</span>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary" id="runExport">Download</button>
          </div>
        </div>
    </div>
</div>
</form>

<script src="interface.js"></script>

</body>
</html>
