{% extends 'hod_template/base_template.html' %}

{% block page_title %}
    Update Profile
{% endblock page_title %}

{% block main_content %}

{% load static %}

      <div class="container-fluid py-4">
        <div class="row">
          <div class="col-12">
            <div class="row">
              <div class="col-xl-4 col-sm-4 mb-xl-0 mb-4">
                {% comment %} <div class="card"> {% endcomment %}
                  {% comment %} <div class="card-body p-3"> {% endcomment %}
                    <div class="row">
                      <div class="col-2">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                          <i class="ri-profile-line text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                      </div>
                      <div class="col-10" style="display:flex; align-items:center;">
                        <div class="numbers">
                          <h5 class="font-weight-bolder mb-0"> Update Profile</h5>
                        </div>
                      </div>
                    </div>
                  {% comment %} </div> {% endcomment %}
                {% comment %} </div> {% endcomment %}
              </div>
              <div class="col-xl-2 col-sm-2 mb-xl-0 mb-4"><div id="loading"></div></div>
              <div class="col-xl-4 col-sm-4 mb-xl-0 mb-4"></div>
              </div>
            </div>
            
                {% if messages %}
                <div class="row">
                <div class="col-12">
                <div class="form-group">
                    {% for message in messages %}
                    {% if message.tags == "error" %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert" style="color:white; font-weight:600;">
                        {{ message }}
                        </div>
                    {% elif message.tags == "success" %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert" style="color:white; font-weight:600;">
                        {{ message }}
                        </div>
                    {% endif %}
                    {% endfor %}
                  </div>
                </div>
                </div>
                {% endif %}
          </div>
        </div>
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-body">
                {% csrf_token %}
                <label>Change Password:</label>
                <div class="row">
                  <div class="col-6">
                      <div class="family form-group">
                          <input type="email" class="form-control" name="password" placeholder="Change Password">
                      </div>
                  </div>
                  <div class="col-6">
                      <div class="family form-group">
                        <button onclick="changePass()" class="btn bg-gradient-primary">Add</button>
                      </div>
                  </div>
              </div>
              <label>Security Key:</label>
              <div class="row">
                  <div class="col-6">
                      <div class="form-group">
                          <input type="text" class="form-control" name="securityKey" value="{{securityKey}}" placeholder="Enter Security Key">
                      </div>
                  </div>
                  
                  <div class="col-6">
                      <div class="form-group">
                        <button onclick="addSecurity()" class="btn bg-gradient-primary">Add</button>
                      </div>
                  </div>
              </div>
  
              </div>
            </div>
        </div>
        <script>
            function addSecurity()
            {
                var securityKey = $('[name="securityKey"]').val();
                window.location.href = `/profile_update/?security=${securityKey}`;
            }
            function changePass()
            {
                var password = $('[name="password"]').val();
                window.location.href = `/profile_update/?password=${password}`;
            }
          </script>
    
  {% endblock main_content %}