{% extends "base.html" %}
{% set active_page = "admin_keys" %}
{% if create %}
    {% set action_label = 'Create' %}
    {% set form_action = url_for('admin.edit_key') %}
{% else %}
    {% set action_label = 'Edit' %}
    {% set form_action = url_for('admin.edit_key', key_id=key.id) %}
{% endif %}
{% if (key is not none and key.role.name != "User") %}{% set hide_opts = True %}{% else %}
    {% set hide_opts = False %}{% endif %}
{% block title %}<title>{{ action_label }} API Key - {{ 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">{{ action_label }} API Key</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"><a href="{{ url_for('admin.manage_keys') }}">API Keys</a></li>
                        <li class="breadcrumb-item active">{{ action_label }} API Key</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 col-lg-4">
                    <form role="form" method="post" action="{{ form_action }}">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="create" value="{{ create }}">
                        <div class="card card-outline card-primary shadow">
                            <div class="card-header">
                                <h3 class="card-title">API Key Editor</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="form-group has-feedback">
                                    <label class="control-label" for="role">Role</label>
                                    <select class="key_role form-control" id="key_role" name="key_role">
                                        {% for role in roles %}
                                            <option value="{{ role.name }}"
                                                    {% if (key is not none) and (role.id==key.role.id) %}selected{% endif %}
                                                    {% if (key is none) and (role.name=="User") %}selected{% endif %}>
                                                {{ role.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <!-- /.form-group -->
                                <div class="form-group has-feedback">
                                    <label class="control-label" for="description">Description</label>
                                    <input type="text" class="form-control" placeholder="Description" name="description"
                                        {% if key is not none %} value="{{ key.description }}" {% endif %}>
                                    <span class="glyphicon glyphicon-pencil form-control-feedback"></span>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.card-body -->
                            <div class="card-header key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
                                <h3 class="card-title">Accounts Access Control</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
                                <p>This key will be linked to the accounts on the right,</p>
                                <p>thus granting access to zones owned by the selected accounts.</p>
                                <p>Click on accounts to move between the columns.</p>
                                <div class="form-group col-2">
                                    <select multiple="multiple" class="form-control" id="key_multi_account"
                                            name="key_multi_account">
                                        {% for account in accounts %}
                                            <option {% if key and account in key.accounts %}selected{% endif %}
                                                    value="{{ account.name }}">{{ account.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.card-body -->
                            <div class="card-header key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
                                <h3 class="card-title">Zone Access Control</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
                                <p>This key will have access to the zones on the right.</p>
                                <p>Click on zones to move between the columns.</p>
                                <div class="form-group col-2">
                                    <select multiple="multiple" class="form-control" id="key_multi_domain"
                                            name="key_multi_domain">
                                        {% for domain in domains %}
                                            <option {% if key and domain in key.domains %}selected{% endif %}
                                                    value="{{ domain.name }}">{{ domain.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="button" class="btn btn-secondary float-left" title="Cancel"
                                        onclick="window.location.href='{{ url_for('admin.manage_keys') }}'">
                                    <i class="fa-solid fa-window-close"></i>&nbsp;Cancel
                                </button>
                                <button type="submit" class="btn btn-primary float-right"
                                        title="{{ action_label }} API Key" id="key_submit">
                                    <i class="fa-solid fa-save"></i>&nbsp;{{ action_label }} API Key
                                </button>
                            </div>
                            <!-- /.card-footer -->
                        </div>
                        <!-- /.card -->
                    </form>
                </div>
                <!-- /.col -->

                <div class="col-12 col-sm-6 col-lg-8">
                    <div class="card card-outline card-secondary shadow">
                        <div class="card-header">
                            <h3 class="card-title">API Key Editor Help</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <p>Fill in all the fields in the form to the left.</p>
                            <p><strong>Role</strong> The role of the key.</p>
                            <p><strong>Description</strong> The key description.</p>
                            <p><strong>Access Control</strong> The zones or accounts which the key has access to.</p>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
{% endblock %}

{% block extrascripts %}
    <script>
        $('form').submit(function (e) {
            var selectedRole = $("#key_role").val();
            var selectedDomains = $("#key_multi_domain option:selected").length;
            var selectedAccounts = $("#key_multi_account option:selected").length;
            var warn_modal = $("#modal_warning");

            if (selectedRole != "User" && selectedDomains > 0 && selectedAccounts > 0) {
                var warning = "Administrator and Operators have access to all zones. Your zone an account selection won't be saved.";
                e.preventDefault(e);
                warn_modal.modal('show');
            }

            if (selectedRole == "User" && selectedDomains == 0 && selectedAccounts == 0) {
                var warning = "User role must have at least one account or one zone bound. None selected.";
                e.preventDefault(e);
                warn_modal.modal('show');
            }

            warn_modal.find('.modal-body p').text(warning);
            warn_modal.find('#button_key_confirm_warn').click(clearModal);
        });

        function clearModal() {
            $("#modal_warning").modal('hide');
        }

        $('#key_role').on('change', function (e) {
            var optionSelected = $("option:selected", this);
            if (this.value != "User") {
                // Clear the visible list
                $('#ms-key_multi_domain .ms-selection li').each(function () {
                    $(this).css('display', 'none');
                })
                $('#ms-key_multi_domain .ms-selectable li').each(function () {
                    $(this).css('display', '');
                })
                $('#ms-key_multi_account .ms-selection li').each(function () {
                    $(this).css('display', 'none');
                })
                $('#ms-key_multi_account .ms-selectable li').each(function () {
                    $(this).css('display', '');
                })
                // Deselect invisible selectbox
                $('#key_multi_domain option:selected').each(function () {
                    $(this).prop('selected', false);
                })
                $('#key_multi_account option:selected').each(function () {
                    $(this).prop('selected', false);
                })
                // Hide the lists
                $(".key-opts").hide();
            } else {
                $(".key-opts").show();
            }
        });
        $("#key_multi_domain").multiSelect({
            selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Zone Name'>",
            selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Zone Name'>",
            afterInit: function (ms) {
                var that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                    .on('keydown', function (e) {
                        if (e.which === 40) {
                            that.$selectableUl.focus();
                            return false;
                        }
                    });

                that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                    .on('keydown', function (e) {
                        if (e.which == 40) {
                            that.$selectionUl.focus();
                            return false;
                        }
                    });
            },
            afterSelect: function () {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterDeselect: function () {
                this.qs1.cache();
                this.qs2.cache();
            }
        });
        $("#key_multi_account").multiSelect({
            selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Account Name'>",
            selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Account Name'>",
            afterInit: function (ms) {
                var that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                    .on('keydown', function (e) {
                        if (e.which === 40) {
                            that.$selectableUl.focus();
                            return false;
                        }
                    });

                that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                    .on('keydown', function (e) {
                        if (e.which == 40) {
                            that.$selectionUl.focus();
                            return false;
                        }
                    });
            },
            afterSelect: function () {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterDeselect: function () {
                this.qs1.cache();
                this.qs2.cache();
            }
        });
        {% if plain_key %}
            $(document.body).ready(function () {
                var modal = $("#modal_show_key");
                var info = "Please copy this key to a secure location. You will be unable to view it again once you close this window: {{ plain_key }}";
                modal.find('.modal-body p').text(info);
                modal.find('#button_key_confirm').click(redirect_modal);
                modal.find('#button_close_modal').click(redirect_modal);
                modal.modal('show');
            });

            function redirect_modal() {
                window.location.href = '{{ url_for('admin.manage_keys') }}';
                modal.modal('hide');
            }
        {% endif %}
    </script>
{% endblock %}

{% block modals %}
    <div class="modal fade" id="modal_show_key">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">New API Key</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="button_key_confirm">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal_warning">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">WARNING</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            id="button_close_warn_modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary close" data-dismiss="modal" id="button_close_modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary" id="button_key_confirm_warn">
                        OK
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}