{% extends 'cfp/staff/base.html' %}

{% load bootstrap3 i18n %}

{% block volunteersstafftab %} class="active"{% endblock %}

{% block content %}

<h1>{% trans "Volunteers" %}</h1>

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#filter" aria-expanded="{{ show_filters|yesno:"true,false" }}" aria-controles="filter">{% trans "Show filtering options…" %}</a>

<br /><br />

<div class="collapse{{ show_filters|yesno:" in," }}" id="filter">
    <div class="well">
        <form class="form-horizontal" method="get">
            {% bootstrap_form filter_form %}
            <input type="submit" class="btn btn-success" value="{% trans "Filter" %}">
        </form>
    </div>
</div>

<table class="table table-bordered table-hover">
    <caption>{% trans "Total:" %} {{ volunteer_list|length }} {% trans "volunteer" %}{{ volunteer_list|length|pluralize }}
    </caption>
    <thead>
        <tr>
            <th class="text-center">{% trans "Name" %}</th>
            <th class="text-center">{% trans "Email" %}</th>
            <th class="text-center">{% trans "Phone" %}</th>
            <th class="text-center">{% trans "Activities" %}</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="7">
              <a href="{{ contact_link }}">{% trans "contact by email" %}</a>
              |
              <a href="{{ csv_link }}">{% trans "download as csv" %}</a>
            </td>
        </tr>
    </tfoot>
    {% for volunteer in volunteer_list %}
    {% if forloop.first %}
    <tbody>
    {% endif %}
        <tr>
            <td>
                <a href="{% url 'volunteer-details' volunteer.pk %}">{{ volunteer.name }}</a>
                {% if volunteer.notes %}<span class="glyphicon glyphicon-envelope pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{{ volunteer.notes|linebreaksbr }}"></span>{% endif %}
            </td>
            <td><a href="mailto:{{ volunteer.email }}">{{ volunteer.email }}</a></td>
            <td><a href="tel:{{ volunteer.phone_number }}">{{ volunteer.phone_number }}</a>{% if volunteer.sms_prefered %} (SMS){% endif %}</td>
            <td>
                {% for activity in volunteer.activities.all %}
                <a href="{{ activity.get_filter_url }}"><span class="badge">{{ activity }}</span></a>
                {% endfor %}
            </td>
        </tr>
    {% if forloop.last %}
    </tbody>
    {% endif %}
    {% endfor %}
</table>

{% endblock %}

{% block js_end %}
<script type="text/javascript">
jQuery(document).ready(function($) {
    var anchor = window.location.hash.replace("#", "");
    if (anchor == "filter") {
        $("#filter").collapse('show');
    }
});
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}