{% 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:&nbsp;</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 %}