{% extends "base.html" %}
{% block title %}<title>DNS Control Panel - My Profile</title>{% endblock %}
{% block dashboard_stat %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Profile
        <small>Edit my profile</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url_for('dashboard') }}"><i class="fa fa-dashboard"></i>Home</a></li>
        <li class="active">My Profile</li>
      </ol>
    </section>
{% endblock %}
{% block content %}
<section class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Edit my profile{%  if external_account %} [Disabled - Authenticated externally]{% endif %}</h3>
                </div>
                <div class="box-body">
                    <!-- Custom Tabs -->
                    <div class="nav-tabs-custom" id="tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tabs-personal" data-toggle="tab">Personal
                                    Info</a></li>
                            <li><a href="#tabs-avatar" data-toggle="tab">Change
                                    Avatar</a></li>
                            {%  if not external_account %}<li><a href="#tabs-password" data-toggle="tab">Change
                                    Password</a></li>
                            <li><a href="#tabs-authentication" data-toggle="tab">Authentication
                                    </a></li>
                            {% endif %}
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabs-personal">
                                <form role="form" method="post" action="{{ user_profile }}">
                                    <div class="form-group">
                                        <label for="firstname">First Name</label> <input type="text"
                                            class="form-control" name="firstname" id="firstname"
                                            placeholder="{{ current_user.firstname }}" {%  if external_account %}disabled{% endif %}>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname">Last Name</label> <input type="text"
                                            class="form-control" name="lastname" id="lastname"
                                            placeholder="{{ current_user.lastname }}" {%  if external_account %}disabled{% endif %}>
                                    </div>
                                    <div class="form-group">
                                        <label for="email">E-mail</label> <input type="text"
                                            class="form-control" name="email" id="email"
                                            placeholder="{{ current_user.email }}" {%  if external_account %}disabled{% endif %}>
                                    </div>{%  if not external_account %}
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-flat btn-primary">Submit</button>
                                    </div>{% endif %}
                                </form>
                            </div>
                            <div class="tab-pane" id="tabs-avatar">
                                <form action="{{ user_profile }}" method="post"
                                    enctype="multipart/form-data">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <div class="thumbnail" style="width: 200px; height: 210px;">
                                                {% if current_user.avatar %} <img
                                                    src="{{ url_for('user_avatar', filename=current_user.avatar) }}"
                                                    alt="" / style="width: 200px; height: 200px;"> {%
                                                else %} <img
                                                    src="{{ current_user.email|email_to_gravatar_url(size=200) }}"
                                                    alt="" /> {% endif %}
                                            </div>{%  if not external_account %}
                                            <div>
                                                <label for="file">Select image</label> <input type="file"
                                                    id="file" name="file">
                                            </div>{% endif %}
                                        </div>{%  if not external_account %}
                                        <div>
                                            <span class="label label-danger">NOTE! </span> <span>&nbsp;Only
                                                supports <strong>.PNG, .JPG, .JPEG</strong>. The best size
                                                to use is <strong>200x200</strong>.
                                            </span>
                                        </div>{% endif %}
                                    </div>{%  if not external_account %}
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-flat btn-primary">Submit</button>
                                    </div>{% endif %}
                                </form>
                            </div>
                            {%  if not external_account %}<div class="tab-pane" id="tabs-password">
                                {% if not current_user.password %} Your account password is
                                managed via LDAP which isn't supported to change here. {% else
                                %}
                                <form action="{{ user_profile }}" method="post">
                                    <div class="form-group">
                                        <label for="password">New Password</label> <input
                                            type="password" class="form-control" name="password"
                                            id="newpassword" {%  if external_account %}disabled{% endif %} />
                                    </div>
                                    <div class="form-group">
                                        <label for="rpassword">Re-type New Password</label> <input
                                            type="password" class="form-control" name="rpassword"
                                            id="rpassword" {%  if external_account %}disabled{% endif %} />
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-flat btn-primary" {%  if external_account %}disabled{% endif %}>Change
                                            password</button>
                                    </div>
                                </form>
                                {% endif %}
                            </div>
                            <div class="tab-pane" id="tabs-authentication">
                                <form action="{{ user_profile }}" method="post">
                                    <div class="form-group">
                                        <input type="checkbox" id="otp_toggle" class="otp_toggle" {% if current_user.otp_secret %}checked{% endif %} {%  if external_account %}disabled{% endif %}>
                                        <label for="otp_toggle">Enable Two Factor Authentication</label>
                                        {% if current_user.otp_secret %}
                                        <div id="token_information">
                                            <p><img id="qrcode" src="{{ url_for('qrcode') }}"></p>
                                            Please start FreeOTP (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a> -  <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>) on your smartphone and scan the above QR Code with it.
                                            <br/>
                                            <font color="red"><strong><i>Make sure only you can see this QR Code and nobodoy can capture it.</i></strong></font>
                                        </div>
                                        {% endif %}
                                    </div>
                                </form>
                            </div>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block extrascripts %}
<!-- TODO: add password and password confirmation comparisson check -->
<script>

    $(function() {
        $('#tabs').tabs({
            // add url anchor tags
            activate: function(event, ui) {
                window.location.hash = ui.newPanel.attr('id');
            }
        });
        // re-set active tab (ui)
        var activeTabIdx = $('#tabs').tabs('option','active');
        $('#tabs li:eq('+activeTabIdx+')').tab('show')
    });

    // initialize pretty checkboxes
    $('.otp_toggle').iCheck({
        checkboxClass : 'icheckbox_square-blue',
        increaseArea : '20%'
    });

    // handle checkbox toggling
    $('.otp_toggle').on('ifToggled', function(event) {
        var enable_otp = $(this).prop('checked');
        var username = $(this).prop('id');
        postdata = {
            'action' : 'enable_otp',
            'data' : {
                'enable_otp' : enable_otp
            }
        };
        applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true);
        location.reload();
    });
</script>
{% endblock %}