{% extends 'base.html' %}

{% load bootstrap3 i18n avatar_tags %}

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


{% block content %}

<div class="panel panel-default">
  <div class="panel-heading">
    <h3>{% trans "Profile" %}</h3>
  </div>
  <div class="panel-body">
    <form action="" method="post" class="form-horizontal">
      {% csrf_token %}
      <div class="form-group">
        <label class="col-md-3 control-label" for="id_first_name">Avatar</label>
        {% avatar request.user %}
        <a href="{% url 'avatar_change' %}" class="btn btn-default">{% trans "Change avatar" %}</a>
      </div>
      {% bootstrap_form user_form layout="horizontal" %}
      {% bootstrap_form profile_form layout="horizontal" %}
      {% bootstrap_field participation_form.need_transport layout="horizontal" %}
      <div id="transport_fields">
      {% bootstrap_field participation_form.transport layout="horizontal" %}
      {% bootstrap_field participation_form.transport_city_outward layout="horizontal" %}
      {% bootstrap_field participation_form.transport_city_return layout="horizontal" %}
      </div>
      {% bootstrap_form participation_form exclude="need_transport,transport,transport_city_outward,transport_city_return" layout="horizontal" %}
      {% buttons layout="horizontal" %}
      <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
      {% for url, class, text in buttons %}
      <a href="{% url url %}" class="btn btn-{{ class }}">{{ text }}</a>
      {% endfor %}
      <a href="{% if request.META.HTTP_REFERER %}{{ request.META.HTTP_REFERER }}{% else %}{% url 'home' %}{% endif %}" class="btn btn-default">{% trans "Cancel" %}</a>
      {% endbuttons %}
    </form>
  </div>
</div>

{% endblock %}

{% block css %}
{{ block.super }}
{{ form.media.css }}
{% endblock %}

{% block js_end %}
{{ block.super }}
{{ form.media.js }}
<script type="text/javascript">
var update_transport = function() {
    if ($('#id_need_transport').val() == 2) { // 2 == 'Yes'
        $("#transport_fields").show();
    } else {
        $("#transport_fields").hide();
    }
}
$(function(){
    update_transport();
    $('#id_need_transport').change(update_transport);
})
</script>
{% endblock %}