{% extends postorius_base_template %}
{% load i18n %}
{% load bootstrap_tags %}
{% load nav_helpers %}

{% block subtitle %}
{% trans 'List members' %} | {{ list.fqdn_listname}}
{% endblock %}

{% block main %}

    {% list_nav 'list_members' page_title %}

    {% if role != 'subscriber' %}
        <form action="{% url 'list_members' list.list_id role %}" method="post" class="form-inline margin-bottom">
            {% csrf_token %}
            <div class="form-group {% if member_form.email.errors %}has-error{% endif %}">
                {% if member_form.email.errors %}
                    <div class="alert alert-danger">{{ member_form.email.errors }}</div>
                {% endif %}
                {{ member_form.email.label_tag }}
                {{ member_form.email|add_form_control }}
            </div>
          <button type="submit" class="btn btn-default">{{ form_action }}</button>
        </form>
    {% endif %}

    {% if role == 'subscriber' %}
        <div class="row margin-bottom">
            <div class="col-md-6">
                <form action="{% url 'list_members' list.list_id role %}" method="get" class="form-inline">
                    <div class="input-group">
                        <input type="text" name="q" value="{{ query }}" class="form-control" autofocus placeholder="{% trans 'Search members...' %}" />
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="col-md-6 text-right">
                <a href="{% url 'csv_view' list.list_id %}" class="btn btn-default">
                   {% trans 'CSV Export' %}
                </a>
            </div>
        </div>
    {% endif %}

    {% if members|length > 0 %}
        <form action="{% url 'list_members' list.list_id role %}" method="post">
            {% csrf_token %}
            {% if form.choices.errors %}
                <div class="alert alert-danger">{{ form.choices.errors }}</div>
            {% endif %}
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            {% if role == 'subscriber' %}
                                <th><input type="checkbox" id="all-members-checkbox"/></th>
                            {% endif %}
                            <th>{% trans 'Address' %}</th>
                            <th>
                              {% if role == 'subscriber' %}
                                  <input type="submit" class="btn btn-xs btn-warning" value="{% trans 'Remove selected' %}" />
                              {% endif %}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for member in members %}
                            <tr>
                                {% if role == 'subscriber' %}
                                  <td><input type="checkbox" class="member-checkbox" name="choices" id="id_choices_{{ forloop.counter0 }}" value="{{ member.email }}" /></td>
                                    <td><a href="{% url 'list_member_options' list.list_id member.email %}">{{ member.email }}</a></td>
                                    <td><a href="{% url 'list_unsubscribe' list.list_id member.email %}" class="btn btn-xs btn-danger">{% trans 'Unsubscribe' %}</a></td>
                                {% else %}
                                    <td>{{ member }}</td>
                                    <td><a href="{% url 'remove_role' list.list_id role member %}" class="btn btn-xs btn-danger">{% trans 'Delete' %}</a></td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>
        {% if role == 'subscriber' %}
            <div class="margin-bottom">
                <a href="{% url 'unsubscribe_all' list.list_id %}" class="btn btn-danger">{% trans 'Unsubscribe all' %}</a>
            </div>
            {% include 'postorius/lib/pagination.html' with page=members %}
        {% endif %}
    {% else %}
        <p>{{ empty_error }}</p>
    {% endif %}

{% endblock main %}
{% block additionaljs %}
<script>
$('#all-members-checkbox').change(function() {
  $('.member-checkbox').prop('checked', this.checked);
});
</script>
{% endblock %}
