{% extends "mfa_auth_base.html" %}
{% block head %}
    <script type="application/javascript">
    function checkFlag() {
        if ($("#agree").is(":checked"))
        return true;
        else
          alert("Please agree to the statement first");
        return false;
    }
    function checkTrusted() {
        $.ajax({
            url:"{% url 'td_checkTrusted' %}",
            success:function (data) {
                if (data == "OK")
                    window.location.href="{% url 'td_securedevice' %}";
                else
                    setTimeout('checkTrusted()',2000)
            }

        })

    }
    $(document).ready(checkTrusted())
    </script>
{% endblock %}
{% block content %}
    <br/>
    <br/>

<div class="row">

<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="panel panel-default card">
      <div class="panel-heading card-header">
	      <strong> Add Trusted Device</strong>
      </div>
      <div class="panel-body card-body">
        {%  if success %}
            <div class="alert alert-warning">
                Please check your PC window, to continue the process.
            </div>
        {% elif added %}
            <div class="alert alert-success">
                Your device is now trusted, please try to <a href="{% url 'login' %}"> login</a>
            </div>

      {% else %}
            <div class="alert alert-warning">Please make sure you are not in private (incognito) mode <i class="fal fa-user-secret"></i></div>
      <FORM METHOD="POST" ACTION="{% url 'add_td' %}" Id="formLogin" onSubmit="return checkFlag()" name="FrontPage_Form1">
      {% csrf_token %}
          {%  if invalid %}
          <div class="alert alert-danger">
              {{ invalid }}
          </div>
          {% endif %}
      {% if quota %}
          <div class="alert alert-warning">
              {{ quota }}
          </div>
      {% endif %}
      <fieldset>
      <div class="row">
      <div class="col-sm-12 col-md-12">
      </div>
      </div>
      <div class="row">
	  <div class="col-sm-12 col-md-12">
	    <div class="form-group">
	      <div class="input-group mb-3">
		<span class="input-group-addon input-group-text">
		<i class="glyphicon glyphicon-user bi bi-person"></i>
		</span>
		<input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">

	      </div>
	    </div>
	    <div class="form-group">
		<div class="input-group mb-3">
		<span class="input-group-addon input-group-text">
		<i class="fa fa-key"></i>
		</span>
		<input class="form-control" placeholder="e.g GAK-Y2M" id='key' style="text-transform: uppercase" name="key" type="text" size="9" MaxLength="9" value="{{ key }}">
		</div>
	    </div>
           <div class="form-group">
		<span class="input-group mb-3">
            <input id='agree' name="agree" type="checkbox"><span style="color: red"> I confirm that this device is mine and it is only used by me.</span>

	    </div>
      {% comment %}
	    <div class="form-group">
	      <div class="input-group mb-3">
	      <span class="input-group-addon input-group-text">


	      <select size="1" name="Institution_Code" style="font-size: 10pt; font-family: Calibri; height: 34px;width: 230px">
              {%  for ins in institutes %}
                <option value="{{ ins.institution_code }}">{{ ins.alias }}</option>
              {% endfor %}

		</select>
	      </span>
	      </div>
	      </div>
	      {% endcomment %}
	      <div class="form-group d-grid gap-2">
	      <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
	      </div>
	      </div>
	      </div>
	      </fieldset>
	      </form>
      {% endif %}
	      </div>
	      <div class="panel-footer card-footer">


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


  {% endblock %}