<!DOCTYPE html>
<html>

<head>
    {% block head %}
    <title>{{ title }}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
    {% endblock %}
</head>

<body>
    <div class="container">
        <div class="row">
            <h2 class="mt-5">
                {{ file_name }} Report
            </h2>
        </div>
        {% if 'lineage' in data and data['lineage']['lineage'] %}
        <div class="row">
            <table class="table table-striped table-hover">
                <caption>Lineage Info</caption>
                <thead class="thead-light">
                    <tr>
                        <th scope="col">Species</th>
                        <th scope="col">Lineage</th>
                        <th scope="col">Sub-lineage</th>
                        <th scope="col">Agreement with SNPs from this lineage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ data['lineage']['species'] }}</td>
                        <td>{{ data['lineage']['lineage'] }}</td>
                        <td>
                            {% if data['lineage']['sublineage'] %}
                            {{ data['lineage']['sublineage'] }}
                            {% else %}
                            Not Available
                            {% endif %}
                        </td>
                        <td>{{ data['lineage']['percent_agreement'] }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
        {% endif %}
        {% if 'mixed_infection' in data and data['mixed_infection'] %}
        <div class="row">
            <span>Suspected mixed infection</span>
        </div>
        {% endif %}
        <hr>
        {% block content %} {% endblock %}
        {% block footer %}
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
        </script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap4.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
        <script type="text/javascript" charset="utf8"
            src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
        <script type="text/javascript" language="javascript" class="init">
            $(function () {
                var table = $('#vcfreport').DataTable({
                    lengthChange: false,
                    buttons: [{
                        extend: 'csv',
                        text: 'Download CSV',
                        filename: '{{ file_name }}'
                    }]
                });
                table.buttons().container().appendTo('#vcfreport_wrapper .col-md-6:eq(0)');
            });
        </script>
        {% endblock %}
    </div>
</body>

</html>
