{% extends 'base.html' %}
{% block title %}Moje szablony{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4 gap-2">
  <div><h2 class="mb-1">🧩 Moje szablony</h2><p class="text-secondary mb-0">Każdy użytkownik zarządza własnymi szablonami niezależnie od panelu admina.</p></div>
  {% if current_user.is_admin %}<a href="{{ url_for('admin_templates') }}" class="btn btn-outline-secondary">Panel admina</a>{% endif %}
</div>
<div class="row g-4">
  <div class="col-lg-5">
    <div class="card bg-dark text-white mb-4"><div class="card-body">
      <h5 class="mb-3">➕ Nowy szablon ręcznie</h5>
      <form method="post" data-unsaved-warning="true" class="stack-form">
        <input type="hidden" name="action" value="create_manual">
        <div class="mb-3"><label class="form-label">Nazwa</label><input type="text" name="name" class="form-control" required></div>
        <div class="mb-3"><label class="form-label">Opis</label><textarea name="description" class="form-control" rows="2"></textarea></div>
        <div class="mb-3"><label class="form-label">Produkty</label><textarea name="items_text" class="form-control" rows="8" placeholder="Mleko x2
Chleb
Jajka x10"></textarea><div class="form-text">Każda linia to osobny produkt. Ilość opcjonalnie przez xN.</div></div>
        <button class="btn btn-success w-100" type="submit">Utwórz szablon</button>
      </form>
    </div></div>
    <div class="card bg-dark text-white"><div class="card-body">
      <h5 class="mb-3">📋 Utwórz z istniejącej listy</h5>
      <form method="post" action="{{ url_for('create_template_from_user_list', list_id=0) }}" onsubmit="this.action=this.action.replace('/0','/' + this.querySelector('[name=source_list_id]').value);">
        <div class="mb-3"><label class="form-label">Lista źródłowa</label><select name="source_list_id" class="form-select" required>{% for l in source_lists %}<option value="{{ l.id }}">#{{ l.id }} — {{ l.title }}</option>{% endfor %}</select></div>
        <div class="mb-3"><label class="form-label">Nazwa szablonu</label><input type="text" name="template_name" class="form-control"></div>
        <div class="mb-3"><label class="form-label">Opis</label><textarea name="description" class="form-control" rows="2"></textarea></div>
        <button class="btn btn-outline-success w-100" type="submit">Zapisz z listy</button>
      </form>
    </div></div>
  </div>
  <div class="col-lg-7">
    <div class="card bg-dark text-white"><div class="card-body">
      <div class="admin-page-head mb-3"><h5 class="mb-0">Aktywne szablony</h5><span class="badge rounded-pill bg-secondary">{{ templates|length }} szt.</span></div>
      <div class="table-responsive">
        <table class="table table-dark align-middle" data-searchable="true">
          <thead><tr><th>Nazwa</th><th>Opis</th><th>Produkty</th><th>Akcje</th></tr></thead>
          <tbody>
            {% for template in templates %}
            <tr>
              <td><div class="fw-semibold">{{ template.name }}</div><div class="small text-secondary">{{ template.created_at.strftime('%Y-%m-%d %H:%M') if template.created_at else '' }}</div></td>
              <td>{{ template.description or '—' }}</td>
              <td>{{ template.items|length }}</td>
              <td><div class="d-flex flex-wrap gap-2">
                <form method="post" action="{{ url_for('instantiate_template', template_id=template.id) }}" class="d-inline"><button class="btn btn-sm btn-outline-success" type="submit">➕ Utwórz listę</button></form>
                <form method="post" onsubmit="return confirm('Usunąć szablon?')" class="d-inline"><input type="hidden" name="action" value="delete"><input type="hidden" name="template_id" value="{{ template.id }}"><button class="btn btn-sm btn-outline-danger" type="submit">🗑 Usuń</button></form>
              </div></td>
            </tr>
            {% else %}
            <tr><td colspan="4" class="text-center text-secondary py-4">Brak własnych szablonów.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div></div>
  </div>
</div>
{% endblock %}