<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    {{ bootstrap }}
    {{ common }}
    {{ report }}

    {{ allscripts }}

    <script type="text/javascript">
        var colors = {{ colors }};
        var broken_scaffolds_labels = {{ broken_scaffolds }};
    </script>
    {{ buildtotalreport }}
    {{ metascripts }}
    {{ buildreport }}

    <script type="text/javascript">
        $(function() {

            buildReport();

            dragTable.init();

            $("[rel=tooltip]").tooltip({ animation: false, });
        });
    </script>
</head>

<body>
<div class="top-panel">
    <table class="layout-table">
        <tr>
        <td class='layout-table-td'>
            <div class="page_title">
                <h1>
                    QUAST
                </h1>
                <p class="page_subtitle">
                    <b>Quality Assessment Tool for Genome Assemblies</b>
                    by <a href="http://cab.spbu.ru" class='dark_bg_link'>CAB</a>
                </p>
            </div>
        </td>
        </tr>
    </table>
</div>
<div class="content">
    <div id='header'>
        <p id='report_date'></p>

        <p id='icarus'></p>
        <p id='extrainfo'>Loading...</p>
        <p id='per_ref_msg'></p>
        <p id='krona'></p>

        <p id="data_set_p">
            <span style="display: none;" id="reference_name">Aligned to
                "<span class='val'></span>"
            </span>

            <span style="display: none;" id="combined_reference_name">
                Combined reference
            </span>

            <span style="display: none;" id="est_reference_length">Estimated reference size:
                <span class='val'></span><span class='rhs'>&nbsp;</span>bp
            </span>

            <span style="display: none;" id="reference_length">|
                <span class='val'></span><span class='rhs'>&nbsp;</span>bp
            </span>

            <span style="display: none;" id="combined_reference_files">|
                <span class='val'></span><span class='rhs'>&nbsp;</span>reference<span style="display: none;" class='plural_ending'>s</span>
            </span>

            <span style="display: none;" id="reference_fragments">|
                <span class='val'></span><span class='rhs'>&nbsp;</span>fragment<span style="display: none;" class='plural_ending'>s</span>
            </span>

            <span style="display: none;" id="reference_gc">|
                <span class='val'></span><span class='rhs'>&nbsp;</span>% G+C
            </span>

            <span style="display: none;" id="reference_chr">|
                <span class='val'></span> chromosome<span style="display: none;" class='plural_ending'>s</span>
            </span>

            <span style="display: none;" id="reference_reads"><br>
                <span class='val'></span> reads
            </span>

            <span style="display: none;" id="reference_mappedreads">|
                <span class='val'></span> mapped
            </span>

            <span style="display: none;" id="reference_pairedreads">|
                <span class='val'></span> properly paired
            </span>

            <span style="display: none;" id="reference_genes"><br>
                <span class='val'></span> genes
            </span>

            <span style="display: none;" id="reference_operons">|
                <span class='val'></span> operons
            </span>
        </p>
    </div>

    <noscript>
        <div style="margin-left: 0;">
            Unfortunately, <span style="font-weight: bold">JavaScript</span> in your
            browser <span style="font-weight: bold">is disabled</span> or is not supported.</br>
            We need JavaScript to build report and plots.
        </div>
    </noscript>

    <div class='report-and-plots'>
        <div class='report' id='main_report'>
            <div id="heatmap_header" style='display: none; float: left;'>
                <div style="padding-right: 10px; display: inline-block; vertical-align:top;">
                    <canvas id="gradientHeatmap" width="150" height="6"></canvas>
                    <div style="margin-left: 0; text-align: justify;">
                        <span class="heatmap_legend">Worst</span>
                        <span style="margin-left: -5px;" class="heatmap_legend">Median</span>
                        <span class="heatmap_legend">Best</span>
                        <span class="heatmap_legend" style='width: 100%; height: 0;'></span>
                    </div>
                </div>
                <label for="heatmaps_chbox"><input type="checkbox" checked="checked" id="heatmaps_chbox">Show heatmap</label>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class='plots'>
            <table style='margin: -3px;'>
                <tr id='all-switches'>
                    <td>
                        <div id='plots-switches'></div>
                    </td>
                    <td style='text-align: right; padding-right: 22px;'>
                        <span id='scale-placeholder'></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id='plot-placeholder' style=''></div>
                    </td>
                    <td>
                        <div id='legend-placeholder'></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p id="contigs_are_ordered">Contigs are ordered from largest (contig #1) to smallest.</p>
                        <p id="gc_info">Contigs are broken into nonoverlapping 100 bp windows.
                            Plot shows numbers of windows for each GC percentage.</p>
                    </td>
                </tr>
            </table>
        </div>

        <p>
            <span id="main_ref_genome"></span>
        </p>

        <div style="clear: left"></div>
        <div style="clear: right"></div>

        <div class='json-code'>
            <div id='total-report-json'>
                {{ totalReport }}
            </div>
            <div id='qualities-json'>
                {{ qualities }}
            </div>
            <div id='main-metrics-json'>
                {{ mainMetrics }}
            </div>

            <div id="contigs-lengths-json">
                {{ contigsLengths }}
            </div>
            <div id='assemblies-lengths-json'>
                {{ assembliesLengths }}
            </div>
            <div id='reference-length-json'>
                {{ referenceLength }}
            </div>
            <div id='tick-x-json'>
                {{ tickX }}
            </div>
            <div id='coord-nx-json'>
                {{ coordNx }}
            </div>
            <div id='coord-ngx-json'>
                {{ coordNGx }}
            </div>
            <div id='coord-nax-json'>
                {{ coordNAx }}
            </div>
            <div id='coord-ngax-json'>
                {{ coordNGAx }}
            </div>
            <div id='genes-in-contigs-json'>
                {{ genesInContigs }}
            </div>
            <div id='operons-in-contigs-json'>
                {{ operonsInContigs }}
            </div>
            <div id='summary-json'>
                [{{ num_contigs }},
                {{ Largest_alignment }},
                {{ Total_aligned_length }},
                {{ num_misassemblies }},
                {{ Misassembled_contigs_length }},
                {{ num_mismatches_per_100_kbp }},
                {{ num_indels_per_100_kbp }},
                {{ num_N's_per_100_kbp }},
                {{ Genome_fraction }},
                {{ Duplication_ratio }},
                {{ NGA50 }}]
            </div>
            <div id='misassemblies-json'>
                {{ allMisassemblies }}
            </div>
            <div id='krona-json'>
                {{ krona }}
            </div>
            <div id='gc-json'>
                {{ gcInfos }}
            </div>
            <div id='icarus-json'>
                {{ icarus }}
            </div>
        </div>
    </div>

    <div class='json-code'>
        <div id='glossary-json'>
            {{ glossary }}
        </div>
    </div>
</div>
</body>
</html>
