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

{% block content %}
  <div class="page-header">
    <a class="back-btn" href="{{ base_url }}/users" aria-label="Back to users">&larr;</a>
    <h1>Reset Password</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/{{ user.id }}/password">
    <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">New Password</h2>
        <div class="detail-list">
          <div>
            <span>Name</span>
            <strong>{{ user.name }}</strong>
          </div>
          <div>
            <span>Email</span>
            <strong>{{ user.email }}</strong>
          </div>
          <div>
            <span>Role</span>
            <strong>{{ user.role_labels ?: 'No role' }}</strong>
          </div>
        </div>

        <div class="form-grid">
          <div class="field {{ errors.password is defined ? 'has-error' : '' }}">
            <label>Password</label>
            <input type="password" name="password" autocomplete="new-password" required>
            {% 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" required>
            {% 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">Reset Password</button>
    </div>
  </form>
{% endblock %}