{% extends "layout.html" %}
{% import "card.html" as card %}

{% 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">
        User {{ public_user.name }}
      </h2>
      <p class="text-muted-foreground">
        On team
        <a
          hx-boost="true"
          hx-select="#screen"
          hx-target="#screen"
          hx-swap="outerHTML"
          href="/team/{{ public_user.team_id }}"
          class="underline"
          >{{ public_team.name }}</a
        >.
        {% if user.id == public_user.id %}
          This is your profile,
          <a
            hx-boost="true"
            hx-select="#screen"
            hx-target="#screen"
            hx-swap="outerHTML"
            href="/account"
            class="underline"
            >go to your account view</a
          >.
        {% endif %}
      </p>
    </div>
    <div class="grid lg:grid-cols-2 gap-6">
      <div class="flex flex-col grow gap-6">
        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              About
            {% endcall %}
            {% call card.description() %}
              User profile
            {% endcall %}
          {% endcall %}
          {% call card.content() %}
            <img src="{{ public_user.avatar }}" class="size-16 rounded-full" />
          {% endcall %}
        {% endcall %}
      </div>
      <div>
        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              Solves
            {% endcall %}
            {% call card.description() %}
              Challenges this player has solved
            {% endcall %}
          {% endcall %}
          {% call card.content() %}
            {% with x=lang %}
            {% endwith %}
            {% if public_team.solves | length > 0 %}
              <ol class="flex flex-col gap-2">
                {% for challenge_id, solve in public_team.solves | dictsort(by="value", reverse=true) %}
                  {% if solve.user_id == public_user.id %}
                    {% with challenge=challenges[challenge_id], solver=public_team.users[solve.user_id], category=categories[challenge.category_id] %}
                      <li class="flex items-center h-8">
                        <a
                          hx-boost="true"
                          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">
                          &nbsp;/ {{ 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>This player has no solves yet.</p>
            {% endif %}
          {% endcall %}
        {% endcall %}
      </div>
    </div>
  </div>
{% endblock %}