{# SPDX-FileCopyrightText: 2025 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "workspace/workspace_settings_base.html" %}
{% load i18n %}
{% load projectify %}
{% load rules %}
{# TODO: conditionally hide invite form #}
{# TODO: add role change drop down #}
{# TODO: add conditional remove button#}
{% block title %}
    {% blocktrans with workspace_title=workspace.title %}{{ workspace_title }} team members - Projectify{% endblocktrans %}
{% endblock title %}
{% block workspace_settings_content %}
    <section class="flex flex-col gap-4">
        {% has_perm "workspace.create_team_member" user workspace as can_create_team_member %}
        {% if can_create_team_member %}
            <form class="flex flex-col gap-4"
                  aria-label="{% translate "Invite team member" %}"
                  method="post"
                  action="{% url "dashboard:workspaces:team-members" workspace.uuid %}"
                  hx-boost>
                {% csrf_token %}
                {{ invite_form.email.as_field_group }}
                {% include "projectify/forms/submit.html" with name="action" value="invite" text=_("Invite team member") %}
            </form>
        {% endif %}
        <h2 id="team-members-table-title" class="text-xl font-bold">{% trans "Team members" %}</h2>
        <table aria-labelledby="team-memberts-table-title"
               class="grid w-full grid-cols-[1fr_auto_auto] items-center gap-y-4">
            <thead class="contents">
                <tr class="contents">
                    <th class="border-b border-border text-left font-bold">{% trans "Team member" %}</th>
                    <th class="border-b border-border text-left font-bold">{% trans "Role" %}</th>
                    <th class="border-b border-border text-left font-bold">{% trans "Action" %}</th>
                </tr>
            </thead>
            <tbody class="contents">
                {% for team_member in workspace.teammember_set.all %}
                    <tr class="contents">
                        <td class="flex flex-row items-center gap-2">
                            {% user_avatar team_member %}
                            <div class="shrink min-w-0 flex flex-col gap-1">
                                <span class="font-bold overflow-hidden truncate">{{ team_member.user }}</span>
                                <span>{{ team_member.job_title|default:_("No job title") }}</span>
                            </div>
                        </td>
                        <td class="flex flex-row items-center justify-between gap-2">
                            <span>{{ team_member.get_role_display }}</span>
                            {% has_perm 'workspace.update_team_member_role' user team_member as can_update_team_member_role %}
                            {% if can_update_team_member_role %}
                                <a href="{% url 'dashboard:workspaces:team-member-update' workspace.uuid team_member.uuid %}"
                                   aria-label="{% trans 'Edit role' %}"
                                   class="size-8 p-1.5 rounded-full border border-transparent hover:bg-secondary-hover active:bg-disabled disabled:bg-transparent disabled:opacity-20">
                                    {% icon "pencil" size=4 %}
                                </a>
                            {% endif %}
                        </td>
                        <td>
                            {% has_perm 'workspace.delete_team_member' user team_member as can_delete_team_member %}
                            {% if can_delete_team_member %}
                                <form hx-post="{% url 'dashboard:workspaces:team-members' workspace.uuid %}"
                                      hx-confirm="{% blocktrans with teamMember=team_member.user %}Would you like to remove '{{ teamMember }}' from this workspace? This action cannot be undone.{% endblocktrans %}"
                                      hx-select="#main"
                                      hx-target="#main"
                                      hw-swap="outerHTML">
                                    {% csrf_token %}
                                    <input type="hidden"
                                           name="{{ remove_form.team_member.html_name }}"
                                           value="{{ team_member.uuid }}">
                                    {% action_button text=_("Remove") icon="x" style="destructive" grow=True name="action" value="team_member_remove" %}
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
    <section class="flex flex-col gap-4">
        <h2 id="team-member-invites-table-title" class="text-xl font-bold">{% trans "Team member invites" %}</h2>
        {% if workspace.active_invites %}
            <table aria-labelledby="team-member-invites-table-title"
                   class="grid w-full grid-cols-[1fr_auto_auto] items-center gap-y-4 gap-x-2">
                <thead class="contents">
                    <tr class="contents">
                        <th class="border-b border-border text-left font-bold">{% trans "Invited email" %}</th>
                        <th class="border-b border-border text-left font-bold">{% trans "Invited on" %}</th>
                        <th class="border-b border-border text-left font-bold">{% trans "Action" %}</th>
                    </tr>
                </thead>
                <tbody class="contents">
                    {% for team_member_invite in workspace.active_invites %}
                        <tr class="contents">
                            <td class="overflow-x-auto">{{ team_member_invite.user_invite.email }}</td>
                            <td>{{ team_member_invite.created|date:"Y-m-d" }}</td>
                            <td>
                                {% has_perm 'workspace.delete_team_member_invite' user workspace as can_delete_team_member_invite %}
                                {% if can_delete_team_member_invite %}
                                    <form hx-post="{% url 'dashboard:workspaces:team-members' workspace.uuid %}"
                                          hx-confirm="{% blocktrans with email=team_member_invite.user_invite.email %}Would you like to uninvite '{{ email }}' from this workspace? This action cannot be undone.{% endblocktrans %}"
                                          hx-select="#main"
                                          hx-target="#main"
                                          hw-swap="outerHTML">
                                        {% csrf_token %}
                                        {{ uninvite_form }}
                                        <input type="hidden"
                                               name="{{ uninvite_form.email.html_name }}"
                                               value="{{ team_member_invite.user_invite.email }}">
                                        {% action_button text=_("Uninvite") icon="x" style="destructive" grow=True name="action" value="uninvite" %}
                                    </form>
                                {% else %}
                                    <span class="sr-only">{% translate "No action available" %}</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p>{% trans "You have no open invites" %}</p>
        {% endif %}
    </section>
    <hr>
    <section class="flex flex-col gap-2">
        <strong>{% trans "Help" %}</strong>
        <ul class="flex list-inside list-disc flex-col gap-2">
            <li>{% anchor href="help:topic:team-members" label=_("About team members") external=True %}</li>
            <li>{% anchor href="help:topic:roles" label=_("About roles") external=True %}</li>
        </ul>
    </section>
{% endblock workspace_settings_content %}