{% 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_usuarios') }}" class="link-dark">Usuarios</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-plus 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.usuario.label.text }}</label>
        {{ form.usuario(class="form-control") }}
        {% for error in form.usuario.errors %}
          <div class="text-danger small">{{ error }}</div>
        {% endfor %}
      </div>

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

      <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.name2.label.text }}</label>
        {{ form.name2(class="form-control") }}
        {% for error in form.name2.errors %}
          <div class="text-danger small">{{ error }}</div>
        {% endfor %}
      </div>

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

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

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

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

      <div class="col-md-12">
        <div class="form-check">
          {{ form.active(class="form-check-input") }}
          <label class="form-check-label">{{ form.active.label.text }}</label>
        </div>
        {% for error in form.active.errors %}
          <div class="text-danger small">{{ error }}</div>
        {% endfor %}
      </div>

      {% if tiene_clave %}
      <div class="col-md-6">
        <label class="form-label">{{ form.password.label.text }}</label>
        {{ form.password(class="form-control") }}
        {% for error in form.password.errors %}
          <div class="text-danger small">{{ error }}</div>
        {% endfor %}
      </div>

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

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

{% endblock %}