{% extends base|default:"base/base.html" %}
{% block content %}
    {% load dictfilters %}
    {% load listfilters %}
    <div class="card w-full p-6 bg-base-100 shadow-xl mt-2">
        <div class="flex items-center justify-between">
            <div class="flex items-center align-center gap-2">
                {% if team.is_leader %}
                    <button x-on:click="modal_invite_user.showModal();"
                            class="btn btn-primary btn-outline"
                            hx-get="{% url "core:api:base:modal retrieve" modal_name="invite_user_to_team" %}?team={{ team.id }}"
                            hx-trigger="click once"
                            hx-swap="beforeend"
                            hx-target="#modal_container">
                        <i class="fa-solid fa-plus pe-2"></i>
                        Invite User
                    </button>
                    <button x-on:click="modal_team_create_user.showModal();"
                            class="btn btn-primary btn-outline"
                            hx-get="{% url "core:api:base:modal retrieve" modal_name="team_create_user" %}?team={{ team.id }}"
                            hx-trigger="click once"
                            hx-swap="beforeend"
                            hx-target="#modal_container">
                        <i class="fa-solid fa-plus pe-2"></i>
                        Create user
                    </button>
                {% endif %}
            </div>
            <h1 class="text-2xl text-center">Team - {{ team.name }}</h1>
            {% if team.is_leader %}
                <button onclick="modal_leave_team.showModal();"
                        class="btn btn-error {% if is_team_leader %}btn-disabled{% endif %}"
                        hx-get="{% url "core:api:base:modal retrieve" modal_name="leave_team" %}?team={{ team.id }}"
                        hx-trigger="click once"
                        hx-swap="beforeend"
                        hx-target="#modal_container">
                    <i class="fa-solid fa-right-from-bracket pe-2"></i>
                    Leave Team
                </button>
            {% else %}
                <span></span>
            {% endif %}
        </div>
    </div>
    {% if team %}
        <div class="card w-full p-6 bg-base-100 shadow-xl mt-2">
            <table class="w-full table mt-3">
                <thead>
                    <tr>
                        <th>Name</th>
                        {% if team.is_leader %}
                            <th>Permissions</th>
                            <th>Actions</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for user in team.members.all %}
                        <tr>
                            <td>{{ user.username }}</td>
                            {% if team.is_leader %}
                                <td>
                                    {% with user_permissions|dict_get:user as perms %}
                                        {% for perm_group in perms|list_item_prefix_distinct %}
                                            <p data-tip="{{ perms|lookup_separator_perms:perm_group|join:", " }}"
                                               class="hover:underline tooltip">
                                                {{ perm_group }}
                                                {% if not forloop.last %},{% endif %}
                                            </p>
                                        {% endfor %}
                                    {% endwith %}
                                </td>
                                <td>
                                    <div class="flex flex-wrap gap-2">
                                        <div class="tooltip" data-tip="Edit Permissions">
                                            <button class="btn btn-success btn-outline btn-sm"
                                                    x-on:click="modal_edit_team_member_permissions.showModal();"
                                                    class="btn btn-primary"
                                                    hx-get="{% url "core:api:base:modal retrieve" modal_name="edit_team_member_permissions" %}?user={{ user.id }}"
                                                    hx-trigger="click once"
                                                    hx-swap="beforeend"
                                                    hx-target="#modal_container">
                                                <i class="fa-solid fa-hammer"></i>
                                            </button>
                                        </div>
                                        <div class="tooltip" data-tip="Kick User">
                                            <button class="btn btn-error btn-outline btn-sm"
                                                    onclick="team_kick_user_{{ user.id }} .showModal ();">
                                                <i class="fa-solid fa-ban"></i>
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock content %}
