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

<div class='row'>
    <div class='col-md-8'>
        <form action="{{url('settings-profile')}}" method="POST">
            {{ csrf_input }}
            <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.email.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.gravatar.com/">Gravatar</a>.
            </p>
        </div>
    </div>
</div>

{% endblock %}
