<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="{{ raccoon_logo }}">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
  <style>
    body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; margin: 20px; background: #f7f9fc; color: #222; }
    h1 { margin-bottom: 0.2rem; }
    .meta { color: #666; margin-bottom: 1rem; }
    .section { margin: 1.5rem 0; }
    .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
    .header-left { display: flex; align-items: center; gap: 12px; }
    .logo { height: 48px; width: auto; }
    .logo-small { height: 48px; width: auto; }
    .card { border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; margin: 10px 0; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
    h1, h2, h3, h4 { font-weight: 600; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #eee; padding: 6px 8px; text-align: left; }
    th { background: #e6e1ee; }
    tbody tr.filtered { background: #f2d6d6 !important; }
    details { border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; margin: 6px 0; background: #fff; }
    summary { cursor: pointer; font-weight: 600; }
    .toc a { text-decoration: none; color: #2f5f6b; }
    .footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; color: #666; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; }
    .metadata-block { margin: 10px 0; }
    .metadata-title { font-weight: 600; margin: 6px 0; }
    .banner { background: #f6f3f9; border: 1px solid #e2dbea; padding: 10px 12px; border-radius: 8px; }
    .caption { color: #666; font-size: 0.9rem; margin-top: 6px; }
    .table-wrap { overflow-x: auto; }
    .table-scroll { max-height: 520px; overflow-y: auto; }
    .plot-reset-button { position: absolute; top: 8px; right: 8px; z-index: 10; background: #ffffff; border: 1px solid #ddd; border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
    .plot-reset-wrap { position: relative; }
    @media print {
      .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate { display: none !important; }
      details summary { list-style: none; }
      details { border: none; padding: 0; }
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <div class="header">
    <div class="header-left">
      {{ raccoon_logo_html | safe }}
      <div>
        <h1>{{ title }}</h1>
        <div class="meta">Generated {{ generated_stamp }}</div>
      </div>
    </div>
    {{ artic_logo_html | safe }}
  </div>
  {% block content %}{% endblock %}
  <div class="footer">
    <div><strong>Raccoon</strong> — Rigorous Alignment Curation: Cleanup Of Outliers and Noise</div>
    <div>Author: Áine O'Toole</div>
  </div>
  <script>
    $(document).ready(function () {
      $('table.datatable').DataTable({
        paging: false,
        info: false,
        autoWidth: false
      });
    });

    (function () {
      if (!window.Plotly) return;
      function resizePlots() {
        var plots = document.querySelectorAll('.js-plotly-plot');
        plots.forEach(function (plot) {
          try {
            window.Plotly.Plots.resize(plot);
          } catch (err) {
            /* noop */
          }
        });
      }
      function attachResetButtons() {
        var plots = document.querySelectorAll('.js-plotly-plot');
        plots.forEach(function (plot) {
          if (plot.dataset.resetAttached) return;
          plot.dataset.resetAttached = 'true';

          var wrap = plot.parentElement;
          if (!wrap) return;
          wrap.classList.add('plot-reset-wrap');

          var button = document.createElement('button');
          button.type = 'button';
          button.className = 'plot-reset-button';
          button.textContent = 'Reset view';

          function cacheDefaults() {
            if (plot.dataset.defaultsCaptured) return;
            var layout = plot.layout || {};
            var xRange = layout.xaxis && layout.xaxis.range ? layout.xaxis.range.slice() : null;
            var yRange = layout.yaxis && layout.yaxis.range ? layout.yaxis.range.slice() : null;
            var height = layout.height || null;
            plot.dataset.xRange = xRange ? JSON.stringify(xRange) : '';
            plot.dataset.yRange = yRange ? JSON.stringify(yRange) : '';
            plot.dataset.height = height ? String(height) : '';
            plot.dataset.defaultsCaptured = 'true';
          }

          cacheDefaults();
          plot.on('plotly_afterplot', cacheDefaults);

          button.addEventListener('click', function () {
            var update = {};
            if (plot.dataset.xRange) {
              var xr = JSON.parse(plot.dataset.xRange);
              update['xaxis.range'] = xr;
            } else {
              update['xaxis.autorange'] = true;
            }
            if (plot.dataset.yRange) {
              var yr = JSON.parse(plot.dataset.yRange);
              update['yaxis.range'] = yr;
              update['yaxis.autorange'] = false;
            } else {
              update['yaxis.autorange'] = true;
            }
            if (plot.dataset.height) {
              update.height = Number(plot.dataset.height);
            }
            window.Plotly.relayout(plot, update);
          });

          wrap.appendChild(button);
        });
      }
      window.addEventListener('resize', resizePlots);
      window.addEventListener('load', attachResetButtons);
    })();
  </script>
</body>
</html>
