{% extends "base.html" %}
{% load static i18n %}
{% load crispy_forms_tags %}
{% load thumbnail %}

{% block title %}{{ user.username|title }}{% endblock %}

{% block head %}
  <link href="{% static 'css/user_form.css' %}?v=1" rel="stylesheet">
{% endblock head %}

{% block content %}

  <div class="row profile">
    <div class="col-md-4 user-profile">
      <h1>{{ user.username|title }}</h1>
      {% if user.name %}<p class="lead">{{ user.name }}</p>{% endif %}
      {% if user.picture %}
        {% thumbnail user.picture "x250" as im %}
          <img src="{{ im.url }}" alt="Picture Profile" id="pic">
        {% endthumbnail %}
      {% else %}
        <img src="{% static 'img/user.png' %}" alt="No Profile Picture" />
      {% endif %}
    </div>

    <div class="col-md-8">
      <form enctype="multipart/form-data" class="form-horizontal" method="post" action="{% url 'users:update' %}">
        {% csrf_token %}
        {{ form|crispy }}
        <div class="control-group">
          <div class="controls">
            <button type="submit" class="btn btn-dark">{% trans 'Update Profile' %}</button>
          </div>
        </div>
      </form>
    </div>
  </div>

{% endblock %}
