{% extends "base.html" %}
{% block title %}Nuevo Usuario{% endblock %}
{% block page_title %}➕ Nuevo Usuario{% endblock %}

{% block content %}
<div class="card" style="max-width:600px;">
  <div class="card-header">
    <div class="card-title">Crear Usuario del Sistema</div>
    <a href="{{ url_for('usuarios') }}" class="btn btn-secondary btn-sm">← Volver</a>
  </div>

  <form method="POST" action="{{ url_for('nuevo_usuario') }}">
    <div class="form-group">
      <label>👤 Nombre Completo *</label>
      <input type="text" name="nombre" required placeholder="Ej: Ana Martínez">
    </div>
    <div class="form-group">
      <label>📧 Email *</label>
      <input type="email" name="email" required placeholder="usuario@perfumados.cl">
    </div>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
      <div class="form-group">
        <label>🔐 Contraseña *</label>
        <input type="password" name="password" required minlength="6" placeholder="Mínimo 6 caracteres">
      </div>
      <div class="form-group">
        <label>🎭 Rol *</label>
        <select name="rol" required>
          <option value="empleado">Empleado (solo asistencia)</option>
          <option value="supervisor">Supervisor (ventas + reportes)</option>
          <option value="admin">Admin (acceso total)</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label>🏪 Local asignado</label>
      <select name="local">
        <option value="">Todos los locales</option>
        {% for key, cfg in locales.items() %}
        <option value="{{ key }}">{{ cfg.icono }} {{ cfg.nombre }}</option>
        {% endfor %}
      </select>
      <small class="text-muted">Si no se selecciona, tendrá acceso a todos los locales</small>
    </div>

    <div style="background:var(--bg-tertiary); padding:14px; border-radius:6px; margin-bottom:20px; font-size:13px;">
      <b>Permisos por rol:</b><br>
      <span style="color:#3498db;">Empleado:</span> Dashboard + Asistencia<br>
      <span style="color:#f39c12;">Supervisor:</span> + Ventas + Reportes + Empleados<br>
      <span style="color:var(--accent-red);">Admin:</span> Acceso total + Gestión de usuarios
    </div>

    <div style="display:flex; gap:12px;">
      <button type="submit" class="btn btn-primary">💾 Crear Usuario</button>
      <a href="{{ url_for('usuarios') }}" class="btn btn-secondary">Cancelar</a>
    </div>
  </form>
</div>
{% endblock %}