{% extends "squad/user_settings/base.html" %}
{% load squad %}
{% block settings %}
<h1>Profile</h1>

<div class='row'>
    <div class='col-md-8'>
        <form action="{% url 'settings-profile' %}" method="POST">
            {% csrf_token %}
            <div class="form-group">
                <label for="{{form.first_name.if_for_label}}">{{form.first_name.label}}</label>
                {{form.first_name|add_class:"form-control"}}
            </div>
            <div class="form-group">
                <label for="{{form.last_name.if_for_label}}">{{form.last_name.label}}</label>
                {{form.last_name|add_class:"form-control"}}
            </div>
            <div class="form-group">
                <label for="{{form.email.if_for_label}}">{{form.first_name.label}}</label>
                {{form.email|add_class:"form-control"}}
            </div>
            <input class='btn btn-default' type="submit" value="Save" />
        </form>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <label>Profile picture</label>
            <div>
                <img src="{% avatar_url form.email.value 200 %}" class='avatar-lg' alt="Your avatar"/>
            </div>
        </div>
            <p>
            This avatar is derived from your email address, and is provided via
            <a href="https://www.libravatar.org/">Libravatar</a> (which falls back to <a href="https://www.gravatar.com/">Gravatar</a>).
            </p>
        </div>
    </div>
</div>

{% endblock %}
