<html> 
  <style>
    body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.page-header {
    background: no-repeat;
    display: flex;
    height: 120px;
    min-width: 120px;
    align-items: center;
    color: black;
    border-bottom: solid gainsboro 1px;
    border-bottom-width: window;
    font-size: large;
    /*text-shadow: #000 0 0 .em*/
}

#title {
    margin-left: 50px;
    padding-left: 50px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.menu {
    /* max-width: window; */
    width :100%;
    height: 70px;
    background-color: none;
    z-index: 150;
    }

#pannels ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: window;
        overflow: hidden;
        position: fixed;
        top: 0;
      }
      
#pannels li {
        float: left;
        position: relative;
        /* width: window; */
        border-right: solid gainsboro 1px;
        z-index: 10 ;
        
    }
      
#pannels li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        z-index: inherit;
      }

#pannels li:last-child { 
    /* border-color: red; */
    border-right: none;
    
 }
      
      /* Change the link color to #111 (black) on hover */
 #pannels li a:hover {
        color: steelblue;
      }

.display {
    /* float: left; */
    position: relative;
    /* background-color: rebeccapurple; */
    width: 100%;
    height: 100%;
    
}

#summary{
    display: block;
}

#pre-process{
    display: none;
}

#multiqc {
    
    width:100%;
    height:100%;
}

#assembly {
    display: none;
}

.dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    /* color: black; */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
      background-color:none;
}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  </style>



  <head>
    <title>GenoSysmics report</title>
    <!-- <link rel="stylesheet" href="templates/template.css"> -->
  </head>
  <header class="page-header">
    <h1 id="title">Genosysmics reports</h1>
  </header>
  <script>
    function displayPannel(element) {
      var pannels = ["summary","pre-process","assembly"];
      var x = document.getElementById(element);
      var i;
      for (i of pannels){
          var tmp = document.getElementById(i);
          if (tmp.style.display !== "none"){
              tmp.style.display = "none";
          }
      }
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>


  <body> 
    <div class=menu>
        <ul id="pannels">
            <li>
                <a href="#" onclick="displayPannel('summary')">Summary</a>
            </li>
            <li class=showcontent >
                <a href="#" onclick="displayPannel('pre-process')">Pre-processing</a>
            </li>
            <div class="dropdown">
            <li><a href="#" onclick="displayPannel('assembly')">Assembly</a>
              <div class="dropdown-content">
                {% for key, value in assembly["figures"].items() %}}
                  <a href="#{{key}}">{{ key }}</a>
                {% endfor %}
              </div>
            </li>    
        </ul>
    </div> 

    <div class=display>
        <!-- <p>display purpose</p> -->
        <div id=summary class=summary>
            <h2> Summary </h2>
            <ul>
              {% for key, value in summary.items() %}
                {% if key  != "configuration" %}              
                  <p>{{ key }} :  {{ value }} </p>
                {% endif %}                
              {% endfor %}
            </dl>
            <!-- <p> project name : {{ summary["project"] }} </p> -->
            <!-- <p> project name : {{ summary["project"] }} </p> -->
            <h3> configurations: </h3>
            <ul>
              {% for key, value in summary["configuration"].items() %}
                <p>{{ key }} :  {{ value }} </p>
              {% endfor %}
            </ul>
                          

        </div>
        <div id=pre-process class=pre-process>
            <h2> Multiqc report </h2>
            <iframe id=multiqc src= "{{ pre_process['multiqcreport'] }}"  frameBorder="0"></iframe>
        </div>
        <div id=assembly class=assembly>
            <h2> Assembly </h2>
            {% for key, value in assembly["figures"].items() %}
            <h3 id="{{ key }}"> {{key}} </h3>  <br>
                  {% if ( (".html" in value) ) %}
                      <iframe id=multiqc src= "{{ value }}" frameBorder="0"></iframe>            
                  {% else %}
                      <img id=multiqc src= "{{ value }}"></img>
                  {% endif %}
            {% endfor %}
            <br>
        </div>



    </div>
  </body> 
</html>