{% extends "profile_base.html" %}

{% set profile_nav_active = "teams" %}
{% set profile_team_subnav_active = "members" %}
{% block profile_content %}
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
            {"name": "Teams", "href": "/profile/teams"},
            {"name": team.name, "href": "/profile/teams/" ~ team.uuid},
            {"name": "Members"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
        </div>
      </div>
      <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
          <a
            class="nav-link{% if profile_team_subnav_active == "overview" %} active{% endif %}"
            href="/profile/teams/{{ team.uuid }}"
          >Details</a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link{% if profile_team_subnav_active == "members" %} active{% endif %}"
            href="/profile/teams/{{ team.uuid }}/members"
          >Members</a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link{% if profile_team_subnav_active == "repos" %} active{% endif %}"
            href="/profile/teams/{{ team.uuid }}/repos"
          >Repos</a>
        </li>
      </ul>
      {% if member_notice %}
        <div class="alert alert-success">{{ member_notice }}</div>
      {% endif %}
      {% if member_error %}
        <div class="alert alert-danger">{{ member_error }}</div>
      {% endif %}
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div class="text-uppercase text-muted small fw-semibold">Team members</div>
            {% if can_manage_members %}
              <a class="btn btn-primary" href="/profile/teams/{{ team.uuid }}/members/new">Add member</a>
            {% endif %}
          </div>
          <form class="row g-2 align-items-end mb-3" method="get" action="/profile/teams/{{ team.uuid }}/members" id="profile-team-members-filters">
            <div class="col-12 col-lg-4">
              <label class="form-label" for="profile-team-member-search">Search</label>
              <input
                class="form-control"
                id="profile-team-member-search"
                name="search"
                type="text"
                value="{{ query.search | default('', true) }}"
                placeholder="Name, username, email, or UUID"
              >
            </div>
            <div class="col-12 col-md-4 col-lg-2">
              <label class="form-label" for="profile-team-member-role">Role</label>
              <select class="form-select" id="profile-team-member-role" name="role">
                <option value="" {% if query.role is none or query.role == "" %}selected{% endif %}>Any</option>
                <option value="owner" {% if query.role == "owner" %}selected{% endif %}>Owner</option>
                <option value="member" {% if query.role == "member" %}selected{% endif %}>Member</option>
              </select>
            </div>
            <div class="col-12 col-md-4 col-lg-2">
              <label class="form-label" for="profile-team-member-status">Status</label>
              <select class="form-select" id="profile-team-member-status" name="status">
                <option value="" {% if query.status is none or query.status == "" %}selected{% endif %}>Any</option>
                <option value="true" {% if query.status == "true" %}selected{% endif %}>Active</option>
                <option value="false" {% if query.status == "false" %}selected{% endif %}>Inactive</option>
              </select>
            </div>
            {% with search_reset_url="/profile/teams/" ~ team.uuid ~ "/members", search_actions_col_class="col-12 col-md-4 col-lg-4" %}
              {% include "partials/search_actions.html" %}
            {% endwith %}
          </form>
          {% if members_page.results | length == 0 %}
            <p class="text-muted mb-0">No members yet.</p>
          {% else %}
            <div class="table-responsive">
              <table class="table table-hover align-middle table-sm mb-0">
                <thead class="table-light">
                  <tr class="text-uppercase small text-muted">
                    <th>User</th>
                    <th>Role</th>
                    <th>Status</th>
                    {% set order_value = query.order | default('-joined', true) %}
                    {% if order_value == "joined" %}
                      {% set next_order = "-joined" %}
                    {% else %}
                      {% set next_order = "joined" %}
                    {% endif %}
                    <th>
                      <a
                        class="link-secondary text-decoration-none"
                        href="{{ query_url('/profile/teams/' ~ team.uuid ~ '/members', {
                          'search': query.search | default('', true),
                          'role': query.role | default('', true),
                          'status': query.status | default('', true),
                          'order': next_order,
                          'per_page': query.per_page | default('', true)
                        }) }}"
                      >
                        Joined
                        {% if order_value == "joined" %}
                          ↑
                        {% elif order_value == "-joined" %}
                          ↓
                        {% endif %}
                      </a>
                    </th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {% for member in members_page.results %}
                    <tr>
                      <td>
                        <div class="fw-semibold">
                          {% if current_user.is_staff %}
                            <a class="link-body-emphasis text-decoration-none" href="/staff/users/{{ member.user_uuid }}">
                              {{ member.user_name | display_name(member.user_username) }}
                            </a>
                          {% else %}
                            {{ member.user_name | display_name(member.user_username) }}
                          {% endif %}
                        </div>
                        <div class="text-muted small font-monospace">
                          {% with user_link_href = "/" ~ member.user_username, user_link_username = member.user_username, user_link_label = member.user_username, user_link_class = "" %}
                            {% include "partials/hover_card_user_link.html" %}
                          {% endwith %}
                        </div>
                      </td>
                      <td>
                        <form
                          method="post"
                          action="/profile/teams/{{ team.uuid }}/members/{{ member.user_uuid }}"
                          class="d-inline"
                          data-confirm-modal="confirm-owner-role"
                          data-confirm-name="{{ member.user_name | display_name(member.user_username) }}"
                        >
                          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                          <label class="visually-hidden" for="member-{{ member.user_uuid }}-role">Role</label>
                          <select
                            class="form-select form-select-sm w-auto"
                            id="member-{{ member.user_uuid }}-role"
                            name="role"
                            {% if not can_manage_members %}disabled{% endif %}
                            required
                          >
                            <option value="member" {% if member.role == "member" %}selected{% endif %}>Member</option>
                            <option value="owner" {% if member.role == "owner" %}selected{% endif %}>Owner</option>
                          </select>
                        </form>
                      </td>
                      <td>
                        {% if member.user_is_active %}
                          <span class="badge text-bg-success">Active</span>
                        {% else %}
                          <span class="badge text-bg-danger">Inactive</span>
                        {% endif %}
                      </td>
                      <td title="{{ member.created_at }}">{{ member.created_at | humantime }}</td>
                      <td class="text-end">
                        <form
                          method="post"
                          action="/profile/teams/{{ team.uuid }}/members/{{ member.user_uuid }}/remove"
                          data-confirm-modal="confirm-remove-member"
                          data-confirm-name="{{ member.user_name | display_name(member.user_username) }}"
                          data-member-role="{{ member.role }}"
                        >
                          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                          <button class="btn btn-sm btn-outline-danger" type="submit" {% if not can_manage_members %}disabled{% endif %}>
                            Remove
                          </button>
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
        {% with page=members_page, query=query, per_page_id="profile-team-members-per-page", per_page_form="profile-team-members-filters" %}
          {% include "partials/paging_footer.html" %}
        {% endwith %}
      </div>
    </div>
  </div>
  {% with
    modal_id="confirm-remove-member",
    modal_title="Remove member",
    modal_body='Remove <span class="fw-semibold" data-confirm-name></span> from this team?',
    modal_confirm_text="Remove member",
    modal_desc=""
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
  {% with
    modal_id="confirm-owner-role",
    modal_title="Promote to owner",
    modal_body='Make <span class="fw-semibold" data-confirm-name></span> an owner?',
    modal_confirm_text="Make owner",
    modal_desc="This user will have full control of the team.",
    modal_manual_submit=true
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
  {% with
    modal_id="confirm-add-owner",
    modal_title="Add owner",
    modal_body="Add this member as an owner?",
    modal_confirm_text="Add owner",
    modal_desc="Owners can manage team settings and members.",
    modal_manual_submit=true
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
  {% with
    modal_id="confirm-no-owners",
    modal_title="No owners remaining",
    modal_body="This action would leave the team without an owner. Nobody can manage this team, its members, or repos unless they are staff.",
    modal_confirm_text="Continue",
    modal_desc="",
    modal_manual_submit=true
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
{% endblock %}

{% block scripts %}
  <script>
    PearingScripts.initOwnerRoleConfirm(
      "confirm-owner-role",
      "form[data-confirm-modal='confirm-owner-role']"
    );
    PearingScripts.initNoOwnersRoleChange(
      "confirm-no-owners",
      "form[data-confirm-modal='confirm-owner-role']",
      {{ team.owner_count }}
    );
  </script>
  <script>
    PearingScripts.initAddOwnerConfirm(
      "confirm-add-owner",
      "form[data-confirm-modal='confirm-add-owner']"
    );
  </script>
  <script>
    PearingScripts.initNoOwnersRemoveConfirm(
      "confirm-no-owners",
      "form[data-confirm-modal='confirm-remove-member']",
      {{ team.owner_count }}
    );
  </script>
  <script>
    PearingScripts.initAutoSubmitFilters("profile-team-members-filters", {
      includeFormAttribute: true
    });
  </script>
{% endblock %}