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

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

{% block template %}
<div class="box" data-density="comfortable">
  <form @submit.prevent="submit" x-ref="form" data-api-path="/signup"
    class="flex flex-col gap-6">
    <h1 class="text-xl font-bold md:text-2xl">
      {{ p__('heading', 'Sign up') }}
    </h1>

    <div class="grid gap-6 sm:grid-cols-2">
      <div>
        <label for="first-name">
          {{ p__('label', 'First name') }}
        </label>

        <div class="mt-2">
          <input type="text" id="first-name" name="first_name"
            placeholder="{{ __('Type your first name')|e('html_attr') }}"
            autocomplete="given-name" class="mt-2 input" required>
        </div>
      </div>

      <div>
        <label for="last-name">
          {{ p__('label', 'Last name') }}
        </label>

        <div class="mt-2">
          <input type="text" id="last-name" name="last_name"
            autocomplete="family-name"
            placeholder="{{ __('Type your last name')|e('html_attr') }}"
            class="input">
        </div>
      </div>
    </div>

    <div>
      <label for="email">{{ p__('label', 'Email') }}</label>

      <input type="email" id="email" name="email"
        placeholder="{{ __('Type your email address')|e('html_attr') }}"
        autocomplete="email" class="mt-2 input" required>
    </div>

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

      <div class="relative mt-2" x-data="{isVisible: false}">
        <input :type="isVisible ? 'text' : 'password'" id="password"
          name="password"
          placeholder="{{ __('Type your password')|e('html_attr') }}"
          autocomplete="current-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>
    </div>

    <button type="submit" class="w-full button" x-ref="submit"
      :disabled="!isSubmitable" :processing="isProcessing">

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

      {{ p__('button', 'Sign up') }}
    </button>

    <div class="flex flex-col items-center gap-1 text-sm md:flex-row">
      <span class="flex items-center gap-1">
        <i class="text-base ti ti-help-square-rounded"></i>

        {{ __('Already have an account?') }}
      </span>

      <a href="login" class="font-semibold">
        {{ p__('button', 'Sign in') }}
      </a>
    </div>

    {% include "/snippets/sso.twig" %}
  </form>
</div>
{% endblock %}

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