{% 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 it is already full.
{% endcall %}
{% endcall %}
{% call card.content() %}
<div class="flex justify-between">
<div>
<h4 class="text-sm">Members</h4>
<p class="mb-2 text-sm text-muted-foreground">
{{ team.name }}'s team members
</p>
</div>
{% with num_members=team.users | length %}
<h4
class="text-sm"
title="{{ t('team-members-limited-hint', count=num_members, limit=max_players) }}"
>
{{ t('team-members-limited', count=num_members, limit=max_players) }}
</h4>
{% endwith %}
</div>
<ul class="flex flex-col gap-2">
{% for player_id, player in team.users | items %}
<li class="flex items-center justify-between group">
<div class="flex items-center gap-2">
<a
hx-boost="true"
href="/user/{{ player_id }}"
class="flex gap-2 items-center"
title="Go to public user profile"
>
<img
class="size-8 rounded-full"
src="{{ player.avatar_url }}"
/>
<span>{{ player.name }}</span>
</a>
<div class="flex gap-2">
{% if player.is_team_owner %}
<div class="text-yellow-300" title="Team owner">
{{ icons.crown() }}
</div>
{% endif %}
</div>
</div>
</li>
{% endfor %}
</ul>
<hr class="my-4" />
<p>A member of the team must leave before you can join.</p>
{% endcall %}
{% endcall %}
</div>
</div>
{% endblock %}