<!DOCTYPE html>
<html lang="{{ language }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <style>{{ css }}</style>
</head>
<body>

{# ── Named strings for running headers (invisible anchors) ── #}
<span class="doc-brand-anchor">Padelnomics</span>
<span class="doc-title-anchor">{{ report_slug_label }}</span>

{# ── Watermark: Padelnomics logo, repeated on every content page via position:fixed ── #}
<div class="watermark">
  <img src="{{ logo_path }}" alt="">
</div>

{# ══════════════════════════════════════════════════════════════════
   COVER PAGE — full-bleed navy, no running headers
   ════════════════════════════════════════════════════════════════ #}
<div class="cover">

  <div class="cover__header">
    <div class="cover__logo">
      <img src="{{ logo_path }}" alt="Padelnomics">
    </div>
    <div class="cover__edition">{{ edition_label }}</div>
  </div>

  <div class="cover__body">
    <div class="cover__type-label">{{ report_type_label }}</div>
    <div class="cover__rule"></div>
    <h1 class="cover__title">{{ title }}</h1>
    <p class="cover__subtitle">{{ subtitle }}</p>

    <div class="cover__stats">
      {% for stat in cover_stats %}
      <div class="cover__stat">
        <div class="cover__stat-value">{{ stat.value }}</div>
        <div class="cover__stat-label">{{ stat.label }}</div>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="cover__footer">
    <div class="cover__footer-left">
      {{ published_label }}<br>
      <a href="https://padelnomics.io">padelnomics.io</a>
    </div>
    <div class="cover__footer-right">
      {{ confidential_label }}
    </div>
  </div>

</div>

{# ══════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ════════════════════════════════════════════════════════════════ #}
{% if toc %}
<div class="toc-page">
  <h2 class="toc-heading">{{ toc_heading }}</h2>
  <ol class="toc-list">
    {% for item in toc %}
    <li class="toc-item{% if item.is_section %} toc-item--section{% endif %}">
      {% if not item.is_section %}<span class="toc-num">{{ loop.index }}.</span>{% endif %}
      <span class="toc-text">{{ item.title }}</span>
      {% if not item.is_section %}
      <span class="toc-dots"></span>
      {% endif %}
    </li>
    {% endfor %}
  </ol>
</div>
{% endif %}

{# ══════════════════════════════════════════════════════════════════
   REPORT BODY (markdown → HTML, injected by build script)
   ════════════════════════════════════════════════════════════════ #}
<div class="report-body">
  {{ body_html }}
</div>

{# ══════════════════════════════════════════════════════════════════
   DISCLAIMER
   ════════════════════════════════════════════════════════════════ #}
<div class="disclaimer">
  {{ disclaimer }}
</div>

</body>
</html>
