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

{% block title p__('title', 'Password reset')|title %}
{% set xdata = 'auth' %}

{% block template %}
<div class="box" data-density="comfortable">
  <x-form>
    <form @submit.prevent="submit" x-ref="form"
      data-api-path="/recovery/{{ id }}/{{ token }}"
      class="flex flex-col gap-5">
      <div class="flex flex-col gap-2">
        {% include "snippets/back.twig" with {link: 'login', label: p__('button', 'Back to login')} %}

        <h1>
          <span :class="{'hidden':success}">
            {{ p__('heading', 'Reset password') }}
          </span>

          <template x-if="success">
            <span>{{ p__('heading', 'Successfully completed!') }}</span>
          </template>
        </h1>
      </div>

      <template x-if="success">
        <p class="mt-2 text-content-dimmed">
          {{ __('Your password successfully changed. Please login your account to continue.') }}
        </p>
      </template>

      <fieldset :class="{'hidden':success}">
        <label for="new-password">
          {{ p__('label', 'Enter new password') }}
        </label>

        <div class="relative" x-data="{isVisible: false}">
          <input :type="isVisible ? 'text' : 'password'" id="new-password"
            name="password"
            placeholder="{{ __('Type your new password')|e('html_attr') }}"
            autocomplete="new-password" class="input" required>

          <button type="button"
            class="absolute text-2xl -translate-y-1/2 top-1/2 right-3 text-content-dimmed"
            @click="isVisible = !isVisible">
            <i class="block ti"
              :class="{'ti-eye-closed' : isVisible, 'ti-eye':!isVisible}"></i>
          </button>
        </div>
      </fieldset>

      <template x-if="!success">
        <button type="submit" class="w-full button button-accent"
          :processing="isProcessing">

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

          {{ p__('button', 'Reset password') }}
        </button>
      </template>

      <template x-if="success">
        <a href="/login"
          class="w-full button button-accent">{{ __('Login to your account') }}</a>
      </template>
    </form>
  </x-form>
</div>
{% endblock %}

{% block scripts %}
<script src="assets/auth.js"></script>
{% endblock %}