{% extends "members_base.html" %}

{% load static %}
{% load i18n %}
{% block content %}
<link rel="stylesheet" href="{% static "css/jasenlista.css" %}">
<div>
    <a id="filter-collapser" href="#collapse-filters" data-toggle="collapse" class="btn btn-info">
        {% trans "Show filters" %}
    </a>
    <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 class="row content-area">
        <div class="form-inline col-md-12 last-filter">
            <div class="content-area-title form-group">
                <h3 class="inline-title">{% trans "Member register" %}</h3>
                <input type="button" value="{% trans "Download CSV" %}" id="download-csv" class="btn btn-info" ng-click="loadCSV()"/>
            </div>
        </div>
        <table id="choose-address-table" class="table table-striped">
            <thead>
                <tr class="ui-widget-header">
                    <th>{% trans "Last name" %}</th>
                    <th>{% trans "First name" %}</th>
                    <th>{% trans "Email" %}</th>
                    <th>{% trans "AYY member" %}</th>
                    <th>{% trans "JAS recipient" %}</th>
                    <th>{% trans "Residence" %}</th>
                    <th>{% trans "Added" %}</th>
                    <th>{% trans "Paid" %}</th>
                    <th class="table-button-column">{% trans "Member count" %}: {{ member_count }}</th>
                </tr>
            </thead>
            <tbody>
                {% for member in member_list %}
                <tr>
                    <td>{{ member.last_name }}</td>
                    <td>{{ member.first_name }}</td>
                    <td>{{ member.email }}</td>
                    <td>{{ member.AYY }}</td>
                    <td>{{ member.jas }}</td>
                    <td>{{ member.POR }}</td>
                    <td>{{ member.created }}</td>
                    <td>{{ member.paid }}</td>
                    <td class="table-button-column">
                        <input type="button" value="{% trans "Update payment" %}" class="table-button btn btn-success" />
                        <a href="/members/edit/{{ member.id }}">
                            <input type="button" value="{% trans "Edit" %}" class="table-button btn btn-info" value="{% trans "Edit" %}" />
                        </a>
                        <a href="/members/delete_member_confirm/{{ member.id }}">
                            <input type="button" value="{% trans "Delete" %}" class="table-button btn btn-danger" />
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}