<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Scoary2 Trait</title>
    <link rel="icon" type="image/x-icon" href="app/favicon.svg">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet" crossorigin="anonymous">
    <link href="//cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"
          rel="stylesheet" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.plot.ly/plotly-2.9.0.min.js"
            crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@phylocanvas/phylocanvas.gl@latest/dist/bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"
            crossorigin="anonymous"></script>

    <script src="app/trait.js"></script>
    <link href="app/trait.css" rel="stylesheet">
</head>
<body>


<div id="container-left" class="container">

    <h1 id="trait-name">Placeholder</h1>

    <div class="accordion" id="metadata-accordion">
        <div class="accordion-item">
            <h4 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#metadata-collapse" aria-expanded="false" aria-controls="metadata-collapse">
                    Metadata
                </button>
            </h4>
            <div id="metadata-collapse" class="accordion-collapse collapse">
                <div class="accordion-body">
                    <code id="metadata-content" class="whitespace">Placeholder</code>
                </div>
            </div>
        </div>

        <div class="accordion-item" id="trait-metadata" hidden>
            <h4 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#trait-collapse" aria-expanded="true" aria-controls="trait-collapse">
                    Trait info
                </button>
            </h4>
            <div id="trait-collapse" class="accordion-collapse collapse show">
                <div class="accordion-body">
                    <div id="trait-content">Placeholder</div>
                </div>
            </div>
        </div>
    </div>


    <div class="plot-title">
        <h2 style="display: inline">Tree: </h2>
        <h4 id="tree-gene-name"></h4>
    </div>

    <div id="tree"></div>

    <div class="title-with-link">
        <h2>Genes</h2>
        <a id="download-genes" href="">
            <button type="button" class="btn btn-info">results.tsv</button>
        </a>
    </div>

    <div> Toggle column:
        <div id="vis-toggler"></div>
    </div>
    <table id="result-tsv"></table>

    <div class="title-with-link">
        <h2>Coverage matrix</h2>
        <div class="download-links">
            <a id="download-coverage-matrix" href="">
                <button type="button" class="btn btn-info">coverage-matrix.tsv</button>
            </a>
            <a id="download-values" href="">
                <button type="button" class="btn btn-info">values.tsv</button>
            </a>
        </div>
    </div>

    <table id="coverage-matrix"></table>

</div>

<div id="container-right">

    <div id="pie-container">
        <div class="plot-title">
            <h2 style="display: inline">Pie: </h2>
            <h4 id="pie-gene-name"></h4>
        </div>
        <div id="pie"></div>
    </div>

    <div id="histogram-container">
        <div class="plot-title">
            <h2 style="display: inline">Histogram: </h2>
            <h4 id="histogram-gene-name"></h4>
        </div>
        <div id="histogram"></div>
    </div>

</div>

</body>
</html>
