<!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>

        <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 %}

        <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="requiresRSVG" 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="requiresRSVG" disabled {{ 'checked=""' if session.last_format=="pdf" else '' }}>PDF<br></label>
                        </div>

                        <span id="requiresRSVGText" class="help-block">PDF and PNG export requires librsvg library to be installed. 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>
