{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
  {% include 'header.html' %}
  <main id="main-content">
    <section>
      <div>
        {% if perms.tools.can_switch_organization %}
          {% include 'organizations/organization_page_tabs.html' with view='organization_members' %}
        {% endif %}
        {% with organization.name as name %}
          <h1>
            {% blocktranslate %}Members of {{ name }}{% endblocktranslate %}
          </h1>
        {% endwith %}
        {% include 'partials/organization_member_list_filters.html' with members=members.status %}
        <div class="horizontal-scroll">
          {% if perms.tools.add_organizationmember %}
            <div class="horizontal-view toolbar">
              <a href="{% url 'organization_member_add' object.pk %}"
                 class="button ghost">{% translate 'Add new member' %}</a>
            </div>
          {% endif %}
          <table>
            <caption>{% translate 'Member overview:' %}</caption>
            <thead>
              <tr>
                <th>{% translate 'Member name' %}</th>
                <th>{% translate 'Status' %}</th>
                <th>{% translate 'Added on' %}</th>
                {% if miauw_api_enabled %}
                  <th>{% translate 'Actions' %}</th>
                {% endif %}
              </tr>
            </thead>
            <tbody>
              {% for member in members %}
                <tr>
                  <td>{{ member.user }}</td>
                  <td>{{ member.status }}</td>
                  <td>{{ member.user.date_joined }}</td>
                  {% if miauw_api_enabled %}
                    <td>
                      <a href="{% url 'organization_member_edit' member.id %}">{% translate 'Edit' %}</a>
                    </td>
                  {% endif %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>
{% endblock content %}

{% block html_at_end_body %}
  {{ block.super }}
  <script src="{% static '/js/checkboxToggler.js' %}" nonce="{{ request.csp_nonce }}"></script>
{% endblock %}
