{% extends "base.html" %}

{% block title %}{{ receita.nome }} — Dishly{% endblock %}
{% block body_class %}detail-page{% endblock %}

{% block search %}{% endblock %}

{% block content %}
<main class="detail">
  <div class="detail__hero">
    <div class="detail__hero-img">
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#bbb" stroke-width="1.2" 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>

  <div class="detail__content">
    <div class="detail__header">
      <span class="detail__badge">{{ receita.categoria or 'Salgados' }}</span>
      <h1>{{ receita.nome }}</h1>
      <p class="detail__desc">{{ receita.descricao }}</p>
      <div class="detail__meta">
        <span>{{ receita.porcoes }}</span>
        <span>{{ receita.tempo }}</span>
      </div>
      <div class="detail__actions">
        <a class="btn-principal btn-principal--inline" href="{{ url_for('editar', id=receita.id) }}">Editar</a>
        <a class="btn-secundario btn-secundario--inline" href="{{ url_for('index') }}">Voltar ao feed</a>
      </div>
    </div>

    <section class="detail__section">
      <h2>Ingredientes</h2>
      <ul class="detail__list">
        {% for linha in receita.ingredientes.splitlines() if linha.strip() %}
        <li>{{ linha.strip() }}</li>
        {% endfor %}
      </ul>
    </section>

    <section class="detail__section">
      <h2>Modo de preparo</h2>
      <ol class="detail__steps">
        {% for passo in receita.preparo.splitlines() if passo.strip() %}
        <li>{{ passo.strip() }}</li>
        {% endfor %}
      </ol>
    </section>
  </div>
</main>
{% endblock %}