{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block title %}{% translate "Teams" %} · {{ site_title }}{% endblock %}

{% block content %}



<div class="m-4 flex flex-row items-end">

    <div><!-- top, LHS (h1) -->
        <h1 class="text-4xl mt-4 font-bold">{% translate "Teams" %}</h1>
    </div>

    {# align to bottom #}
    <div class="ml-auto"><!-- top, RHS (buttons) -->
        {% if can_create %}
        <div>
            <a class="block font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-md" href="{% url 'team_new' %}">{% translate "New Team" %}</a>
        </div>
        {% endif %}
    </div> {# top, RHS (buttons) #}
</div>


<div class="m-4"><!-- main content -->

<div class="flex bg-slate-50 dark:bg-slate-800 mt-4 items-end">
    <div class="flex">
    <a href="{% url "team_list_mine" %}"><div class="p-4 font-bold text-xl hover:bg-slate-200 dark:hover:bg-slate-800 {% if ownership_filter == "mine" %}text-cyan-500 dark:text-cyan-400 border-cyan-500 border-b-4 {% else %}text-slate-500 dark:text-slate-300 hover:border-b-4 hover:border-slate-400 dark:hover:border-slate-500{% endif %}">{% translate "My Teams" %}</div></a>
    <a href="{% url "team_list_other" %}"><div class="p-4 font-bold text-xl hover:bg-slate-200 dark:hover:bg-slate-800 {% if ownership_filter == "other" %}text-cyan-500 dark:text-cyan-400 border-cyan-500 border-b-4 {% else %}text-slate-500 dark:text-slate-300 hover:border-b-4 hover:border-slate-400 dark:hover:border-slate-500{% endif %}">{% translate "Other Teams" %}</div></a>
    </div>
    {% comment %}
    <div class="ml-auto p-2">
        <input type="text" name="search" placeholder="search teams..." class="bg-slate-50 dark:bg-slate-800 focus:border-cyan-500 dark:focus:border-cyan-400 focus:ring-3-cyan-200 dark:focus:ring-3-cyan-700 rounded-md"/>
    </div>
    {% endcomment %}
</div>

    <div>

      <form action="." method="post">
      {% csrf_token %}

      <table class="w-full">
      <tbody>
            {% for team in team_list %}
            <tr class="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 border-b-2">
            <td class="w-full p-4">
                <div class="text-xl font-bold text-slate-800 dark:text-slate-100">
                    {{ team.name }}
                </div>
                <div>
                    {{ team.project_count }} {% translate "projects" %}
                    | {{ team.member_count }} {% translate "members" %}
                    {% if team.member %}
                    | <a href="{% url 'team_member_settings' team_pk=team.id user_pk=request.user.id %}" class="font-bold text-cyan-500 dark:text-cyan-400">{% translate "my settings" %}</a>
                    {% endif %}
                </div>
            </td>

            <td class="pr-2 text-center">
                {% if team.member %}
                    {% if not team.member.accepted %}
                    <span class="bg-slate-100 dark:bg-slate-700 rounded-2xl px-4 py-2 ml-2 text-sm">You're&nbsp;invited!</span>
                    {% elif team.member.is_admin %} {# NOTE: we intentionally hide admin-ness for non-accepted users #}
                    <span class="bg-cyan-100 dark:bg-cyan-900 rounded-2xl px-4 py-2 ml-2 text-sm whitespace-nowrap">{% translate "Admin" %}</span>
                    {% endif %}
                {% endif %}
            </td>

            {# strictly: if not app_settings.SINGLE_USER; in practice it won't matter much, because in SINGLE_USER mode you won't end up in a team overview anyway #}
            <td class="pr-2">
                {% if team.member.is_admin or request.user.is_superuser %}
                <div class="rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 p-2 cursor-pointer" onclick="followContainedLink(this);" title="Team members">
                    <a href="{% url 'team_members' team_pk=team.id %}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
    </svg>
                    </a>
                </div>
                {% endif %}
            </td>

            <td class="pr-2">
                {% if team.member.is_admin or request.user.is_superuser %}
                <div class="rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 p-2 cursor-pointer"onclick="followContainedLink(this);" title="Team settings">
                    <a href="{% url "team_edit" team_pk=team.id %}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                        </svg>
                    </a>
                </div>
                {% endif %}
            </td>

            <td class="pr-2"">
                {% if team.member %}
                    {% if not team.member.accepted %}
                        <div>
                            <a href="{% url 'team_members_accept' team_pk=team.id %}" class="font-bold text-cyan-500 dark:text-cyan-400 whitespace-nowrap">{% translate "Invitation" %}</a>
                        </div>
                    {% else %}
                        <div>
                            <button name="action" value="leave:{{ team.id }}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 rounded-md whitespace-nowrap">{% translate "Leave" %}</button>
                        </div>
                    {% endif %}
                {% else %}
                    {% if team.is_joinable or request.user.is_superuser %}
                        <div>
                            <button name="action" value="join:{{ team.id }}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 rounded-md whitespace-nowrap">{% translate "Join" %}</button>
                        </div>
                    {% endif %}
                {% endif %}
            </td>

            </tr>
            {% empty %}
            <tr class="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 border-b-2">
            <td class="w-full p-4">
                {% translate "No teams found." %}
            </td>

            </tr>
            {% endfor %}

        </tbody>
        </table>

        </form>
    </div>


</div>

</div>

{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/team_list.js' %}"></script>
{% endblock %}