{% extends 'online_exam/base_student.html' %}
{% load static %}

{% block title %}
  <title>Profile</title>
{% endblock title %}

{% block content %}

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <br>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-user"></i><b> Profile</b></a></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        | Your Page Content Here |
        -------------------------->
        <div class = "row">
        <div class = "col-lg-4">

        </div>
        <div class = "col-lg-4">
            {% if message %}
              <div class="callout callout-success">
                <p>{{message}}</p>
              </div>
              {% elif wrong_message %}
              <div class="callout callout-danger">
                <p>{{wrong_message}}</p>
              </div>
              {% endif %}
                          <form action="../student_profile/" method="post">{% csrf_token %}
                <div class="box box-info">
                  <div class="box-header with-border">
                    <h3 class="box-title text-xplicit-orange">Profile Information</h3>
                  </div>
                  <div class="box-body">
                    <div class="form-group has-feedback">
                      <input type="text" name = "first_name" class="form-control" placeholder="Surname" value="{{ currentUser.first_name }}" required/><span class="glyphicon glyphicon-user form-control-feedback btn-xplicit-deep"></span>
                    </div>
                    <div class="form-group has-feedback">
                      <input type="text" class="form-control" name="last_name" placeholder="Other Names" value="{{ currentUser.last_name }}" required>
                      <span class="glyphicon glyphicon-user form-control-feedback btn-xplicit-deep"></span>
                    </div>
                    <div class="form-group has-feedback">
                      <input type="text" class="form-control" name="phone"  placeholder="Admission Number" oninvalid="setCustomValidity('Please enter a valid admission number')" value = "{{ currentUser.phone }}" required>
                      <span class="glyphicon glyphicon-user form-control-feedback btn-xplicit-deep"></span>
                    </div>
                    <div class="form-group has-feedback">
                      <input type="email" class="form-control" name="email" placeholder="Email" value = "{{ currentUser.email }}" required>
                      <span class="glyphicon glyphicon-envelope form-control-feedback btn-xplicit-deep"></span>
                    </div>

                    <div class = "form-group">
                      <input type="hidden" class="form-control" name="flag" placeholder="flag" value="1">
                    <input type="hidden" name="user_id" value="{{ currentUser.id }}">
                    <button class="btn btn-xplicit-deep" type="submit" style="float:right;"><i class='fa fa-edit'></i> Update</button>
                    </div>
                    </form>
                  </div>
                  <div class="box-footer with-border">
                    <div class = "form-group">
                    <h4 class="text-xplicit-orange">Change Password</h4>
                    </div>
                    <form action="../student_profile/" method = "post">
                      {% csrf_token %}
                    <div class="form-group has-feedback">
                      <input class="form-control" type="password" name="password" placeholder = "Enter Password" id = "password" onchange="validatePassword();" required>
                      <span class="glyphicon glyphicon-lock form-control-feedback btn-xplicit-deep"></span>
                    </div>
                    <div class="form-group has-feedback">
                      <input class="form-control" type="password" placeholder = "Re-enter Password" id = "confirm_password" onkeyup="validatePassword();" required>
                      <span class="glyphicon glyphicon-lock form-control-feedback btn-xplicit-deep"></span>
                    </div>

                    <div class="form-group">
                      <input type="hidden" class="form-control" name="flag" placeholder="flag" value="2">
                      <input type="hidden" name="user_id" value="{{ currentUser.id }}">
                    <button class="btn btn-xplicit-deep" type="submit" style="float:right;"><i class='fa fa-edit'></i> Update</button>
                    </form>
                    </div>
                  </div>
                </div>
        </div>
        <div class = "col-lg-4">

        </div>
      </div>
    </section>
  </div>
  <script>
    var password = document.getElementById("password")
    , confirm_password = document.getElementById("confirm_password");

    function validatePassword(){
    if(password.value != confirm_password.value) {
      confirm_password.setCustomValidity("Passwords Don't Match");
    } else {
      confirm_password.setCustomValidity('');
    }
    }
  </script>
{% endblock content%}