{% extends "orchestra/base.html" %}
{% load staticfiles %}
{% load widget_tweaks %}

{% block title %}Account Settings{% endblock %}

{% block main %}
<div class="main-content login-wrap account-settings container-fluid">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
      {% include "accounts/success.html" %}
      {% include "accounts/settings-tabs.html" with account_settings="selected" %}
      <div class="card">
        <form action="{% url 'orchestra:account_settings' %}" method="post">
          {% csrf_token %}

            <div class="row">
              <div class="col-xs-12">
                <div class="fieldWrapper">
                  <label for="{{ user_form.first_name.id_for_label }}">First name</label>
                  {{ user_form.first_name|add_class:"form-control" }}
                  <div class="error-field"> {{ user_form.first_name.errors }} </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-12">
                <div class="fieldWrapper">
                  <label for="{{ user_form.last_name.id_for_label }}">Last name</label>
                  {{ user_form.last_name|add_class:"form-control" }}
                  <div class="error-field"> {{ user_form.last_name.errors }} </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-12">
                <div class="fieldWrapper">
                  <label for="{{ worker_form.slack_username.id_for_label }}">Slack username</label>
                  {{ worker_form.slack_username|add_class:"form-control" }}
                  <div class="error-field"> {{ worker_form.slack_username.errors }} </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-12">
                <div class="fieldWrapper">
                  <label for="{{ worker_form.phone.id_for_label }}">Phone</label>
                  <div>
                    {{ worker_form.phone|add_class:"form-control" }}
                  </div>
                  <div class="error-field"> {{ worker_form.phone.errors }} </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-12">
                <div class="account-actions">
                  <button type="submit" class="btn btn-primary">Update account</button>
                </div>
              </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
