{% extends "base.html" %}
{% block title %}{{ 'Editar categoria' if mode == 'edit' else 'Nova categoria' }}{% endblock %}
{% block content %}

<div class="page-head">
  <div>
    <h2>{{ 'Editar categoria' if mode == 'edit' else 'Nova categoria' }}</h2>
    <p class="muted">{{ 'Ajuste os campos e salve.' if mode == 'edit' else 'Cadastre uma categoria e a palavra-chave usada para reconhecê-la.' }}</p>
  </div>
  <a href="/categorias" class="btn btn-ghost btn-sm">Voltar</a>
</div>

<section class="card form-card">
  <form method="post" action="{{ '/categorias/' ~ categoria.id ~ '/edit' if mode == 'edit' else '/categorias/new' }}" class="form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label class="field">
      <span>Categoria</span>
      <input type="text" name="categoria" value="{{ categoria.categoria if categoria else '' }}" required placeholder="Ex.: Alimentação">
    </label>
    <label class="field">
      <span>Palavra-chave</span>
      <input type="text" name="palavra_chave" value="{{ categoria.palavra_chave if categoria else '' }}" required placeholder="Ex.: MERCADO">
      <small class="muted">Usada para reconhecer o fornecedor por correspondência (contém, sem diferenciar maiúsculas/minúsculas).</small>
    </label>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">{{ 'Salvar alterações' if mode == 'edit' else 'Criar categoria' }}</button>
      <a href="/categorias" class="btn btn-ghost">Cancelar</a>
    </div>
  </form>
</section>

{% endblock %}