{% extends 'base.html' %}

{% load i18n %}

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

{% block content %}


<div class="page-header">
  <h1>
    {% blocktrans with name=volunteer.name %}Welcome <b>{{ name }}</b>!{% endblocktrans %}
    <a href="{% url 'volunteer-profile-edit' volunteer_token=volunteer.token %}" class="btn btn-success pull-right">
      <span class="glyphicon glyphicon-pencil"></span>&nbsp;{% trans "Edit your profile" %}
    </a>
  </h1>
</div>


<h2>{% trans "Your information" %}</h2>

<div class="row">
  <div class="col-md-12">
    <dl class="dl-horizontal">
      <dt>{% trans "Email:" %}</dt>
        <dd><a href="mailto:{{ volunteer.email }}">{{ volunteer.email }}</a></dd>
      <dt>{% trans "Phone number:" %}</dt>
        <dd>
          {% if volunteer.phone_number %}
          <a href="tel:{{ volunteer.phone_number }}">{{ volunteer.phone_number }}</a>{% if volunteer.sms_prefered %} (SMS){% endif %}
          {% else %}
          <i>{% trans "not provided" context "phone number" %}</i>
          {% endif %}
        </dd>
      {% if volunteer.notes %}
      <dt>{% trans "Notes:" %}</dt>
        <dd>{{ volunteer.notes|linebreaksbr }}</dd>
      {% endif %}
    </dl>
  </div>
</div>

<h2>{% trans "Activities" %}</h2>

{% for activity in activities %}
{% if forloop.first %}<div class="list-group">{% endif %}
  <div class="list-group-item{% if request.user in activity.participants.all %} list-group-item-info{% endif %}">
    <h4 clas="list-group-item-heading">{{ activity.name }}</h4>
    <p class="list-group-item-text">
      <p>{{ activity.description }}</p>
      <p>
        {% if volunteer not in activity.volunteers.all %}
        <a class="btn btn-primary" href="{% url 'volunteer-join' volunteer_token=volunteer.token activity=activity.slug %}">{% trans "I will be happy to help on that!" %}</a>
        {% else %}
        <a class="btn btn-danger" href="{% url 'volunteer-quit' volunteer_token=volunteer.token activity=activity.slug %}">{% trans "Sorry, I have a setback" %}</a>
        {% endif %}
      </p>
    </p>
  </div>
{% if forloop.last %}</div>{% endif %}
{% endfor %}

{% endblock %}