{% extends "base.html" %}

{% block title %}Members · {{ org.name }} · Intent{% endblock %}

{% block content %}
  <p><a href="{% url 'orgs:detail' org_slug=org.slug %}">{{ org.name }}</a></p>
  <h1>Members</h1>

  {% if access.can_manage_members %}
    {# Row forms live outside the table; controls join them with the form attribute. #}
    {% for m in memberships %}
      <form id="member-{{ m.pk }}" method="post" action="{% url 'orgs:member_update' org_slug=org.slug membership_id=m.pk %}">{% csrf_token %}</form>
      <form id="remove-{{ m.pk }}" method="post" action="{% url 'orgs:member_remove' org_slug=org.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>
        <th scope="col">Can create projects</th>
        {% if access.can_manage_members %}<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_manage_members %}
            <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>
              <input type="checkbox" id="create-{{ m.pk }}" name="can_create_projects" form="member-{{ m.pk }}"{% if m.can_create_projects or m.role == "owner" %} checked{% endif %}{% if m.role == "owner" %} disabled{% endif %}>
              <label for="create-{{ m.pk }}" class="visually-hidden">{{ m.user.username }} can create projects</label>
              {% if m.role == "owner" %}<span class="muted">(owners always can)</span>{% endif %}
            </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>
            <td>{% if m.role == "owner" or m.can_create_projects %}Yes{% else %}No{% endif %}</td>
          {% endif %}
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if access.can_manage_members %}
    <section aria-labelledby="invite-heading">
      <h2 id="invite-heading">Invite someone</h2>
      <form method="post">
        {% csrf_token %}
        {{ invite_form.as_p }}
        <p><button type="submit">Send invitation</button></p>
      </form>
    </section>

    <section aria-labelledby="pending-heading">
      <h2 id="pending-heading">Pending invitations</h2>
      {% if pending_invites %}
        <table>
          <thead>
            <tr>
              <th scope="col">Invited</th>
              <th scope="col">Role</th>
              <th scope="col">Invited by</th>
              <th scope="col">Expires</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for invite in pending_invites %}
              <tr>
                <th scope="row">{{ invite.recipient }}</th>
                <td>{{ invite.get_role_display }}</td>
                <td>{{ invite.invited_by.username|default:"—" }}</td>
                <td>{% if invite.is_open %}<time datetime="{{ invite.expires_at|date:'c' }}">{{ invite.expires_at|date:"j M Y" }}</time>{% else %}Expired{% endif %}</td>
                <td>
                  <form method="post" action="{% url 'orgs:invite_revoke' org_slug=org.slug invite_id=invite.pk %}">
                    {% csrf_token %}
                    <button type="submit">Revoke <span class="visually-hidden">invitation for {{ invite.recipient }}</span></button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p>None.</p>
      {% endif %}
    </section>
  {% endif %}
{% endblock %}