{% extends "base.html" %}
{% block contenido %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb lh-sm">
    <li class="breadcrumb-item">
      <a href="{{ url_for('cacao_app.pagina_inicio') }}" class="link-dark">
        <i class="bi bi-house"></i> Inicio
      </a>
    </li>
    <li class="breadcrumb-item">
      <a href="{{ url_for('admin.admin_') }}" class="link-dark">Configuración</a>
    </li>
    <li class="breadcrumb-item">
      <a href="{{ url_for('admin.lista_roles') }}" class="link-dark">Roles</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">{{ titulo }}</li>
  </ol>
</nav>

<div class="ca-page-header">
  <h4><i class="bi bi-person-badge me-2" style="color:#78BF30"></i>{{ titulo }}</h4>
</div>

<div class="ca-card p-4">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'danger' else 'success' }} py-2 small">{{ message }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <form method="post">
    {{ form.hidden_tag() }}

    <div class="row g-3">
      <div class="col-md-6">
        <label class="form-label">{{ form.name.label.text }}</label>
        {{ form.name(class="form-control") }}
        {% for error in form.name.errors %}
          <div class="text-danger small">{{ error }}</div>
        {% endfor %}
      </div>
      <div class="col-md-6">
        <label class="form-label">{{ form.note.label.text }}</label>
        {{ form.note(class="form-control") }}
        {% for error in form.note.errors %}
          <div class="text-danger small">{{ error }}</div>
        {% endfor %}
      </div>
    </div>

    <div class="mt-4">
      <button type="submit" class="btn btn-primary">{{ accion }}</button>
      <a href="{{ url_for('admin.lista_roles') }}" class="btn btn-outline-secondary ms-2">Cancelar</a>
    </div>
  </form>
</div>

{% endblock %}