{% extends "base.html" %}

{% block title %}Dishly — Feed{% endblock %}

{% block content %}
<nav class="nav" aria-label="Categorias">
  {% for cat in categorias %}
  <a href="{{ url_for('index', categoria=cat, q=busca) }}"
     class="{% if categoria_ativa == cat %}active{% endif %}">{{ cat }}</a>
  {% endfor %}
</nav>

<main class="feed">
  {% if receitas %}
    {% for receita in receitas %}
    <article class="card">
      <a class="card__link" href="{{ url_for('receita', id=receita.id) }}">
        <div class="card__img card__img--{{ loop.index0 % 3 }}">
          <span class="card__categoria">{{ receita.categoria or 'Salgados' }}</span>
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <circle cx="8.5" cy="8.5" r="1.5" />
            <polyline points="21 15 16 10 5 21" />
          </svg>
        </div>

        <div class="card__overlay">
          <div class="card__overlay-top">
            <span class="card__tempo">{{ receita.tempo }}</span>
          </div>
          <div class="card__overlay-bottom">
            <a class="btn-editar" href="{{ url_for('editar', id=receita.id) }}" onclick="event.stopPropagation()">Editar</a>
          </div>
        </div>

        <div class="card__info">
          <p class="card__title">{{ receita.nome }}</p>
          <p class="card__meta">{{ receita.porcoes }}</p>
        </div>
      </a>
    </article>
    {% endfor %}
  {% else %}
    <div class="empty-state">
      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" aria-hidden="true">
        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
        <line x1="3" y1="6" x2="21" y2="6"/>
        <path d="M16 10a4 4 0 0 1-8 0"/>
      </svg>
      <h2>Nenhuma receita encontrada</h2>
      <p>
        {% if busca or categoria_ativa != 'Todos' %}
          Tente outra busca ou categoria.
        {% else %}
          Comece cadastrando sua primeira receita!
        {% endif %}
      </p>
      <a class="btn-principal btn-principal--inline" href="{{ url_for('cadastro') }}">Nova receita</a>
    </div>
  {% endif %}
</main>

<a class="fab" href="{{ url_for('cadastro') }}" title="Nova receita" aria-label="Nova receita">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
</a>
{% endblock %}