{% extends "base.html" %}

{% block title %}Perfil — Dishly{% endblock %}
{% block body_class %}profile-page{% endblock %}

{% block search %}{% endblock %}

{% block content %}
<main class="profile">
  <div class="profile__header">
    <div class="profile__avatar">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
      </svg>
    </div>
    <div>
      <h1>Meu perfil</h1>
      <p>Suas receitas no Dishly</p>
    </div>
  </div>

  <div class="profile__stats">
    <article class="stat-card">
      <strong>{{ total }}</strong>
      <span>Receitas cadastradas</span>
    </article>
    {% for cat, qtd in por_categoria %}
    <article class="stat-card">
      <strong>{{ qtd }}</strong>
      <span>{{ cat }}</span>
    </article>
    {% endfor %}
  </div>

  <section class="profile__recent">
    <h2>Receitas recentes</h2>
    {% if recentes %}
    <ul class="profile__list">
      {% for receita in recentes %}
      <li>
        <a href="{{ url_for('receita', id=receita.id) }}">
          <span class="profile__list-name">{{ receita.nome }}</span>
          <span class="profile__list-meta">{{ receita.categoria }} · {{ receita.tempo }}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="profile__empty">Você ainda não cadastrou nenhuma receita.</p>
    <a class="btn-principal btn-principal--inline" href="{{ url_for('cadastro') }}">Cadastrar receita</a>
    {% endif %}
  </section>
</main>
{% endblock %}