{% 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 id="title" class="text-2xl font-bold tracking-tight">
        {{ team.name }}
      </h2>
      <p class="text-muted-foreground">
        Manage and view your team. View
        <a
          hx-boost="true"
          hx-select="#screen"
          hx-target="#screen"
          hx-swap="outerHTML"
          href="/team/{{ team.id }}"
          class="underline"
          >public profile</a
        >.
      </p>
    </div>
    <div class="grid lg:grid-cols-2 gap-6">
      <div class="flex flex-col gap-6">
        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              Members
            {% endcall %}
            {% call card.description() %}
              Invite and view members on your team
            {% endcall %}
          {% endcall %}
          {% call card.content() %}
            {% with x=team_invite_url %}
            {% endwith %}
            <h4 class="text-sm">Invite Link</h4>
            <p class="mb-2 text-sm text-muted-foreground">
              Send this invite link to your team members
            </p>
            <div class="flex mb-4 gap-2">
              {% include "team-token.html" %}
              <button
                class="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"
                onclick="copyInviteTokenToClipboard()"
                title="Copy invite token to clipboard"
              >
                {{ icons.copy() }}
              </button>
              {% if user.is_team_owner %}
                <button
                  hx-post="/team/roll-token"
                  hx-target="#team-token"
                  hx-swap="outerHTML"
                  class="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"
                  title="Roll a new invite token"
                >
                  {{ icons.roll() }}
                </button>
              {% endif %}
              <script>
                function copyInviteTokenToClipboard() {
                  navigator.clipboard
                    .writeText(document.querySelector("#team-token").value)
                    .then(
                      () => {
                        rhombus.toast.success(
                          "Copied invite token to clipboard",
                        );
                      },
                      () => {
                        rhombus.toast.error(
                          "Failed to copy invite token to clipboard",
                        );
                      },
                    );
                }
              </script>
            </div>
            {% with x=team, y=max_players, z=lang %}
            {% endwith %}
            {% include "team-members.html" %}
          {% endcall %}
        {% endcall %}

        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              Standing
            {% endcall %}
            {% call card.description() %}
              Your team's standing in the competition
            {% endcall %}
          {% endcall %}
          {% call card.content() %}
            {% with x=divisions, y=standings %}
            {% endwith %}
            {% include "standing-table.html" %}
          {% endcall %}
        {% endcall %}

        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              Divisions
            {% endcall %}
            {% call card.description() %}
              Join your team to eligible divisions
            {% endcall %}
          {% endcall %}
          {% call card.content() %}
            {% with a=divisions, b=user, c=num_joined_divisions, d=team %}
            {% endwith %}
            {% include "team-divisions.html" %}
          {% endcall %}
        {% endcall %}

        {% if user.is_team_owner %}
          {% call card.root() %}
            {% call card.header() %}
              {% call card.title() %}
                Settings
              {% endcall %}
              {% call card.description() %}
                Change settings about your team (owner only)
              {% 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="{{ team.name }}"
                class="bg-background border p-2 rounded-md w-full focus-visible:outline-none"
                hx-post="/team/name"
                hx-target="next"
              />
              <div></div>
            {% endcall %}
          {% endcall %}
        {% endif %}
      </div>
      <div>
        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              Solves
            {% endcall %}
            {% call card.description() %}
              Challenges your team has 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) %}
                  {% with challenge=challenges[challenge_id], solver=team.users[solve.user_id], category=categories[challenge.category_id] %}
                    <li class="flex items-center justify-between">
                      <div>
                        <a
                          hx-boost="true"
                          hx-select="#screen"
                          hx-target="#screen"
                          hx-swap="outerHTML"
                          href="/challenges#{{ challenge.name }}"
                          class="font-bold"
                          title="Go to challenge"
                        >
                          <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>
                      </div>
                      <a
                        hx-boost="true"
                        hx-select="#screen"
                        hx-target="#screen"
                        hx-swap="outerHTML"
                        href="/user/{{ solve.user_id }}"
                        class="flex items-center gap-2"
                        title="Go to public user profile"
                      >
                        <span>{{ solver.name }}</span>
                        <img
                          class="size-8 rounded-full"
                          src="{{ solver.avatar_url }}"
                        />
                      </a>
                    </li>
                  {% endwith %}
                {% endfor %}
              </ol>
            {% else %}
              <p>Your team has not solved any challenges yet!</p>
            {% endif %}
          {% endcall %}
        {% endcall %}
      </div>
    </div>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      document
        .querySelectorAll('input[type="checkbox"][unchecked]')
        .forEach((el) => {
          el.checked = false;
        });
      document
        .querySelectorAll('input[type="checkbox"][checked]')
        .forEach((el) => {
          el.checked = true;
        });
    });
  </script>
{% endblock %}