{% extends "base.html" %}

{% block title %}Nova 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('index') }}">&larr; Voltar ao feed</a>

    <form class="form-card" action="{{ url_for('cadastro') }}" method="POST">
      <h1>Nova Receita</h1>
      <p class="form-subtitle">Compartilhe sua receita com a comunidade Dishly.</p>

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

      <div class="form-row">
        <div>
          <label for="porcoes">Porções</label>
          <input id="porcoes" name="porcoes" type="text" placeholder="Ex: 6 porções" value="{{ dados.porcoes }}" required>
        </div>
        <div>
          <label for="tempo">Tempo de preparo</label>
          <input id="tempo" name="tempo" type="text" placeholder="Ex: 45 minutos" 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" placeholder="Breve descrição da receita" required>{{ dados.descricao }}</textarea>

      <label for="ingredientes">Ingredientes</label>
      <textarea id="ingredientes" name="ingredientes" placeholder="Um ingrediente por linha" required>{{ dados.ingredientes }}</textarea>

      <label for="preparo">Modo de preparo</label>
      <textarea id="preparo" name="preparo" placeholder="Descreva o passo a passo" required>{{ dados.preparo }}</textarea>

      <div class="form-actions">
        <button class="btn-secundario" type="reset">Limpar</button>
        <button class="btn-principal" type="submit">Salvar receita</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}