{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'extension/settings/theme'|alink }}">{{ 'Themes'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Settings for'|trans }} {{ theme_code }}</li>
    </ol>
{% endblock %}

{% block meta_title %}{{ 'Settings for'|trans }} {{ theme_code }}{% endblock %}

{% block content %}
    {% if error %}
        <div class="nNote nFailure hideit first">
            <p><strong>{{ 'IMPORTANT'|trans }}: </strong>{{ error }}</p>
        </div>
    {% endif %}

    {% if info %}
        <div class="nNote nInformation hideit first">
            <p><strong>{{ 'INFORMATION'|trans }}: </strong>{{ info }}</p>
        </div>
    {% endif %}

    {% if settings_html %}
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">{{ 'Settings for'|trans }} {{ theme_code }}</h3>
                <div class="card-subtitle">{{ "Switch to a predefined set of theme settings from the dropdown. Adjust each section and apply the changes once you're done."|trans }}</div>
                <div class="mb-3 row">
                    <label class="form-label col-sm-4 col-md-3 col-form-label">{{ 'Your current preset'|trans }}</label>
                    <div class="col-sm-5 col-md-3">
                        <div class="input-group">
                            <select class="form-select" name="preset" onchange="bb.post('admin/theme/preset_select', { code: '{{ theme_code }}', preset: $(this).val(), CSRFToken: '{{ CSRFToken }}' }, function(){ bb.reload(); })">
                                {% for preset in presets %}
                                    <option value="{{ preset }}"{% if preset == current_preset %} selected{% endif %}>{{ preset }}</option>
                                {% endfor %}
                            </select>
                            {% if presets|length > 1 and current_preset != 'Default' %}
                                <a href="{{ 'api/admin/theme/preset_delete'|link({ 'code': theme_code, 'preset': current_preset, 'CSRFToken': CSRFToken}) }}" class="btn btn-icon api-link" data-api-confirm="{{ 'Are you sure?'|trans }}"
                                   data-api-confirm-btn="{{ 'Delete'|trans }}"
                                   data-api-type="danger"
                                   data-api-reload="1">
                                    <svg class="icon">
                                        <use xlink:href="#delete"/>
                                    </svg>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-3">
            <form method="post" action="" enctype="multipart/form-data">
                <div class="card-body">
                    <h3 class="card-title">{{ 'Config for'|trans }} {{ current_preset }} {{ 'preset'|trans }}</h3>
                    <div class="" id="theme-settings">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                        <div class="accordion" id="preset-config">
                            {{ include(template_from_string(settings_html)) }}
                        </div>
                        <div class="mt-3 d-flex align-items-center">
                            <div class="form-check mb-0">
                                <input class="form-check-input" type="checkbox" name="save-current-setting" value="1" id="save-current-setting">
                                <label class="form-check-label" for="save-current-setting">{{ 'Save current settings as a new preset called'|trans }}</label>
                            </div>
                            <div class="ms-2">
                                <input class="form-control" type="text" name="save-current-setting-preset">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button class="btn btn-primary" type="submit">{{ 'Apply changes'|trans }}</button>
                </div>
            </form>
        </div>
    {% endif %}
{% endblock %}
{% block js %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            function createOptionElement(value, text) {
                let optionEl = document.createElement('option');
                optionEl.setAttribute('value', value);
                optionEl.innerText = text;
                return optionEl;
            }

            //special class "page"
            document.querySelectorAll('#theme-settings select.page').forEach((el) => {
                el.append(createOptionElement('', "{{ 'None'|trans }}"));
                Object.entries({{ admin.page_get_pairs|json_encode|raw }}).forEach(([key, value]) => {
                    el.append(createOptionElement(key, value));
                })
            });

            //special class "snippet"
            document.querySelectorAll('#theme-settings select.snippet').forEach((el) => {
                el.append(createOptionElement('', "{{ 'None'|trans }}"));
                Object.entries({{ snippets|json_encode|raw }}).forEach(([key, value]) => {
                    el.append(createOptionElement(key, value));
                })
            });

            //special class "product"
            document.querySelectorAll('#theme-settings select.product').forEach((el) => {
                el.append(createOptionElement('', "{{ 'None'|trans }}"));
                Object.entries({{ admin.product_get_pairs|json_encode|raw }}).forEach(([key, value]) => {
                    el.append(createOptionElement(key, value));
                })
            });

            // populate settings values
            Object.entries({{ settings|json_encode|raw }}).forEach(([key, value]) => {
                document.querySelectorAll('#theme-settings *[name="' + key + '"]').forEach((el) => {
                    switch (el.getAttribute('type')) {
                        case 'radio':
                            el.parentElement.parentElement.querySelector('[value="'+ value +'"]').setAttribute('checked', '')
                            break;
                        case 'checkbox':
                            el.setAttribute('checked', '');
                            break;
                        default:
                            el.value = value;
                    }
                });
            })

            // show uploaded files
            Object.entries({{ uploaded|json_encode|raw }}).forEach(([key, file]) => {
                let el = document.querySelector('#theme-settings input[name="' + file.name + '"]');
                let filePathBtn = '<div class="asset"><a href="' + file.url + '" target="_blank" >' + file.name + '</a></div>';
                el.insertAdjacentHTML('afterend', filePathBtn);

            })

        });
    </script>
{% endblock %}
