{% extends 'layouts/app.twig' %}

{% block content %}
  <div class="page-header">
    <a class="back-btn" href="{{ base_url }}/users" aria-label="Back to users">←</a>
    <h1>Create User</h1>
  </div>

  {% if errors is not empty %}<div class="alert alert-danger">Please correct the highlighted fields.</div>{% endif %}

  <form class="quotation-card product-form" method="post" action="{{ base_url }}/users">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
    {% if errors._csrf_token is defined %}<div class="form-error form-error-top">{{ errors._csrf_token }}</div>{% endif %}

    <div class="form-top product-form-grid">
      <section>
        <h2 class="section-title">Account Details</h2>
        <div class="form-grid">
          <div class="field full {{ errors.name is defined ? 'has-error' : '' }}">
            <label>Name</label>
            <input type="text" name="name" value="{{ form.name }}">
            {% if errors.name is defined %}<span class="form-error">{{ errors.name }}</span>{% endif %}
          </div>
          <div class="field full {{ errors.email is defined ? 'has-error' : '' }}">
            <label>Email</label>
            <input type="email" name="email" value="{{ form.email }}">
            {% if errors.email is defined %}<span class="form-error">{{ errors.email }}</span>{% endif %}
          </div>
          <div class="field full {{ errors.role is defined ? 'has-error' : '' }}">
            <label>Role</label>
            <select name="role">
              <option value="staff" {{ form.role == 'staff' ? 'selected' : '' }}>Staff</option>
              <option value="administrator" {{ form.role == 'administrator' ? 'selected' : '' }}>Administrator</option>
            </select>
            {% if errors.role is defined %}<span class="form-error">{{ errors.role }}</span>{% endif %}
          </div>
          <div class="field {{ errors.password is defined ? 'has-error' : '' }}">
            <label>Password</label>
            <input type="password" name="password" autocomplete="new-password">
            {% if errors.password is defined %}<span class="form-error">{{ errors.password }}</span>{% endif %}
          </div>
          <div class="field {{ errors.password_confirmation is defined ? 'has-error' : '' }}">
            <label>Confirm Password</label>
            <input type="password" name="password_confirmation" autocomplete="new-password">
            {% if errors.password_confirmation is defined %}<span class="form-error">{{ errors.password_confirmation }}</span>{% endif %}
          </div>
        </div>
      </section>
    </div>

    <div class="action-bar">
      <a class="btn btn-outline" href="{{ base_url }}/users">Cancel</a>
      <button class="btn btn-primary" type="submit">Create User</button>
    </div>
  </form>
{% endblock %}