{{define "content"}}

<h1 class="page-header"><i class="fa fa-lock"></i> Two-Factor Authentication</h1>

{{ range $m := .flashes }}
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    {{ $m }}
</div>
{{ end }}

{{ with .message }}
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    {{ . }}
</div>
{{ end }}

{{ if .otpenabled }}
    <h3>Status: <span class="label label-success">On</span></h3>
    <br/>
    <p>
    <button class="btn btn-danger" data-toggle="modal" data-target="#confirm-disable">
         <i class="fa fa-trash"></i> Disable Two-Factor TOTP
     </button>
     </p>
{{ else }}
    <h3>Status: <span class="label label-danger">Off</span></h3>
    <br/>
    <p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#confirm-enable">
         <i class="fa fa-check"></i> Enable Two-Factor TOTP
     </button>
     </p>

    {{template "otp-info.html" .}}

{{ end }}


<div class="modal fade" id="confirm-disable" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Are you sure you want to disable TOTP?</h4>
      </div>
      <div class="modal-body">
        <p>This will disable Two-Factor authentication. Are you sure?</p>
      </div>
      <div class="modal-footer">
      <form role="form" method="post">
        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
        <input type="hidden" id="action" name="action" value="remove">
        <input type="hidden" name="csrf" value="{{ .csrf }}" />
        <button type="submit" class="btn btn-danger btn-ok"><i class="fa fa-trash"></i> Disable</a>
      </form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="confirm-enable" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Are you sure you want to enable OTP?</h4>
      </div>
      <div class="modal-body">
        <p>This will enable Two-Factor authentication. Are you sure?</p>
      </div>
      <div class="modal-footer">
      <form role="form" method="post">
        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
        <input type="hidden" id="action" name="action" value="enable">
        <input type="hidden" name="csrf" value="{{ .csrf }}" />
        <button type="submit" class="btn btn-success btn-ok"><i class="fa fa-check"></i> Enable</a>
      </form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{{end}}