<!DOCTYPE html>


<html>
<head>
  {% load static %}
  {% include "chlamdb/header.html" %}
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.48.1/plotly.min.js"></script>
</head>

<body>
<div class="container-fluid" id="main_container">
  <div class="row">
    <div id="wrapper">
      <div id="page-content-wrapper">
        {% include "chlamdb/comparison_header.html" %}

        {% if envoi_heatmap %}
          <div class="row">
            <div class="col-lg-12">
              <div class="row" style="padding-top:30px ;background-color: rgba(245, 245, 245, 0.986); margin-top: 1em;" >

                <div class="panel panel-success" style="margin:1em;">
                  <div class="panel-heading" style="width:100%">
                    <h5 class="panel-title">Help to interpret the results</h5>
                  </div>
                  <p style="margin: 10px 10px 10px 10px">
                    The heatmap displays the number of times an {{ object_name}} is found in each of the genomes of interest.
                    Zooming into an area of interest you can visualize the presence/absence profile.
                    <br>
                    In white when absent, in <span style="color: rgb(5, 98, 151)"><b>blue</b></span> present in one copy, and in <span style="color: rgb(200, 41, 248)"><b>pink</b></span> present in two or more copies.
                  </p>
                </div>
              </div>


              <table class="sortable table" id="table_pfam" style="width: 90%; margin-left: 1em;"></table>
              {{html_plot|safe}}
            </div>
          </div>
        {% endif %}

      </div>
    </div>
  </div>
</div>

{% include "chlamdb/style_menu.html" %}
</body>
</html>

