{% extends 'base_rigs.html' %}
{% load widget_tweaks %}

{% block title %}Update Profile {{object.name}}{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-6 offset-md-3">
		{% include 'form_errors.html' %}
		<h3>Update Profile {{object.name}}</h3>
        <div class="row">
            <div class="col-md-6">
            <a href="https://gravatar.com/">
	            <img src="{{object.profile_picture}}" class="img-fluid rounded" />
	            <div class="text-center">
		            Images hosted by Gravatar
	            </div>
            </a>
            </div>
            <div class="col-md-6">
	        <form action="{{form.action|default:request.path}}" method="post">{% csrf_token %}
		        <div class="form-group">
			        {% include 'partials/form_field.html' with field=form.first_name %}
		        </div>
                <div class="form-group">
			        {% include 'partials/form_field.html' with field=form.last_name %}
		        </div>
		        <div class="form-group">
			        <label for="{{form.email.id_for_label}}" class="col-form-label">{{form.email.label}}</label>
			        {% render_field form.email type="email" class+="form-control" placeholder=form.email.label %}
		        </div>
                <div class="form-group">
			        {% include 'partials/form_field.html' with field=form.initials %}
		        </div>
		        <div class="form-group">
			        <label for="{{form.phone.id_for_label}}" class="col-form-label">{{form.phone.label}}</label>
		            {% render_field form.phone type="tel" class+="form-control" placeholder=form.phone.label %}
		        </div>
                <div class="form-group">
		             <label for="{{ form.dark_theme.id_for_label }}">Enable Dark Theme?</label>
                     {% render_field form.dark_theme %}
		        </div>
		        <div class="form-group">
                    <input class="btn btn-primary float-right" type="submit"/>
                </div>
          </form>
            </div>
            </div>
        </div>
	</div>
</div>
{% endblock %}
