{% extends "base.html" %}

{% block title %}Editar Receita — Dishly{% endblock %}
{% block body_class %}form-page{% endblock %}

{% block header %}{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<div class="form-page__wrap">
  <div class="form-container">
    <a class="form-back" href="{{ url_for('receita', id=receita.id) }}">&larr; Voltar à receita</a>

    <form class="form-card" action="{{ url_for('editar', id=receita.id) }}" method="POST">
      <h1>Editar Receita</h1>
      <p class="form-subtitle">Atualize os detalhes de {{ receita.nome }}.</p>

      <label for="nome">Nome da receita</label>
      <input id="nome" name="nome" type="text" value="{{ dados.nome }}" required>

      <div class="form-row">
        <div>
          <label for="porcoes">Porções</label>
          <input id="porcoes" name="porcoes" type="text" value="{{ dados.porcoes }}" required>
        </div>
        <div>
          <label for="tempo">Tempo de preparo</label>
          <input id="tempo" name="tempo" type="text" value="{{ dados.tempo }}" required>
        </div>
      </div>

      <label for="categoria">Categoria</label>
      <select id="categoria" name="categoria" required>
        {% for cat in categorias %}
        <option value="{{ cat }}" {% if dados.categoria == cat %}selected{% endif %}>{{ cat }}</option>
        {% endfor %}
      </select>

      <label for="descricao">Descrição</label>
      <textarea id="descricao" name="descricao" required>{{ dados.descricao }}</textarea>

      <label for="ingredientes">Ingredientes</label>
      <textarea id="ingredientes" name="ingredientes" required>{{ dados.ingredientes }}</textarea>

      <label for="preparo">Modo de preparo</label>
      <textarea id="preparo" name="preparo" required>{{ dados.preparo }}</textarea>

      <div class="form-actions">
        <button class="btn-principal" type="submit">Salvar alterações</button>
      </div>
    </form>

    <form class="form-delete" action="{{ url_for('excluir', id=receita.id) }}" method="POST"
          onsubmit="return confirm('Tem certeza que deseja excluir esta receita?');">
      <button class="btn-excluir" type="submit">Excluir receita</button>
    </form>
  </div>
</div>
{% endblock %}