{% extends "base.html" %}

{% block title %}Shout.dev: Team Members{% endblock %}

{% block main %}
{% include "breadcrumbs.html" %}
<main class="container mt-5">
  <section class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
      <h1>Team Members</h1>
      <div>
        <div class="dropdown">
          <button
            class="btn btn-primary"
            type="button"
            data-bs-toggle="modal"
            data-bs-target="#invite-modal"
          >
            Invite
          </button>
          <div
            class="modal fade"
            id="invite-modal"
            tabindex="-1"
            aria-labelledby="invite-modal-label"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <form
                method="post"
                action="{{ breadcrumbs.join("../invite-team-member") }}"
              >
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="invite-modal-label">
                      Invite to Team
                    </h1>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Cancel"
                    ></button>
                  </div>
                  <div class="modal-body">
                    <div class="mb-3">
                      <label for="invite-modal-email-input" class="form-label">
                        Email address
                      </label>
                      <input
                        type="text"
                        name="email"
                        inputmode="email"
                        class="form-control"
                        id="invite-modal-email-input"
                        aria-describedby="invite-modal-email-help"
                      >
                      <div id="invite-modal-email-help" class="form-text">
                        Invite link will be sent to this email address. The
                        recipient will need to open the link and create an
                        account (if they have not already) in order to join the
                        team.
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                      >
                        Cancel
                      </button>
                      <button type="submit" class="btn btn-primary">Invite</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="mb-3">
    <table class="table">
      <thead>
        <tr>
          <th>Email</th>
          <th>Role</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for invitation in invitations %}
          <tr>
            <td>{{ invitation.invitation.email }}</td>
            <td>Invited</td>
            <td>
              <button
                class="btn btn-sm btn-outline-danger"
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#confirm-remove-invite-modal-{{ invitation.invitation.id }}"
              >
                Remove
              </button>
              <div
                class="modal fade"
                id="confirm-remove-invite-modal-{{ invitation.invitation.id }}"
                tabindex="-1"
                aria-labelledby="confirm-remove-invite-label-{{ invitation.invitation.id }}"
                aria-hidden="true"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1
                        class="modal-title fs-5"
                        id="confirm-remove-invite-label-{{ invitation.invitation.id }}"
                      >
                        Confirm
                      </h1>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Cancel"
                      ></button>
                    </div>
                    <div class="modal-body">
                      Are you sure you want to cancel the invitation to
                      <code>{{ invitation.invitation.email }}</code>
                      from <code>{{ team_name }}</code>?
                    </div>
                    <div class="modal-footer">
                      <form
                        method="post"
                        action="{{ breadcrumbs.join("../remove-team-invitation") }}"
                      >
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <input
                          type="hidden"
                          name="invitation_id"
                          value="{{ invitation.invitation.id }}"
                        >
                        <button
                          type="button"
                          class="btn btn-secondary"
                          data-bs-dismiss="modal"
                        >
                          Cancel
                        </button>
                        <button type="submit" class="btn btn-danger">Remove</button>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        {% endfor %}
        {% for user in team_members %}
          <tr>
            <td>{{ user.email }}</td>
            <td>Owner</td>
            <td>
              {% if team_members.len() > 1 %}
                <button
                  class="btn btn-sm btn-outline-danger"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#confirm-remove-member-modal-{{ user.id }}"
                >
                  {% if user.id == current_user.id %}
                    Leave
                  {% else %}
                    Remove
                  {% endif %}
                </button>
              {% endif %}
              <div
                class="modal fade"
                id="confirm-remove-member-modal-{{ user.id }}"
                tabindex="-1"
                aria-labelledby="confirm-remove-member-label-{{ user.id }}"
                aria-hidden="true"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1
                        class="modal-title fs-5"
                        id="confirm-remove-member-label-{{ user.id }}"
                      >
                        Confirm
                      </h1>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Cancel"
                      ></button>
                    </div>
                    <div class="modal-body">
                      Are you sure you want to remove
                      {% if user.id == current_user.id %}
                        yourself
                      {% else %}
                        <code>{{ user.email }}</code>
                      {% endif %}
                      from <code>{{ team_name }}</code>?
                    </div>
                    <div class="modal-footer">
                      <form
                        method="post"
                        action="{{ breadcrumbs.join("../remove-team-member") }}"
                      >
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <input type="hidden" name="user_id" value="{{ user.id }}">
                        <button
                          type="button"
                          class="btn btn-secondary"
                          data-bs-dismiss="modal"
                        >
                          Cancel
                        </button>
                        <button type="submit" class="btn btn-danger">Remove</button>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
</main>
{% endblock %}