{% extends 'manage/general/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select, input_colour %}

{% set title = config_new ? 'Adding a new setting' : ((config_new ? 'Adding ' : 'Editing ') ~ ' setting ' ~ config_name) %}

{% block manage_content %}
    <div class="container manage-settings">
        {{ container_title('<i class="fas fa-cogs fa-fw"></i> ' ~ title) }}

        <form method="post" action="{{ url('manage-general-setting', {'name': config_name|default()}) }}" class="manage-setting" id="-msz-manage-setting-form">
            {{ input_csrf() }}

            {% if config_new %}
            <label class="manage-setting-field">
                <div class="manage-setting-field-name">Name</div>
                {{ input_text('conf_name', 'manage__emote__field__value', config_name|default(), 'text', null, false, {'id': '-msz-manage-setting-name'}) }}
            </label>

            <label class="manage-setting-field">
                <div class="manage-setting-field-name">Type</div>
                {{ input_select(
                    'conf_type',
                    ['', 'string', 'int', 'bool', 'float', 'array'],
                    config_type, null, null, true, 'manage__emote__field__value',
                    {'onchange': ('location.assign("' ~ url('manage-general-setting', {'name': '-name-', 'type': '-type-'}) ~ '".replace("-name-", document.getElementById("-msz-manage-setting-name").value).replace("-type-", this.value))')}
                ) }}
            </label>
            {% endif %}

            {% if config_type is not empty %}
            <label class="manage-setting-field">
                <div class="manage-setting-field-name">Value</div>
                
                {% if config_type == 'array' %}
                    <div class="manage-setting-array">
                        <div class="manage-setting-array-warning">
                            <noscript><div class="warning"><div class="warning__content">Touching this without Javascript will destroy everything.</div></div></noscript>
                        </div>
                        <div class="manage-setting-array-select">
                            <select class="input__select" multiple id="-msz-manage-setting-array" name="conf_value[]">
                            {% for entry in config_value %}
                                <option>{{ entry }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="manage-setting-array-remove">
                            <button type="button" id="-msz-manage-setting-array-delete" class="input__button input__button--destroy">Remove</button>
                        </div>
                        <div class="manage-setting-array-add">
                            <input type="text" id="-msz-manage-setting-array-input" class="input__text">
                            <button type="button" id="-msz-manage-setting-array-enter" class="input__button input__button--save">Add</button>
                        </div>
                    </div>
                    <script type="text/javascript">
                        var mszMSF = document.getElementById('-msz-manage-setting-form'),
                            mszMSA = document.getElementById('-msz-manage-setting-array'),
                            mszMSAD = document.getElementById('-msz-manage-setting-array-delete'),
                            mszMSAI = document.getElementById('-msz-manage-setting-array-input'),
                            mszMSAE = document.getElementById('-msz-manage-setting-array-enter');

                        mszMSF.addEventListener('submit', function() {
                            for(var i = 0; i < mszMSA.options.length; ++i)
                                mszMSA.options[i].selected = true;
                        });

                        mszMSAD.addEventListener('click', function() {
                            var opts = Array.from(mszMSA.selectedOptions);
                            while(opts.length > 0)
                                mszMSA.removeChild(opts.pop());
                        });

                        mszMSAE.addEventListener('click', function() {
                            var text = mszMSAI.value,
                                opt = document.createElement('option');
                            opt.textContent = text;
                            mszMSA.appendChild(opt);
                        });

                        mszMSAI.addEventListener('keydown', function(ev) {
                            if(ev.key === 'Enter') {
                                ev.preventDefault();
                                mszMSAE.click();
                                this.value = '';
                                return false;
                            }
                        });
                    </script>
                {% elseif config_type == 'string' %}
                    {{ input_text('conf_value', 'manage-setting-field-value', config_value, 'text') }}
                {% elseif config_type == 'int' %}
                    {{ input_text('conf_value', 'manage-setting-field-value', config_value, 'number') }}
                {% elseif config_type == 'float' %}
                    {{ input_text('conf_value', 'manage-setting-field-value', config_value, 'number', '', false, {'step':'0.01'}) }}
                {% elseif config_type == 'bool' %}
                    {{ input_checkbox('conf_value', 'Enabled', config_value) }}
                {% endif %}
            </label>

            <div class="manage-setting-actions">
                <button class="input__button">Save</button>
            </div>
            {% endif %}
        </form>
    </div>
{% endblock %}