{% extends "base.html" %}
{% block title %}Šta za ručak? — Idriz Admin{% endblock %}
{% block extra_css %}
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; }
  @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
  .panel h2 { margin: 0 0 4px; font-size: 15px; }
  .panel p.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
  textarea { width: 100%; min-height: 220px; padding: 10px 12px; font-size: 14px; line-height: 1.5;
    border: 1px solid var(--line); border-radius: 8px; resize: vertical; font-family: inherit; }
  textarea:focus { outline: none; border-color: var(--accent); }
  button { margin-top: 16px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff;
    background: var(--accent); border: none; border-radius: 8px; cursor: pointer; }
  button:hover { filter: brightness(1.05); }
  table { width: 100%; border-collapse: collapse; background: var(--panel); max-width: 720px;
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 8px; }
  th, td { text-align: left; padding: 9px 14px; font-size: 14px; }
  th { background: #fafbfc; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
  tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
  .empty { color: var(--muted); font-style: italic; }
{% endblock %}
{% block content %}
  <h1>Šta za ručak?</h1>
  <p class="sub">Jela koja porodica jede. Jedna linija = jedno jelo. Idriz nasumično bira sa liste.</p>

  <form method="post">
    <div class="grid">
      <div class="panel">
        <h2>Doručak</h2>
        <p class="hint">Jedno jelo po liniji.</p>
        <textarea name="dorucak" placeholder="Npr.&#10;Jaja&#10;Musli&#10;Palačinke">{{ dorucak }}</textarea>
      </div>
      <div class="panel">
        <h2>Ručak</h2>
        <p class="hint">Jedno jelo po liniji.</p>
        <textarea name="rucak" placeholder="Npr.&#10;Grah&#10;Sarma&#10;Pileći file">{{ rucak }}</textarea>
      </div>
    </div>
    <button type="submit">Sačuvaj</button>
  </form>

  <h2 style="font-size:15px; margin: 26px 0 4px;">Zadnji dani</h2>
  <p class="sub">Šta je Idriz zadnje predložio (pretpostavljeno pojedeno) — ovo izbjegava pri novim prijedlozima.</p>
  {% if istorija %}
  <table>
    <thead><tr><th>Datum</th><th>Doručak</th><th>Ručak</th></tr></thead>
    <tbody>
      {% for r in istorija %}
      <tr><td>{{ r.datum }}</td><td>{{ r.dorucak or "—" }}</td><td>{{ r.rucak or "—" }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">Još nema istorije.</p>
  {% endif %}
{% endblock %}