{% extends "base.html" %}
{% set active_page = "user_profile" %}
{% block title %}<title>Edit Profile - {{ SITE_NAME }}</title>{% endblock %}

{% block dashboard_stat %}
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Edit Profile</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Edit Profile</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-6">
                    <div class="card card-outline card-primary shadow">
                        <div class="card-header">
                            <h3 class="card-title">Profile Editor</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="nav-tabs-custom mb-2">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#tabs-personal" data-toggle="tab">
                                            Personal Info
                                        </a>
                                    </li>
                                    {% if session['authentication_type'] == 'LOCAL' %}
                                        <li class="nav-item">
                                            <a class="nav-link" href="#tabs-password" data-toggle="tab">
                                                Change Password
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
                                        <li class="nav-item">
                                            <a class="nav-link" href="#tabs-authentication" data-toggle="tab">
                                                Authentication
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                            <!-- /.nav-tabs-custom -->

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tabs-personal">
                                    <form role="form" method="post" action="{{ user_profile }}">
                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                        <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 session['authentication_type'] != 'LOCAL' %}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 session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                                        </div>
                                        <div class="form-group">
                                            <label for="email">E-Mail</label> <input type="email"
                                                                                     class="form-control"
                                                                                     name="email" id="email"
                                                                                     placeholder="{{ current_user.email }}"
                                                                                     {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                                        </div>
                                        {% if session['authentication_type'] == 'LOCAL' %}
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-primary" title="Save Profile">
                                                    <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save Profile
                                                </button>
                                            </div>
                                        {% endif %}
                                    </form>
                                </div>
                                <!-- /.tab-pane -->

                                {% if session['authentication_type'] == 'LOCAL' %}
                                    <div class="tab-pane fade" 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">
                                                <input type="hidden" name="_csrf_token"
                                                       value="{{ csrf_token() }}">
                                                <div class="form-group">
                                                    <label for="password">New Password</label>
                                                    <input type="password" class="form-control" name="password"
                                                           id="newpassword">
                                                </div>
                                                <div class="form-group">
                                                    <label for="rpassword">Re-type New Password</label>
                                                    <input type="password" class="form-control" name="rpassword"
                                                           id="rpassword">
                                                </div>
                                                <div class="form-group">
                                                    <button type="submit" class="btn btn-primary" title="Save Password">
                                                        <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save Password
                                                    </button>
                                                </div>
                                            </form>
                                        {% endif %}
                                    </div>
                                    <!-- /.tab-pane -->
                                {% endif %}

                                <div class="tab-pane fade" id="tabs-authentication">
                                    <form action="{{ user_profile }}" method="post">
                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                        <div class="form-group">
                                            <input type="checkbox" id="otp_toggle" class="otp_toggle"
                                                   {% if current_user.otp_secret %}checked{% 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('user.qrcode') }}">
                                                    </p>
                                                    <div style="position: relative; left: 15px">
                                                        Your secret key is:
                                                        <br/>
                                                        <form>
                                                            <input type=text id="otp_secret"
                                                                   value={{ current_user.otp_secret }} readonly>
                                                            <button type=button
                                                                    style="position:relative; right:28px"
                                                                    onclick="copy_otp_secret_to_clipboard()">
                                                                <i class="fa-solid fa-clipboard"></i>
                                                            </button>
                                                            <br/>
                                                            <span style="color: red;" id="copy_tooltip"
                                                                  style="visibility:collapse">Copied.</span>
                                                        </form>
                                                    </div>
                                                    You can use Google Authenticator
                                                    (<a target="_blank"
                                                        href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><i
                                                    class="fa-brands fa-google-play"></i>Android</a>
                                                    - <a target="_blank"
                                                         href="https://apps.apple.com/us/app/google-authenticator/id388497605"><i
                                                    class="fa-brands fa-app-store-ios"></i>iOS</a>)
                                                    or FreeOTP
                                                    (<a target="_blank"
                                                        href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en"><i
                                                    class="fa-brands fa-google-play"></i>Android</a>
                                                    - <a target="_blank"
                                                         href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8"><i
                                                    class="fa-brands fa-app-store-ios"></i>iOS</a>)
                                                    on your smartphone to scan the QR code.
                                                    <br/>
                                                    <p style="color: red; font-style: italic; font-weight: bold;">
                                                        Make sure only you can see this QR Code and
                                                                secret key and
                                                                nobody can capture them.
                                                    </p>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <!-- /.form-group -->
                                    </form>
                                </div>
                                <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
{% endblock %}

{% block extrascripts %}
    <script>

        // 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 postdata = {
                'action': 'enable_otp',
                'data': {
                    'enable_otp': enable_otp
                },
                '_csrf_token': '{{ csrf_token() }}'
            };
            applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true, function () {
                window.location.reload();
                $('#tabs li:eq(2) a').tab('show');
            });
        });
    </script>
{% endblock %}