{% extends "tabbed.html" %}

{% block head %}
<title>Sample Comparison - BUSCO Detailed View</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/bootstrapMagic.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript">
    // temporary hack to make it look good with Bootstrap 5
    removeBS3refs();
</script>
<script src="https://cdn.jsdelivr.net/npm//vega@6" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-lite@6" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-embed@6" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/detailed_view.js" type="text/javascript"></script>
{% endblock %}

{% block tabcontent %}

<!-- Sample Selection Box -->
<div class="row mb-2 mt-2">
  <div class="col-lg-12">
    <div class="card mb-2 border-muted">
      <div class="card-body p-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h6 class="card-title text-muted mb-0">Click on the individual samples below to show/hide them:</h6>
          <div>
            <button id="selectAllBtn" class="btn btn-sm btn-outline-secondary me-1">Select all</button>
            <button id="clearAllBtn" class="btn btn-sm btn-outline-secondary">Clear all</button>
          </div>
        </div>
<!--        <p class="card-text text-muted mb-3">Click on samples to toggle them on/off. Selected samples will show detailed plots below.</p>-->
        <div id="sampleSelectionBox" class="sample-selection-container">
          <!-- Sample buttons will be populated by JavaScript -->
        </div>
        <hr class="my-3" style="border-color: #dee2e6;">
        <div class="d-flex flex-wrap align-items-center gap-3 mb-2">
          <div class="d-flex align-items-center">
            <label for="metricSelector" class="form-label mb-0 me-2">Assembly metric:</label>
            <select id="metricSelector" class="form-select form-select-sm" style="width: auto;">
              <option value="contigs_n50">Contig N50</option>
              <option value="scaffolds">Number of scaffolds</option>
            </select>
          </div>
        </div>
        <div class="d-flex flex-wrap align-items-center gap-3">
          <label class="form-label mb-0 me-2">Sort by:</label>
          <div class="d-flex align-items-center gap-1">
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="single" data-source="busco" title="Sort by Single">
              <div class="busco-legend-color" style="background-color: #2d718e; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
              <span class="small">Single</span>
            </button>
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="duplicated" data-source="busco" title="Sort by Duplicated">
              <div class="busco-legend-color" style="background-color: #5499b5; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
              <span class="small">Duplicated</span>
            </button>
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="fragmented" data-source="busco" title="Sort by Fragmented">
              <div class="busco-legend-color" style="background-color: #f2b134; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
              <span class="small">Fragmented</span>
            </button>
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="missing" data-source="busco" title="Sort by Missing">
              <div class="busco-legend-color" style="background-color: #d32f2f; width: 14px; height: 14px; border-radius: 2px; margin-right: 4px;"></div>
              <span class="small">Missing</span>
            </button>
          </div>
          <div class="vr"></div>
          <div class="d-flex align-items-center gap-1">
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="contigs_n50" data-source="assembly" title="Sort by contig N50">
              <span class="small">Contig N50</span>
            </button>
            <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="scaffolds" data-source="assembly" title="Sort by contigs">
              <span class="small">Contig count</span>
            </button>
          </div>
          <div class="vr"></div>
          <div class="d-flex align-items-center">
            <label for="sortOrderSelector" class="form-label mb-0 me-2 small">Order:</label>
            <select id="sortOrderSelector" class="form-select form-select-sm" style="width: auto;">
              <option value="desc">Descending</option>
              <option value="asc">Ascending</option>
            </select>
          </div>
          <div class="vr"></div>
          <button class="btn btn-sm btn-outline-secondary d-flex align-items-center sort-btn" data-sort="default" data-source="default" title="Reset to default order">
            <span class="small">Reset</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Dynamic Plot Cards Container -->
<div id="plotCardsContainer" class="row gx-2">
  <!-- Plot cards will be dynamically generated here -->
</div>

<!-- Vega Specs -->
<script id="vega_busco_detailed_spec" type="application/json">
  {{ vega_busco_detailed_spec | safe }}
</script>

<script id="vega_assembly_detailed_spec" type="application/json">
  {{ vega_assembly_detailed_spec | safe }}
</script>

<!-- Data -->
<script id="detailed_data" type="application/json">
  {{ detailed_data | safe }}
</script>

<script id="assembly_data" type="application/json">
  {{ assembly_data | safe }}
</script>

<script id="sample_ids_json" type="application/json">
  {{ sample_ids_json | safe }}
</script>

<script id="assembly_metrics_json" type="application/json">
  {{ assembly_metrics_json | safe }}
</script>

{% endblock %}

{% block footer %}
{% endblock %}