{% extends "base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{{ t(key="register-title", lang=lang | default(value='sk')) }}{% endblock title %}

{% block content %}
<div class="mx-auto mt-8 max-w-sm">
  <div
    class="rounded-radius border border-outline bg-surface-alt shadow-sm dark:border-outline-dark dark:bg-surface-dark-alt">
    <div
      class="flex items-center justify-between border-b border-outline px-5 py-3 dark:border-outline-dark">
      <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
        {{ t(key="brand", lang=lang | default(value='sk')) }}
      </span>
      {{ ui::badge(label=t(key="auth", lang=lang | default(value='sk')), variant="primary") }}
    </div>

    <div class="p-5">
      <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
        {{ t(key="register-title", lang=lang | default(value='sk')) }}
      </h1>

      {% if error == "exists" %}
      {{ ui::alert_danger(message=t(key="register-error-exists", lang=lang | default(value='sk')), extra="mt-3") }}
      {% elif error == "mismatch" %}
      {{ ui::alert_danger(message=t(key="set-password-mismatch", lang=lang | default(value='sk')), extra="mt-3") }}
      {% elif error == "weak" %}
      {{ ui::alert_danger(message=t(key="set-password-weak", lang=lang | default(value='sk')), extra="mt-3") }}
      {% elif error %}
      {{ ui::alert_danger(message=t(key="register-error-invalid", lang=lang | default(value='sk')), extra="mt-3") }}
      {% endif %}

      <form method="post" action="/register" hx-boost="false" class="mt-4 flex flex-col gap-4"
        x-data="{ password: '', confirm: '' }">
        <div class="flex flex-col gap-1.5">
          <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-type", lang=lang | default(value='sk')) }}</span>
          <div class="grid grid-cols-2 gap-2">
            <label class="flex cursor-pointer items-center gap-2 rounded-radius border border-outline px-3 py-2 text-sm transition has-[:checked]:border-primary dark:border-outline-dark dark:has-[:checked]:border-primary-dark">
              {{ ui::radio(name="account_type", value="personal", checked=true) }}
              <span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-personal", lang=lang | default(value='sk')) }}</span>
            </label>
            <label class="flex cursor-pointer items-center gap-2 rounded-radius border border-outline px-3 py-2 text-sm transition has-[:checked]:border-primary dark:border-outline-dark dark:has-[:checked]:border-primary-dark">
              {{ ui::radio(name="account_type", value="company") }}
              <span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-company", lang=lang | default(value='sk')) }}</span>
            </label>
          </div>
          <span class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="account-type-locked", lang=lang | default(value='sk')) }}</span>
        </div>

        <div class="flex flex-col gap-1">
          <label for="email"
            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
            {{ t(key="login-email", lang=lang | default(value='sk')) }}
          </label>
          {{ ui::input(name="email", id="email", type="email", required=true, autocomplete="email", attrs="autofocus") }}
        </div>

        <div class="flex flex-col gap-1">
          <label for="password"
            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
            {{ t(key="login-password", lang=lang | default(value='sk')) }}
          </label>
          {{ ui::input(name="password", id="password", type="password", required=true, autocomplete="new-password", attrs='x-model="password"') }}
        </div>

        <div class="flex flex-col gap-1">
          <label for="password_confirm"
            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
            {{ t(key="set-password-confirm", lang=lang | default(value='sk')) }}
          </label>
          {{ ui::input(name="password_confirm", id="password_confirm", type="password", required=true, autocomplete="new-password", attrs='x-model="confirm"') }}
          <span x-cloak x-show="confirm.length > 0 && password !== confirm"
            class="text-xs text-danger dark:text-danger">
            {{ t(key="set-password-mismatch", lang=lang | default(value='sk')) }}
          </span>
        </div>

        {{ ui::button(label=t(key="register-submit", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full", attrs=':disabled="password !== confirm"') }}
      </form>

      <div class="mt-5 flex items-center gap-3 text-xs text-on-surface/50 dark:text-on-surface-dark/50">
        <span class="h-px flex-1 bg-outline dark:bg-outline-dark"></span>
        {{ t(key="auth-or", lang=lang | default(value='sk')) }}
        <span class="h-px flex-1 bg-outline dark:bg-outline-dark"></span>
      </div>
      {{ ui::button(label=t(key="auth-google", lang=lang | default(value='sk')), href="/api/oauth2/google", variant="outline-secondary", attrs='hx-boost="false"', extra="mt-4 w-full", icon='<svg class="size-4" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/><path fill="#FF3D00" d="m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/><path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/><path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/></svg>') }}

      <p class="mt-4 text-sm text-on-surface dark:text-on-surface-dark">
        {{ t(key="login-have-account", lang=lang | default(value='sk')) }}
        <a href="/login"
          class="font-medium text-primary underline-offset-2 hover:underline dark:text-primary-dark">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</a>
      </p>
    </div>
  </div>
</div>
{% endblock content %}