{% extends "members_base.html" %}

{% load static %}
{% load i18n %}
{% load django_tables2 %}

{% block content %}
<div>

    <div>
        <h2>{% trans "Member register" %}</h2>
    </div>

    {{ table|safe }}

    <div>
        <a id="download-csv" class="btn btn-info">{% trans "Download CSV" %}</a>
    </div>

    <form action="/members/list" method="POST" id="collapse-filters" class="collapse filter-form">
    <div class="filter-row">
        <div class="filter-group">
            <div class="filter-field">
                <input class="form-control" type="text" id="search-filter" placeholder="{% trans "Search" %}" >
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-field">
                <h5>{% trans "Added after" %}</h5>
                <input type="datetime-local" id="addedAfterDatePicker">
            </div>
            <div class="filter-field">
                <h5>{% trans "Added before" %}</h5>
                <input type="datetime-local" class="filter-field" id="addedBeforeDatePicker">
            </div>
        </div>
        <div class="filter-group">
                <div class="filter-field">
                <h5>{% trans "Paid after" %}</h5>
                <input type="datetime-local" class="filter-field" id="paidAfterDatePicker">
            </div>
            <div class="filter-field">
                <h5>{% trans "Paid before" %}</h5>
                <input type="datetime-local" class="filter-field" id="paidBeforeDatePicker">
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-field">
                <input type="button" value="{% trans "Filter" %}" class="filter-button btn btn-success">
                <input type="button" value="{% trans "Reset" %}" class="filter-button btn btn-warning">
            </div>
        </div>
    </div>
</form>

    <div>
        <a id="filter-collapser" href="#collapse-filters" data-toggle="collapse" class="btn btn-info">
            {% trans "Show filters" %}
        </a>
    </div>
</div>
{% endblock content %}