{% extends 'board_staff.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}
  <title>My Profile</title>
  <meta name="description" content="">

{% endblock title %}

{% block content %}

<div class=" app-content">
	<div class="side-app">
    <br>
    <div class="container content-area">
      <div class="horizontal-content">
    {% include 'partials/_alerts.html' %}
		<!--Page Header-->
    <div class="row">
      <div class="col-xl-4  col-md-12">
        <div class="card box-widget widget-user">
          <br>
          {% if user.photograph %}
          <div class="text-center"><img alt="Profile Picture" class="profile-big" src="{{user.photographURL}}"></div>
          {% else %}
          <div class="text-center"><i class="fa fa-user-circle text-apu-purple fa-8x"></i></div>
          {% endif %}
          <div class="card-body text-center">
            <div class="pro-user">
              <h3 class="pro-user-username text-apu-purple"><strong>{{user.first_name}} {{user.last_name}}</strong></h3>
              <!-- <h6 class="pro-user-desc text-muted">Web Developer</h6> -->
              <div class="badge bg-apu-purple text-white rounded-pill badge-marketing badge-sm"><strong>{{user.role}}</strong></div><br>


            </div>

          </div>
          <div class="card-footer p-0">

          </div>
        </div>

        <div class="row">
          <div class="col-md-1">

          </div>
          <div class="col-md-10 text-center">
            <a href="{% url 'staff_change_password' %}"><strong class="text-apu-green">Click here</strong></a> <span class="text-dark">to change your password</span>
          </div>
          <div class="col-md-1">

          </div>
        </div>

      </div>

      <div class="col-md-12 col-xl-8">
        <div class="card">
          <form method="post" class="form-group col-md-12 text-dark" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="card mt-2">
              <div class="row">
                <div class="form-group col-sm-12 mt-2">
                  <h4 class="text-apu-purple ml-4">Biodata</h4>
                </div>
                <div class="col-md-1">

                </div>
                <div class="col-md-10">
                  <div class="form-row">
                    <div class="form-group col-sm-6 mb-2">
                        {{ form.first_name|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-6 mb-2">
                        {{ form.last_name|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-6 mb-2">
                        {{ form.username|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-6 mb-2">
                        {{ form.dob|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-12 mb-2">
                        {{ form.email|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-6 mb-2">
                        {{ form.gender|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-6 mb-2">
                        {{ form.photograph|as_crispy_field }}
                    </div>

                  </div>
                </div>
                <div class="col-md-1">

                </div>
              </div>
            </div>

            <div class="card mt-2">
              <div class="row">
                <div class="form-group col-sm-12 mt-2">
                  <h4 class="text-apu-purple ml-4">Other Details</h4>
                </div>
                <div class="col-md-1">

                </div>
                <div class="col-md-10">
                  <div class="form-row">
                    <div class="form-group col-sm-12 mb-2">
                      {{ form.phone_number|as_crispy_field }}
                    </div>
                    <div class="form-group col-sm-12 mb-2">
                      {{ form.address|as_crispy_field }}
                    </div>

                  </div>
                </div>
                <div class="col-md-1">

                </div>
              </div>
            </div>
            <div class="text-right bg-white">
              <input type="submit" class="form-group btn btn-cylinder" value="Update">
            </div>
          </form>
        </div>
      </div>
    </div>

	<div class="col-md-12 col-xl-4 col-lg-4">

	</div>
	<div class="col-md-12 col-xl-4 col-lg-4">

	</div>
  </div>
</div>
</div>
</div>
{% endblock content%}