{% extends "base.html" %}
{% block title %}Skompiluj{% endblock %}
{% block nav_compile %}active{% endblock %}

{% block content %}
<p class="sub">Składa w jedno: policzony horoskop, interpretację natalną z AI oraz wszystkie
zapamiętane predykcje okresowe. Dane pobiera z pozostałych zakładek — nie trzeba nic przepisywać.</p>

{# Gotowość materiału — wypełniana po stronie przeglądarki (compile.js), bo część
   kawałków (AI) mieszka w magazynie lokalnym, nie na serwerze. #}
<div id="readiness"></div>

<form method="post" action="/compile">
  <div class="grid">
    <label title="Trafia do nagłówka raportu PDF (PRE-24). Nie jest nigdzie wysyłane poza aplikację ani zapisywane na serwerze.">Imię i nazwisko
      <input type="text" name="person" autocomplete="name" placeholder="np. Jan Kowalski"
             value="{{ form.person or '' }}">
    </label>
  </div>
  <div class="grid">
    <label>Data
      <input type="date" name="date" value="{{ form.date or '' }}" required>
    </label>
    <label>Godzina (lokalna)
      <input type="time" name="time" value="{{ form.time or '' }}" required>
    </label>
    <label title="Przesunięcie czasu lokalnego względem GMT/UTC. Krok 15 minut (0,25 h) — bo część stref ma przesunięcie o pół lub ćwierć godziny, np. Indie +5:30, Nepal +5:45.">Offset względem GMT (h)
      <input type="number" name="tz_offset" step="0.25" min="-12" max="14"
             value="{{ form.tz_offset if form.tz_offset is not none else 0 }}">
    </label>
  </div>
  <div class="grid">
    <label>Szerokość (lat, + N)
      <input type="number" name="lat" step="0.0001" value="{{ form.lat if form.lat is not none else 0 }}">
    </label>
    <label>Długość (lon, + E)
      <input type="number" name="lon" step="0.0001" value="{{ form.lon if form.lon is not none else 0 }}">
    </label>
    <label>System domów
      <select name="house_system">
        {% set hs = form.house_system or 'whole_sign' %}
        <option value="whole_sign" {{ 'selected' if hs == 'whole_sign' else '' }}>Whole Sign</option>
        <option value="equal" {{ 'selected' if hs == 'equal' else '' }}>Equal</option>
        <option value="porphyry" {{ 'selected' if hs == 'porphyry' else '' }}>Porphyry</option>
      </select>
    </label>
    <label>Zodiak
      <select name="zodiac">
        {% set zd = form.zodiac or 'tropical' %}
        <option value="tropical" {{ 'selected' if zd == 'tropical' else '' }}>Tropikalny</option>
        <option value="sidereal_lahiri" {{ 'selected' if zd == 'sidereal_lahiri' else '' }}>Syderyczny (Lahiri)</option>
        <option value="sidereal_fagan_bradley" {{ 'selected' if zd == 'sidereal_fagan_bradley' else '' }}>Syderyczny (Fagan-Bradley)</option>
        <option value="sidereal_krishnamurti" {{ 'selected' if zd == 'sidereal_krishnamurti' else '' }}>Syderyczny (Krishnamurti)</option>
        <option value="draconic" {{ 'selected' if zd == 'draconic' else '' }}>Draconic</option>
      </select>
    </label>
  </div>
  <div class="actions">
    <button type="submit">Złóż podsumowanie</button>
  </div>
</form>

{% if error %}<div class="error">{{ error }}</div>{% endif %}

{% if result %}
  {# ── 1. Nagłówek: kto ──────────────────────────────────────────────── #}
  <div class="report-head">
    <h2 id="reportPerson">{{ form.person or 'Bez podanego imienia' }}</h2>
    <p class="muted small">
      {{ form.date }} {{ form.time }} · offset {{ form.tz_offset }} h względem GMT ·
      {{ '%.4f'|format(form.lat|float) }}, {{ '%.4f'|format(form.lon|float) }}
      {% if moment %}· {{ moment }}{% endif %}
    </p>
  </div>

  {# ── 2. Kosmogram ─────────────────────────────────────────────────── #}
  {% if wheel_svg %}
  <figure class="wheel-fig">
    {{ wheel_svg | safe }}
    <figcaption class="muted small">Kosmogram — kliknij, aby powiększyć.</figcaption>
  </figure>
  {% endif %}

  {# ── 3. Dane policzone ────────────────────────────────────────────── #}
  <div class="meta">Horoskop · silnik {{ result.engine }}
    {% if result.house_system %}· domy {{ result.house_system }}{% endif %}
    {% if result.zodiac %}· zodiak {{ result.zodiac }}{% endif %}</div>
  <table>
    <thead><tr><th>Sym.</th><th>Obiekt</th><th>Znak</th><th>W znaku</th><th>Dom</th><th>Kier.</th></tr></thead>
    <tbody>
      {% for p in result.positions %}
        <tr>
          <td class="glyph">{{ p.glyph or '' }}{% if p.sign_glyph %} {{ p.sign_glyph }}{% endif %}</td>
          <td>{{ p.name }}</td><td>{{ p.sign }}</td><td class="mono">{{ p.in_sign }}</td>
          <td>{{ p.house if p.house is defined else '—' }}</td>
          <td class="{{ 'retro' if p.direction == 'Rx' else '' }}">{{ p.direction }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if result.angles %}
  <table class="angles">
    <thead><tr><th>Oś</th><th>Znak</th><th>W znaku</th></tr></thead>
    <tbody>
      {% for key in ["Asc", "MC", "Dsc", "IC"] %}
        {% set a = result.angles[key] %}
        <tr><td>{{ a.name }}</td><td>{{ a.sign }}</td><td class="mono">{{ a.in_sign }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  {# ── 4. i 5. Części od AI — wstawia przeglądarka z magazynu ───────── #}
  <div id="reportNatal"></div>
  <div id="reportPredictions"></div>
{% endif %}

{# Magazyny wczytujemy dla ich API odczytu. Ich własne UI samo się wyłącza —
   każdy sprawdza, czy jego kontener jest na stronie (tu go nie ma). #}
<script src="/static/natal.js"></script>
<script src="/static/predictions.js"></script>
<script src="/static/compile.js"></script>
{% endblock %}