{% extends "layout.html" %}

{% block content %}
  <div class="w-full grow flex flex-col items-center justify-center gap-y-6">
    {% if team_name %}
      <div>
        You are being invited to join
        <span class="font-bold">{{ team_name }}</span>
      </div>
    {% endif %}

    <div class="flex max-w-md flex-col gap-y-2 text-center">
      <h1 class="text-2xl font-semibold tracking-tight">Sign In</h1>
      <p class="text-sm text-muted-foreground">
        Authenticate below to create or join a team.
      </p>
    </div>
    <div class="grid gap-4 sm:w-96">
      {% for option in auth_options %}
        {% if option == "discord" %}
          {% if loop.index > 1 %}
            {{ bar("Or continue with Discord") }}
          {% endif %}
          <a
            href="/signin/discord"
            class="h-10 px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
            >{{ icons.discord(class="mr-2 size-4") }} Discord</a
          >
        {% elif option == "email" %}
          {% if loop.index > 1 %}
            {{ bar("Or continue with Email") }}
          {% endif %}
          <form
            class="flex flex-col gap-2"
            hx-post="/signin/email"
            hx-indicator="#loader"
            hx-swap="none"
          >
            <div class="grow flex justify-end items-center relative">
              <input
                type="email"
                required
                name="email"
                placeholder="name@example.com"
                class="bg-background border p-2 rounded-md w-full focus-visible:outline-none"
              />
              <div id="loader" class="absolute mr-2 pointer-events-none">
                {{ icons.spinner(attrs='class="animate-spin"') }}
              </div>
            </div>
            <button
              type="submit"
              class="h-10 px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
            >
              Send Sign In Email
            </button>
          </form>
        {% elif option == "ctftime" %}
          {% if loop.index > 1 %}
            {{ bar("Or continue with CTFtime") }}
          {% endif %}
          <a
            href="/signin/ctftime"
            class="h-10 px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
            >{{ icons.ctftime(class="h-6 stroke-none") }}</a
          >
        {% elif option == "credentials" %}
          {% if loop.index > 1 %}
            {{ bar("Or continue with credentials") }}
          {% endif %}
          <form
            class="flex flex-col gap-2"
            hx-post="/signin/credentials"
            hx-swap="none"
          >
            <input
              type="text"
              required
              name="username"
              placeholder="username"
              class="bg-background border p-2 rounded-md w-full focus-visible:outline-none"
            />
            <input
              type="password"
              required
              name="password"
              placeholder="password"
              class="bg-background border p-2 rounded-md w-full focus-visible:outline-none"
            />
            <button
              type="submit"
              class="h-10 px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
            >
              Sign In
            </button>
          </form>
        {% endif %}
      {% endfor %}
    </div>
    <p class="px-8 text-center text-sm text-muted-foreground">
      By continuing, you agree to our
      <a href="/terms" target="_blank" class="font-medium underline">Terms</a>.
    </p>
  </div>
{% endblock %}

{% macro bar(text) %}
  <div class="relative">
    <div class="absolute inset-0 flex items-center">
      <span class="w-full border-t"></span>
    </div>
    <div class="relative flex justify-center text-xs uppercase">
      <span class="bg-background px-2 text-muted-foreground"> {{ text }} </span>
    </div>
  </div>
{% endmacro %}