{% extends "ereuse_devicehub/base_site.html" %}

{% block page_title %}Your Profile{% endblock %}

{% block main %}

<div class="pagetitle">
  <h1>Profile</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item">Users</li>
      <li class="breadcrumb-item active">Profile</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">
    <div class="col-xl-4">

      <div class="card">
        <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
          <i class="bi bi-person-circle" style="font-size: 76px;"></i>
          <h2>{{ current_user.get_full_name }}</h2>
        </div>
      </div>

    </div>

    <div class="col-xl-8">

      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->
          <ul class="nav nav-tabs nav-tabs-bordered">
            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Change Password</button>
            </li>
          </ul>
          <div class="tab-content pt-2">

            <div class="tab-pane fade show active pt-3" id="profile-change-password">
              <!-- Change Password Form -->
              <form action="{{ url_for('core.set-password') }}" method="post">
              {% for  f in password_form %}
                {% if f == password_form.csrf_token %}
                  {{ f }}
                {% else %}
                <div class="row mb-3">
                  <label class="col-md-4 col-lg-3 col-form-label">{{ f.label }}</label>
                  <div class="col-md-8 col-lg-9">
                    {{ f }}
                    {% if f.errors %}
                    <p class="text-danger">
                      {% for error in f.errors %}
                        {{ error }}<br/>
                      {% endfor %}
                    </p>
                    {% endif %}
                  </div>
                </div>
                {% endif %}
              {% endfor %}
                <div class="text-center">
                  <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
              </form><!-- End Change Password Form -->

            </div>

          </div><!-- End Bordered Tabs -->

        </div>
      </div>

    </div>
  </div>
</section>
{% endblock main %}