{% import "icons.html" as icons %}
{% import "card.html" as card %}
{% extends "layout.html" %}
{% block content %}
<div class="container my-4 flex justify-center items-center">
<div class="max-w-prose">
{% call card.root() %}
{% call card.header() %}
{% call card.title() %}
Failed to join {{ team.name }}
{{ icons.delete_x(class="text-destructive inline-block h-full align-text-top ml-1") }}
{% endcall %}
{% call card.description() %}
You are unable to join the team because you are not in all of the
team's divisions.
{% endcall %}
{% endcall %}
{% call card.content() %}
<table class="table-auto w-full">
<thead>
<tr>
<th class="text-muted-foreground text-left">Division Name</th>
<th class="text-muted-foreground w-min">You</th>
<th class="text-muted-foreground w-min">Team</th>
</tr>
</thead>
<tbody>
{% for division in divisions %}
<tr
class="*:p-2 {% if division.id not in user_divisions and division.id in team_divisions %}bg-primary/20{% endif %}"
>
<td class="flex items-center w-max">
{{ division.name }}
<div title="{{ division.description }}">
{{ icons.info(class="h-4 ml-2") }}
</div>
</td>
<td class="text-center">
<input
type="checkbox"
class="size-4 accent-primary"
disabled
{% if division.id in user_divisions %}
checked title="In the division"
{% else %}
title="Ineligible for division.
{{ division.requirement }}"
{% endif %}
/>
</td>
<td class="text-center">
<input
type="checkbox"
class="size-4"
disabled
{% if division.id in team_divisions %}
checked title="In the division"
{% else %}
title="Ineligible for division.
{{ division.requirement }}"
{% endif %}
/>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<hr class="my-4" />
<p>
Go to
<a class="underline font-medium" hx-boost="true" href="/account"
>your account</a
>
and join the divisions you are missing.
</p>
<p class="flex items-center mt-3">
<span class="text-primary font-bold">Tip: </span>Hover over the
{{ icons.info(class="h-4 mx-1") }} icon to learn how to join that
division.
</p>
{% endcall %}
{% endcall %}
</div>
</div>
{% endblock %}