{% extends "profile_base.html" %}

{% set profile_nav_active = "teams" %}
{% 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", "href": "/profile/teams/" ~ team.uuid ~ "/members"},
            {"name": "Add"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
          <h1 class="h3 mb-0">Add member</h1>
        </div>
      </div>
      {% include "partials/flash.html" %}
      <div class="card shadow-sm">
        <div class="card-body">
          <form method="post" action="/profile/teams/{{ team.uuid }}/members/new" data-confirm-modal="confirm-add-owner">
            <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
            <div class="row g-3">
              <div class="col-12 col-md-6">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                  <label class="form-label mb-0" for="member-user-ref">User UUID, username, or email</label>
                  <button class="btn btn-link btn-sm p-0 text-decoration-none" type="button" data-fill-member="{{ current_user.username }}">
                    Add me ({{ current_user.name | display_name(current_user.username) }})
                  </button>
                </div>
                <input
                  class="form-control"
                  id="member-user-ref"
                  name="user_ref"
                  type="text"
                  value="{{ form.user_ref }}"
                  placeholder="UUID, username, or email"
                  required
                >
                <div class="form-text">Enter a user UUID, username, or email address.</div>
              </div>
              <div class="col-12 col-md-6">
                <div class="form-label mb-2">Role</div>
                <div class="form-check">
                  <input
                    class="form-check-input"
                    id="member-role-member"
                    name="role"
                    type="radio"
                    value="member"
                    {% if form.role == "member" %}checked{% endif %}
                    required
                  >
                  <label class="form-check-label" for="member-role-member">Member</label>
                  <div class="form-text">Standard access to team repositories.</div>
                </div>
                <div class="form-check mt-2">
                  <input
                    class="form-check-input"
                    id="member-role-owner"
                    name="role"
                    type="radio"
                    value="owner"
                    {% if form.role == "owner" %}checked{% endif %}
                    required
                  >
                  <label class="form-check-label" for="member-role-owner">Owner</label>
                  <div class="form-text">Full control over team settings and members.</div>
                </div>
              </div>
            </div>
            <div class="mt-3">
              {% with
                primary_label="Add member",
                cancel_href_prefix="/profile/teams/",
                cancel_href_value=team.uuid,
                cancel_href_suffix="/members"
              %}
                {% include "partials/form_actions.html" %}
              {% endwith %}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  {% 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 %}
{% endblock %}

{% block scripts %}
  <script>
    PearingScripts.initAddOwnerConfirm(
      "confirm-add-owner",
      "form[data-confirm-modal='confirm-add-owner']"
    );
  </script>
{% endblock %}