{% extends "layout.html" %}
{% import "card.html" as card %}
{% import "icons.html" as icons %}
{% block content %}
<div class="container my-4">
<div class="mb-4 space-y-0.5">
<h2 class="text-2xl font-bold tracking-tight">{{ t("account") }}</h2>
<p class="text-muted-foreground">
{% with link_start="<a hx-boost='true' hx-select='#screen' hx-target='#screen' hx-swap='outerHTML' href='/user/{}' class='underline'>" | replace("{}", user.id) %}
{{ t("account-description", link_start=link_start, link_end="</a>") | safe }}
{% endwith %}
</p>
</div>
<div class="grid lg:grid-cols-2 gap-6">
<div class="flex flex-col gap-6">
{% if discord %}
{% call card.root() %}
{% call card.header() %}
{% call card.title() %}
{% with minijinja_lift=lang %}
{% endwith %}
{{ t("account-discord-integration") }}
{% endcall %}
{% call card.description() %}
{% with minijinja_lift=lang %}
{% endwith %}
{{ t("account-discord-integration-description") }}
{% endcall %}
{% endcall %}
{% call card.content() %}
<div class="ml-[18px] mt-1 border-l pl-8">
<h3
class="flex items-center text-xl font-semibold tracking-tight"
>
<div
class="absolute ml-[-50px] inline-flex size-9 items-center justify-center rounded-full border-4 {% if user.discord_id %}
bg-green-300 dark:bg-green-500
{% else %}
bg-border
{% endif %}"
>
{% if user.discord_id %}
{{ icons.check(class="size-4") }}
{% else %}
{{ icons.ellipsis(class="size-4") }}
{% endif %}
</div>
{% if user.discord_id %}
{{ t("account-discord-integration-link-discord") }}
{% else %}
<a class="flex items-center gap-2" href="/signin/discord">
<span
>{{ t("account-discord-integration-link-discord") }}</span
>
{{ icons.external_link(class="size-6") }}
</a>
{% endif %}
</h3>
<p class="mt-2">
{{ t("account-discord-integration-link-discord-description") }}
</p>
<h3
class="mt-8 flex items-center text-xl font-semibold tracking-tight"
>
<div
class="absolute ml-[-50px] inline-flex size-9 items-center justify-center rounded-full border-4 {% if discord.in_server %}
bg-green-300 dark:bg-green-500
{% else %}
bg-border
{% endif %}"
>
{% if discord.in_server %}
{{ icons.check(class="size-4") }}
{% else %}
{{ icons.ellipsis(class="size-4") }}
{% endif %}
</div>
{% if discord.in_server %}
{{ t("account-discord-integration-join-server") }}
{% else %}
<a
class="flex items-center gap-2"
href="{{ discord.invite_url }}"
>
<span
>{{ t("account-discord-integration-join-server") }}</span
>
{{ icons.external_link(class="size-6") }}
</a>
{% endif %}
</h3>
<p class="mt-2">
{{ t("account-discord-integration-join-server-description") }}
</p>
</div>
{% endcall %}
{% endcall %}
{% endif %}
{% call card.root() %}
{% call card.header() %}
{% call card.title() %}
Divisions
{% endcall %}
{% call card.description() %}
Join divisions to make your team eligible for different
leaderboards
{% endcall %}
{% endcall %}
{% call card.content() %}
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<div class="text-muted-foreground">Division Name</div>
<div class="text-muted-foreground">Joined</div>
</div>
{% for division in divisions %}
<div class="flex items-center justify-between">
<div class="flex items-center">
{{ division.name }}
<div title="{{ division.description }}">
{{ icons.info(class="h-4 ml-2") }}
</div>
</div>
<div class="flex items-center">
<input
type="checkbox"
class="size-4 accent-primary"
disabled
{% if not division.eligible %}
title="Ineligible for division. {{ division.requirement }}"
{% else %}
checked
title="In the division"
{% endif %}
/>
</div>
</div>
{% endfor %}
</div>
{% endcall %}
{% endcall %}
{% call card.root() %}
{% call card.header() %}
{% call card.title() %}
Emails
{% endcall %}
{% call card.description() %}
Manage connected emails to qualify for certain divisions
{% endcall %}
{% endcall %}
{% call card.content() %}
{% if emails | length > 0 %}
<ul class="mb-4">
{% for email in emails %}
<li
class="group flex justify-between even:bg-secondary p-2 {% if not email.verified %}italic{% endif %}"
{% if not email.verified %}
title="Pending verification"
{% endif %}
>
<span>{{ email.address }}</span>
{% if emails | length > 1 %}
<button
class="text-destructive hidden group-hover:block"
title="Unlink email from account"
hx-delete="/account/email"
hx-vals='{"email": "{{ email.address }}"}'
>
{{ icons.delete_x() }}
</button>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
<form
class="grow flex justify-end items-center relative"
hx-post="/account/email"
hx-indicator="#loader"
hx-swap="none"
>
<input
type="email"
required
name="email"
placeholder="New email to verify..."
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>
</form>
{% endcall %}
{% endcall %}
{% call card.root() %}
{% call card.header() %}
{% call card.title() %}
Settings
{% endcall %}
{% call card.description() %}
Change settings about your account
{% endcall %}
{% endcall %}
{% call card.content() %}
<h4 class="text-sm">Change name</h4>
<p class="text-sm text-muted-foreground mb-2">
Must be between 3 and 30 characters. May only be changed every 30
minutes.
</p>
<input
type="text"
name="name"
value="{{ user.name }}"
class="bg-background border p-2 rounded-md w-full focus-visible:outline-none"
hx-post="/account/name"
hx-target="next"
/>
<div></div>
{% endcall %}
{% endcall %}
{% include "account-cards.html" %}
</div>
<div>
{% call card.root() %}
{% call card.header() %}
{% call card.title() %}
Solves
{% endcall %}
{% call card.description() %}
Challenges you have solved
{% endcall %}
{% endcall %}
{% call card.content() %}
{% with x=lang %}
{% endwith %}
{% if team.solves | length > 0 %}
<ol class="flex flex-col gap-2">
{% for challenge_id, solve in team.solves | dictsort(by="value", reverse=true) %}
{% if solve.user_id == user.id %}
{% with challenge=challenges[challenge_id], solver=team.users[solve.user_id], category=categories[challenge.category_id] %}
<li class="flex items-center h-8">
<a
hx-select="#screen"
hx-target="#screen"
hx-swap="outerHTML"
href="/challenges#{{ challenge.name }}"
class="font-bold"
>
<span style="color: {{ category.color }}"
>{{ category.name }} /
</span>
{{ challenge.name }}
</a>
<span class="text-muted-foreground">
/ {{ challenge.division_points[0].points }}
points /
<span title="{{ solve.solved_at }}">
{% with diff=timediff(solve.solved_at, now) %}
{{ t("time-difference", years=diff.years, days=diff.days, hours=diff.hours, minutes=diff.minutes, seconds=diff.seconds) }}
{%- endwith -%}
</span>
</span>
</li>
{% endwith %}
{% endif %}
{% endfor %}
</ol>
{% else %}
<p>You have no solves yet.</p>
{% endif %}
{% endcall %}
{% endcall %}
</div>
</div>
</div>
{% endblock %}
