{% extends "base.html" %}
{% block title %}Export{% endblock %}
{% block content %}
<div class="crumb"><a href="/app/reports">Reports</a> / Export</div>
<div class="hdr"><div><h1>Export centre</h1><p class="sub" style="margin:0">Tick what you need, choose the period and the format. One file, every section you picked.</p></div></div>
<form method="get" action="/app/reports/export" id="exp" class="grid g2" style="align-items:start">
<div class="panel"><h2>Sections</h2>
  <div class="actions" style="margin-bottom:10px"><button type="button" class="btn sm" onclick="document.querySelectorAll('#exp input[name=sec]').forEach(function(c){c.checked=true});sync()">Select all</button><button type="button" class="btn sm ghost" onclick="document.querySelectorAll('#exp input[name=sec]').forEach(function(c){c.checked=false});sync()">Clear</button></div>
  {% for key, title, blurb in sections %}<label class="check" style="align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line)"><input type="checkbox" name="sec" value="{{ key }}" {% if key in picked %}checked{% endif %} onchange="sync()" style="margin-top:4px"><span><b>{{ title }}</b><br><span class="small muted">{{ blurb }}</span></span></label>{% endfor %}
  <input type="hidden" name="sections" id="sections" value="{{ picked|join(',') }}">
</div>
<div>
  <div class="panel" style="margin-bottom:16px"><h2>Period</h2>
    <div class="seg">{% for d, l in [(1,'24 hours'),(7,'7 days'),(30,'30 days'),(90,'90 days'),(365,'1 year')] %}<button type="button" class="{% if days == d %}on{% endif %}" onclick="document.getElementById('days').value={{ d }};document.querySelectorAll('.seg button').forEach(function(b){b.classList.remove('on')});this.classList.add('on')">{{ l }}</button>{% endfor %}</div>
    <input type="hidden" name="days" id="days" value="{{ days }}">
    <div class="help" style="margin-top:8px">Check history and audit rows are limited by your plan's retention; large sections are capped (5,000 checks, 20,000 metric rows, 1,500 rows per PDF table).</div></div>
  <div class="panel"><h2>Format</h2>
    <div class="grid g3" style="gap:10px">
      <button class="typecard" name="format" value="pdf" {% if not plan.api %}disabled title="Paid plans"{% endif %} style="text-align:left"><span class="ic">▤</span><b>PDF</b><span>Print-ready report with a contents page{% if not plan.api %} · paid plans{% endif %}</span></button>
      <button class="typecard" name="format" value="xlsx" {% if not plan.api %}disabled title="Paid plans"{% endif %} style="text-align:left"><span class="ic">▦</span><b>Excel</b><span>One sheet per section, filters and frozen headers{% if not plan.api %} · paid plans{% endif %}</span></button>
      <button class="typecard" name="format" value="csv" style="text-align:left"><span class="ic">≡</span><b>CSV</b><span>Plain data; several sections come as a zip</span></button>
    </div>
    <div class="help" style="margin-top:10px">Exports are recorded in the audit log. Files never include channel tokens, API keys or passwords.</div></div>
</div>
</form>
{% endblock %}
{% block scripts %}<script>function sync(){document.getElementById('sections').value=Array.from(document.querySelectorAll('#exp input[name=sec]:checked')).map(function(c){return c.value}).join(',')}sync();document.getElementById('exp').addEventListener('submit',function(e){if(!document.getElementById('sections').value){e.preventDefault();alert('Pick at least one section.')}});</script>{% endblock %}