{% extends "members_base.html" %}

{% load static %}
{% load i18n %}
{% block content %}
<link rel="stylesheet" href="{% static "css/jasenlista.css" %}">
<div ng-controller="getController">
    <div class="row">
    </div>
    <div class="row content-area">
        <div class="form-inline col-md-12 first-filter">
            <div class="form-group filters">
                <label for="addedBeforeDatePicker"><h4>{% trans "Added" %}</h4></label>
                <md-datepicker class="filter-field" id="addedAfterDatePicker" ng-model="addedAfterDatePicker" md-placeholder="{% trans "Added after" %}"></md-datepicker>
                <md-datepicker class="filter-field" id="addedBeforeDatePicker" ng-model="addedBeforeDatePicker" md-placeholder="{% trans "Added before" %}"></md-datepicker>
            </div>
        </div>
        <div class="form-inline col-md-12">
            <div class="form-group filters">
                <label for="paidBeforeDatePicker"><h4>{% trans "Paid" %}</h4></label>
                <md-datepicker class="filter-field" id="paidAfterDatePicker" ng-model="paidAfterDatePicker" md-placeholder="{% trans "Paid after" %}"></md-datepicker>
                <md-datepicker class="filter-field" id="paidBeforeDatePicker" ng-model="paidBeforeDatePicker" md-placeholder="{% trans "Paid before" %}"></md-datepicker>
            </div>
        </div>
        <div class="form-inline col-md-12 last-filter">
            <div class="form-group filters">
                <input class="filter-field form-control" type="text" id="searchFilter" placeholder="{% trans "Search" %}" ng-keypress="pressKeyOnSearch($event)" ng-model="searchFilter"></input>
                <input type="button" value="{% trans "Filter" %}" class="filter-field btn btn-success" ng-click="doFilter()" />
                <input type="button" value="{% trans "Reset" %}" class="filter-field btn btn-warning" ng-click="clearFilter()" />
            </div>
            <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" %}: {$ members.length $}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in shown_members | orderBy: 'last_name'">
                    <td>{$ x.last_name $}</td>
                    <td>{$ x.first_name $}</td>
                    <td>{$ x.email $}</td>
                    <td>{$ x.AYY $}</td>
                    <td>{$ x.jas $}</td>
                    <td>{$ x.POR $}</td>
                    <td>{$ x.created $}</td>
                    <td>{$ x.paid $}</td>
                    <td class="table-button-column">
                        <input type="button" value="{% trans "Update payment" %}" class="table-button btn btn-success" ng-click="updatePayment(x.id)" />
                        <a href="/members/edit/{$ x.id $}"<input type="button" value="{% trans "Edit" %}" class="table-button btn btn-info">{% trans "Edit" %}</input></a>
                        <input type="button" value="{% trans "Delete" %}" class="table-button btn btn-danger" confirmed-click="deleteMember(x.id)" ng-confirm-click="{% trans "Are you sure?" %}"/>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="row" id="tommy">
            <div class="col-sm-4">
                <a href="/members/tommy">Tommy</a>
            </div>
        </div>
    </div>
</div>
{% endblock content %}