{% extends "projects/base.html" %}

{% block page_title %}Members{% endblock %}

{% block project_content %}
  <h1>Members</h1>
  <p>Owners of {{ project.org.name }} can also administer this project.</p>

  {% if access.can_admin %}
    {% for m in memberships %}
      <form id="member-{{ m.pk }}" method="post" action="{% url 'projects:member_update' org_slug=project.org.slug project_slug=project.slug membership_id=m.pk %}">{% csrf_token %}</form>
      <form id="remove-{{ m.pk }}" method="post" action="{% url 'projects:member_remove' org_slug=project.org.slug project_slug=project.slug membership_id=m.pk %}">{% csrf_token %}</form>
    {% endfor %}
  {% endif %}

  <table>
    <caption>{{ memberships|length }} member{{ memberships|length|pluralize }}</caption>
    <thead>
      <tr>
        <th scope="col">Member</th>
        <th scope="col">Role</th>
        {% if access.can_admin %}<th scope="col">Actions</th>{% endif %}
      </tr>
    </thead>
    <tbody>
      {% for m in memberships %}
        <tr>
          <th scope="row">{{ m.user.username }}{% if m.user == user %} (you){% endif %}</th>
          {% if access.can_admin %}
            <td>
              <label for="role-{{ m.pk }}" class="visually-hidden">Role for {{ m.user.username }}</label>
              <select id="role-{{ m.pk }}" name="role" form="member-{{ m.pk }}">
                <option value="owner"{% if m.role == "owner" %} selected{% endif %}>Owner</option>
                <option value="collaborator"{% if m.role == "collaborator" %} selected{% endif %}>Collaborator</option>
              </select>
            </td>
            <td>
              <button type="submit" form="member-{{ m.pk }}">Save <span class="visually-hidden">{{ m.user.username }}</span></button>
              <button type="submit" form="remove-{{ m.pk }}">Remove <span class="visually-hidden">{{ m.user.username }}</span></button>
            </td>
          {% else %}
            <td>{{ m.get_role_display }}</td>
          {% endif %}
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if access.can_admin %}
    <section aria-labelledby="add-heading">
      <h2 id="add-heading">Add a team member</h2>
      {% if form.fields.user.queryset.exists %}
        <form method="post">
          {% csrf_token %}
          {{ form }}
          <p><button type="submit">Add to project</button></p>
        </form>
      {% else %}
        <p>Everyone on the {{ project.org.name }} team is already on this project. <a href="{% url 'orgs:members' org_slug=project.org.slug %}">Invite people to the team</a> first.</p>
      {% endif %}
    </section>
  {% elif access.membership %}
    <form method="post" action="{% url 'projects:member_remove' org_slug=project.org.slug project_slug=project.slug membership_id=access.membership.pk %}">
      {% csrf_token %}
      <p><button type="submit">Leave this project</button></p>
    </form>
  {% endif %}
{% endblock %}