{% extends 'base.html' %}
{% block content %}
  <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
    <div class="stats stats-vertical lg:stats-horizontal shadow w-full lg:w-auto">
      <div class="stat place-items-center">
        <div class="stat-title">Počet seznamů</div>
        <div class="stat-value">
          {{ shopping_list|length }}
        </div>
        <div class="stat-desc">
          Vytvořeno celkem
        </div>
      </div>
      <div class="stat place-items-center">
        <div class="stat-title">Počet šablon</div>
        <div class="stat-value">
          {{ template_list|length }}
        </div>
        <div class="stat-desc">
          Vytvořeno celkem
        </div>
      </div>
      <div class="stat place-items-center">
        <div class="stat-title">
          Počet položek
        </div>
        <div class="stat-value">
          {{ total_items }}
        </div>
        <div class="stat-desc">
          Přidáno celkem
        </div>
      </div>
    </div>
    <div class="w-full lg:w-auto">
      <label for="create-list-modal" class="btn btn-primary w-full lg:w-auto">
        Vytvořit nový nákupní seznam
      </label>
    </div>
  </div>

  <!-- Modal pro vytvoření nákupního seznamu -->
  <input type="checkbox" id="create-list-modal" class="modal-toggle" />
  <div class="modal" role="dialog">
    <div class="modal-box">
      <h3 class="font-bold text-lg mb-4">Vytvořit nový nákupní seznam</h3>
      <form method="post" action="{% url 'create_shopping_list' %}" class="space-y-4">
        {% csrf_token %}
        <div class="form-control w-full">
          <label class="label" for="{{ create_form.name.id_for_label }}">
            <span class="label-text font-semibold">{{ create_form.name.label }}</span>
            <span class="label-text-alt text-error">*</span>
          </label>
          {{ create_form.name }}
          {% if create_form.name.errors %}
            <label class="label">
              <span class="label-text-alt text-error">{{ create_form.name.errors }}</span>
            </label>
          {% endif %}
        </div>
        
        <div class="form-control w-full">
          <label class="label" for="{{ create_form.notes.id_for_label }}">
            <span class="label-text font-semibold">{{ create_form.notes.label }}</span>
            <span class="label-text-alt">Volitelné</span>
          </label>
          {{ create_form.notes }}
          {% if create_form.notes.errors %}
            <label class="label">
              <span class="label-text-alt text-error">{{ create_form.notes.errors }}</span>
            </label>
          {% endif %}
        </div>
        
        <div class="modal-action">
          <label for="create-list-modal" class="btn">Zrušit</label>
          <button type="submit" class="btn btn-primary">Vytvořit seznam</button>
        </div>
      </form>
    </div>
    <label class="modal-backdrop" for="create-list-modal">Zavřít</label>
  </div>
  <h2 class="text-2xl font-bold mb-4">Vaše nákupní seznamy</h2>
  <div class="flex justify-center md:justify-start gap-2 flex-wrap">
    {% for shopping_list_item in shopping_list %}
      <div class="card w-full sm:w-96 bg-base-100 card-md shadow-sm">
        <div class="card-body">
          <div class="flex justify-between items-start">
            <div class="flex flex-col gap-1">
              <h2 class="card-title">{{ shopping_list_item.name }}</h2>
              <small>
                Vytvořeno {{ shopping_list_item.created_at|date:"d.m.Y H:i" }}
              </small>
            </div>
            {% if shopping_list_item.pct_done %}
            <div class="radial-progress" style="--value:{{ shopping_list_item.pct_done|floatformat:0 }}; --size:4rem"
                 aria-valuenow="{{ shopping_list_item.pct_done|floatformat:0 }}" role="progressbar">
              {{ shopping_list_item.pct_done|floatformat:0 }}%
            </div>
            {% endif %}
          </div>
          <strong>
            Položek: {{ shopping_list_item.item_count }}
          </strong>
          <p>{{ shopping_list_item.notes }}</p>
          <div class="justify-end card-actions">
            <a href="{% url 'shopping_list_detail' shopping_list_item.id %}" class="btn btn-primary">
              Začít nakupovat
            </a>
          </div>
        </div>
      </div>
    {% empty %}
      <p class="text-sm">Nemáte žádné nákupní seznamy. Vytvořte si svůj první seznam kliknutím na tlačítko "Vytvořit
        nový nákupní seznam" výše.</p>
    {% endfor %}
  </div>
  {% if template_list|length %}
    <div class="divider"></div>
    <h2 class="text-2xl font-bold mb-4">Šablony nákupních seznamů</h2>
    <div class="flex justify-center md:justify-start gap-2 flex-wrap">
      {% for shopping_list_item in template_list %}
        <div class="card w-full sm:w-96 bg-base-100 card-md shadow-sm">
          <div class="card-body">
            <h2 class="card-title">Šablona: {{ shopping_list_item.name }}</h2>
            <small>
              Vytvořeno {{ shopping_list_item.created_at|date:"d.m.Y H:i" }}
            </small>
            <strong>
              Položek: {{ shopping_list_item.item_count }}
            </strong>
            <p>{{ shopping_list_item.notes }}</p>
            <div class="justify-end card-actions">
              <a href="{% url 'shopping_list_detail' shopping_list_item.id %}" class="btn btn-primary">
                Zobrazit šablonu
              </a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}