{% extends "base.html" %}
{% block title %}Kalendar — Idriz Admin{% endblock %}
{% block extra_css %}
  table { border-collapse: collapse; width: 100%; background: var(--panel);
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  th, td { padding: 8px 10px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); }
  th { background: #f7f8fa; color: var(--muted); font-weight: 600; font-size: 12.5px; }
  tr:last-child td { border-bottom: none; }
  input[type=text], input[type=date], input[type=time] {
    padding: 7px 8px; font-size: 14px; border: 1px solid var(--line);
    border-radius: 7px; background: #fff; color: var(--ink); width: 100%; }
  input:focus { outline: none; border-color: var(--accent); }
  input.emoji { text-align: center; width: 56px; }
  td.del { text-align: center; width: 42px; }
  button { margin-top: 16px; padding: 10px 22px; font-size: 14px; font-weight: 600; color: #fff;
    background: var(--accent); border: none; border-radius: 8px; cursor: pointer; }
  button:hover { filter: brightness(1.05); }
  .hint { color: var(--muted); font-size: 12.5px; margin: 14px 0 4px; }
{% endblock %}
{% block content %}
  <h1>Kalendar</h1>
  <p class="sub">{{ broj }} događaj(a). Prazni redovi na dnu služe za dodavanje novih.</p>
  <form method="post">
    <input type="hidden" name="nrows" value="{{ nrows }}">
    <table>
      <tr>
        <th style="width:130px">Datum</th>
        <th style="width:90px">Vrijeme</th>
        <th>Naziv</th>
        <th style="width:64px">Emoji</th>
        <th class="del">Obriši</th>
      </tr>
      {% for r in rows %}
      <tr>
        <td>
          {% if r.id %}<input type="hidden" name="r{{ loop.index0 }}_id" value="{{ r.id }}">{% endif %}
          <input type="date" name="r{{ loop.index0 }}_datum" value="{{ r.datum or '' }}">
        </td>
        <td><input type="time" name="r{{ loop.index0 }}_vrijeme" value="{{ r.vrijeme or '' }}"></td>
        <td><input type="text" name="r{{ loop.index0 }}_naziv" value="{{ r.naziv or '' }}" placeholder="npr. Zubar"></td>
        <td><input type="text" class="emoji" name="r{{ loop.index0 }}_emoji" value="{{ r.emoji or '' }}"></td>
        <td class="del">{% if r.id %}<input type="checkbox" name="r{{ loop.index0 }}_del">{% endif %}</td>
      </tr>
      {% endfor %}
    </table>
    <p class="hint">Vrijeme možeš ostaviti prazno (cjelodnevni događaj). Emoji je samo za ljepšu štampu — Idriz ga ne izgovara.</p>
    <button type="submit">Sačuvaj</button>
  </form>
{% endblock %}