{% extends "base.html" %}
{% set active_page = "admin_accounts" %}
{% if create %}
    {% set action_label = 'Create' %}
    {% set form_action = url_for('admin.edit_account') %}
{% else %}
    {% set action_label = 'Edit' %}
    {% set form_action = url_for('admin.edit_account', account_name=account.name) %}
{% endif %}
{% block title %}<title>{{ action_label }} Account - {{ 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 }} Account</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.manage_account') }}">Accounts</a></li>
                        <li class="breadcrumb-item active">{{ action_label }} Account</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">Account Editor</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                {% if error %}
                                    <div class="alert alert-danger alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4><i class="fa-solid fa-ban"></i> Error!</h4>
                                        {{ error }}
                                    </div>
                                    <span class="help-block">{{ error }}</span>
                                {% endif %}
                                <div
                                    class="form-group has-feedback {% if invalid_accountname or duplicate_accountname %}has-error{% endif %}">
                                    <label class="control-label" for="accountname">Name</label>
                                    <input type="text" class="form-control" placeholder="Account Name (required)"
                                           name="accountname" id="accountname"
                                           {% if account %}value="{{ account.name }}" {% endif %}
                                           {% if not create %}disabled{% endif %} required>
                                    <span class="form-control-feedback"></span>
                                    {% if invalid_accountname %}
                                        <span class="help-block text-danger">Cannot be blank and must only contain alphanumeric
                    characters{% if SETTING.get('account_name_extra_chars') %}, dots, hyphens or underscores{% endif %}.
                  </span>
                                    {% elif duplicate_accountname %}
                                        <span class="help-block text-danger">Account name already in use.</span>
                                    {% endif %}
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label" for="accountdescription">Description</label>
                                    <input type="text" class="form-control" placeholder="Account Description (optional)"
                                           name="accountdescription" id="accountdescription"
                                           {% if account %}value="{{ account.description }}" {% endif %}>
                                    <span class="orm-control-feedback"></span>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label" for="accountcontact">Contact Person</label>
                                    <input type="text" class="form-control" placeholder="Contact Person (optional)"
                                           name="accountcontact" id="accountcontact"
                                           {% if account %}value="{{ account.contact }}" {% endif %}>
                                    <span class="form-control-feedback"></span>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label" for="accountmail">Mail Address</label>
                                    <input type="email" class="form-control" placeholder="Mail Address (optional)"
                                           name="accountmail" id="accountmail"
                                           {% if account %}value="{{ account.mail }}" {% endif %}>
                                    <span class="form-control-feedback"></span>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-header">
                                <h3 class="card-title">Access Control</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <p>Users on the right have access to manage records in all zones
                                    associated with the account.
                                </p>
                                <p>Click on users to move between columns.</p>
                                <div class="form-group col-2">
                                    <select multiple="multiple" class="form-control" id="account_multi_user"
                                            name="account_multi_user">
                                        {% for user in users %}
                                            <option {% if user.id in account_user_ids|default([]) %}selected{% endif %}
                                                    value="{{ user.username }}">{{ user.username }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-body">
                                <p>Zones on the right are associated with the account. Red marked zone names are
                                    already associated with other accounts.
                                    Moving already associated zones to this account will overwrite the previous
                                    associated account.
                                </p>
                                <p>Hover over the red zone names to show the associated account. Click on zones to
                                    move between columns.</p>
                                <div class="form-group col-2">
                                    <select multiple="multiple" class="form-control" id="account_domains"
                                            name="account_domains">
                                        {% for domain in domains %}
                                            {% if account != None and domain.account_id != None and account.id != domain.account_id %}
                                                {% with account_id=domain.account_id %}
                                                    <option style="color: red" data-toggle="tooltip"
                                                            title="Associated with: {{ accounts[account_id].name }}"
                                                            value="{{ domain.name }}">
                                                        {{ domain.name }}
                                                    </option>
                                                {% endwith %}
                                            {% else %}
                                                <option {% if account.id == domain.account_id %}selected{% endif %}
                                                        value="{{ domain.name }}">
                                                    {{ domain.name }}
                                                </option>
                                            {% endif %}
                                        {% 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_account') }}'">
                                    Cancel
                                </button>
                                <button type="submit" class="btn btn-primary float-right"
                                        title="{{ action_label }} Account">
                                    {{ action_label }} Account
                                </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">Account Editor Help</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <p>
                                An account allows grouping of zones belonging to a particular entity, such as a
                                customer or
                                department.
                            </p>
                            <p>
                                A zone can be assigned to an account upon zone creation or through the zone
                                administration
                                page.
                            </p>
                            <p>Fill in all the fields to the in the form to the left.</p>
                            <p>
                                <strong>Name</strong> is an account identifier. It will be lowercase and can contain
                                alphanumeric
                                characters{% if SETTING.get('account_name_extra_chars') %}, dots, hyphens and
                                underscores (no space or other special character is allowed)
                            {% else %} (no extra character is allowed){% endif %}.<br/>
                                <strong>Description</strong> is a user-friendly name for this account.<br/>
                                <strong>Contact person</strong> is the name of a contact person at the account.<br/>
                                <strong>Mail Address</strong> is an e-mail address for the contact person.
                            </p>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
{% endblock %}

{% block extrascripts %}
    <script>
        function addMultiSelect(id, placeholder) {
            $(id).multiSelect({
                selectableHeader: `<input type='text' class='search-input' autocomplete='off' placeholder='${placeholder}'>`,
                selectionHeader: `<input type='text' class='search-input' autocomplete='off' placeholder='${placeholder}'>`,
                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();
                }
            });
        }

        addMultiSelect("#account_multi_user", "Username")
        addMultiSelect("#account_domains", "Zone")
    </script>
{% endblock %}