{# The base template for the RiboMetric report #}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RiboMetric results</title>
  {% if filetype == "html" %}
  <link rel="icon" href="data:image/png;base64,{{favicon}}">
  <style>
    /* temp https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp */
    /* The sidebar menu */
    .sidenav {
        height: 100%; /* Full-height: remove this if you want "auto" height */
        width: 15%; /* Set the width of the sidebar */
        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: #1E1E1E; /* Black */
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 20px;
    }
    
    /* The navigation menu links */
    .sidenav a {
        padding: 6px 8px 6px 10px;
        text-decoration: none;
        font-size: 16px;
        color: #818181;
        display: block;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }

    /* Style page content */
    .main {
        margin-left: 15%; /* Same as the width of the sidebar */
        padding: 0px 10px;
    }
    
    /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
  </style>
  {% endif %}
  <style>
    .flex-container {
        display: flex;
    }

    .flex-child {
        flex: 1;
    }  

    .flex-child:first-child {
        margin-right: 20px;
    } 
    table, th, td {
        border: 1px solid white;
        border-collapse: collapse;
    }
  </style>
    {% if filetype == "html" %}
        <style>
            th, td {
                background-color: #636EFA80;
                padding: 5px;
            }
        </style>
    {% elif filetype == "pdf" %}
        <style>
            th, td {
                background-color: #B0B6FC;
                padding: 5px;
            }
        </style>
    {% endif %}
</head>
<body>
    {% if filetype == "html" %}
    <div class="sidenav">
        <a href="#"><h4> <img src="data:image/png;base64,{{logo}}" alt="RiboMetric" width="100%" height="auto"> </h4></a>
        {% for plot in plots %}
        <a href="#{{plot.name}}">{{plot.name}}</a>
        {% endfor %}
    </div>
    {% endif %}
    <div class="main">
        <div class="flex-container">
            <div class="flex-child">
                <h1>RiboMetric Report</h1>
                <h5>Results from your RiboMetric analysis of {{file_names.bam}}{% if 'annotation' in file_names %} with {{file_names.annotation}} as annotation{% endif %},
                    completed at {{completion_time}}</h5>
                <h2>Summary Report</h2>
                <div>
                    <table>
                        {% for metric in summary.metrics %}
                        <tr>
                            <td><b>{{metric.name}}</b></td>
                            <td>{{metric.score}}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
            <div class="flex-child">
                {% if filetype == "html" %}
                    {{summary.plot.fig_html}}
                {% elif filetype == "pdf" %}
                    <img src="data:image/png;base64,{{summary.plot.fig_image}}">
                {% endif %}
            </div>
            
        </div>
        {% for plot in plots %}
            <hr>
            <h2 id="{{plot.name}}">{{plot.name}}</h2>
            <p>{{plot.description}}</p>
            {% if filetype == "html" %}
            {{plot.fig_html}}
            {% elif filetype == "pdf" %}
            <img src="data:image/png;base64,{{plot.fig_image}}">
            {% endif %}
        {% endfor %}
    </div>
</body>
</html>
