{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% load i18n %}

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

{% block content %}

<div class="page-header">
  <h1>
    {% trans "Become a volunteers!" %}
  </h1>
  {% blocktrans %}We need you! To participate, please enter your name and e-mail.{% endblocktrans %}
</div>

<div class="row">
  <div class="col-md-12">
    {% if not request.user.is_authenticated %}
    <div class="col-md-8 col-md-offset-2 alert alert-info">
      <span class="glyphicon glyphicon-exclamation-sign"></span>
      {% url 'volunteer-mail-token' as mail_token_url %}
      {% blocktrans %}If you already subscribe as a volunteer and want to update your availabilities, please click <a href="{{ mail_token_url }}">here</a>.{% endblocktrans %}
    </div>
    {% endif %}
    <form method="POST" class="form-horizontal col-md-8 col-md-offset-2">
      {% csrf_token %}
      {{ form|crispy }}
      <div class="col-md-12 text-center">
        <button type="submit" class="btn btn-primary text-center">{% trans "Save" %} <i class="fa fa-check"></i></button>
      </div>
    </form>
  </div>
</div>

{% for activity in activities %}
{% if forloop.first %}
<div class="panel panel-default">
<div class="panel-heading">
{% blocktrans %}We are looking for help with the following activities:{% endblocktrans %}
</div>
<ul class="list-group">
{% endif %}
    <li class="list-group-item">
        <b>{{ activity.name }}</b>
        {{ activity.description }}
    </li>
{% if forloop.last %}
</ul>
</div>
{% endif %}
{% endfor %}

{% endblock %}