<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FASTQE</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container py-5">
    <h1 class="text-center">FASTQE</h1>
    <div class="text-left">
      {% for seq in items %}

      ️▶️   <a href="#" class="text-decoration-none"  data-container="body"    data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="Sequences:{{ seq.numseq }} &lt;br&gt;Max length:{{seq.max}}&lt;br&gt;Min length:{{seq.min}}&lt;br&gt;Mean length:{{seq.mean}}&lt;br&gt;Bases: {{seq.bases}}">🏷️</a>{{seq.name}}<br/>


	{% for base in seq.reads%} 
	<a href="#" class="text-decoration-none"  data-container="body"    data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="Pos:{{base.pos}}&lt;br&gt;Max:{{base.max}}&lt;br&gt;Mean:{{base.mean}}&lt;br&gt;Min:{{base.min}}">{{base.mean}}</a> 
      		{% endfor %}
		<br/>
      {% endfor %}
    </div>
  </div>

  <!-- Bootstrap JS Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Tooltip & Popover Init -->
  <script>
    window.addEventListener('load', function () {
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =>
        new bootstrap.Tooltip(tooltipTriggerEl));

      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl =>
        new bootstrap.Popover(popoverTriggerEl));
    });
  </script>
</body>
</html>
