{% extends "/layouts/main.twig" %}

{% block title p__('title', 'Change password')|title %}
{% set xdata = 'account' %}

{% block template %}
<x-form>
  <form class="flex flex-col gap-8" data-path="/password"
    @submit.prevent="submit"
    data-success-msg="{{ __('Password updated successfully!')|e("html_attr") }}"
    x-ref="form">

    <div>
      {% include "snippets/back.twig" with {link: 'app/account', label: p__('button', 'Account')} %}

      <h1>{{ p__('heading', 'Change password') }}</h1>
    </div>

    <section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
      {% if user.has_password %}
      <div>
        <label for="current_password">
          {{ p__('label', 'Current password') }}
        </label>

        <input type="password" id="current_password" name="current_password"
          class="mt-2 input" autocomplete="password" required />
      </div>

      <div>
        <label for="password">{{ p__('label', 'Password') }}</label>

        <input type="password" id="password" name="password" class="mt-2 input"
          autocomplete="new-password" required />
      </div>

      <div>
        <button type="submit" class="w-full button" :processing="isProcessing">

          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Change password') }}
        </button>
      </div>
      {% else %}
      <p>
        {{ __('You account doesn\'t have a password. You can sign out and follow the password reset process to set a password.') }}
      </p>
      {% endif %}
    </section>
  </form>
</x-form>
{% endblock %}