{strip}

{* КОМПОНЕНТЫ *}

{$_lang = substr($wa->locale(), 0, 2)}

{$_components = []}

{$_globals_components = $wa->globals("components")}
{if !empty($_globals_components)}
    {$_components = array_merge($_components, $_globals_components)}
{/if}

{* ШАБЛОНЫ *}

{$_templates = []}

{capture assign="_delete_confirm_dialog"}{include file="./dialogs/pages_delete_page_confirm.html" inline}{/capture}
{$_templates["delete-confirm-dialog"] = $_delete_confirm_dialog|strip}

{capture assign="_edit_page_dialog"}{include file="./dialogs/pages_edit_page.html" inline}{/capture}
{$_templates["edit-page-dialog"] = $_edit_page_dialog|strip}

{capture assign="_unsaved_confirm_dialog"}{include file="./dialogs/pages_unsaved_changes_confirm.html" inline}{/capture}
{$_templates["unsaved-confirm-dialog"] = $_unsaved_confirm_dialog|strip}

{include file="./dialogs/modification_wysiwyg.confirm.html" inline}

{* ЛОКАЛИЗАЦИЯ *}

{$_tooltips = [
    "product-pages-1" => [
        "id" => "product-pages-1",
        "html" => _w("Change image")|escape,
        "class" => "inline"
    ]
]}

{$_locales = [
    "incorrect_url" => _w("Incorrect URL format.")
]}

{$_sprite_url = "`$wa_url`wa-apps/shop/img/backend/products/product/icons.svg?v=`$wa->version()`"}

{/strip}

{* PAGE *}
<div id="js-product-pages-section-wrapper">
    {* VUE *}
    <div class="article wider s-product-pages-section js-product-pages-section" style="visibility: hidden;">

        <!-- plugin hook: 'backend_prod_content.top' -->
        {* @event backend_prod_content.%plugin_id%.top *}
        {if !empty($backend_prod_content_event)}{foreach $backend_prod_content_event as $_}{ifset($_.top)}{/foreach}{/if}

        {* HEADER *}
        <div class="s-section-header">
            <h4>[`Subpages`]</h4>
            <p class="small">[`Subpages enable you to add more useful content to product pages such as user manuals, photo galleries, user reviews, etc.`]</p>

            {* GLOBAL ERRORS *}
            <div class="s-errors-place" id="js-errors-place" v-if="errors_global.length">
                <template v-for="error in errors_global" v-bind:key="error.id">
                    <div class="wa-message small info flexbox space-8" v-bind:data-id="error.id">
                        <div class="message-icon">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="message-text wide">{ { error.text } }</div>
                        <div class="message-actions">
                            <div class="message-action" v-on:click.prevent="removeError(error.id)">
                                <i class="fas fa-times message-toggle"></i>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {* BODY *}
        <div class="s-section-body">

            <div class="s-pages-wrapper">
                <div class="s-section-header">
                    <button class="button light-gray rounded small" type="button"
                            v-on:click.prevent="createPage">
                        <span class="s-icon text-green"><i class="fas fa-plus-circle"></i></span>
                        <span class="s-name bold"> [`New subpage`]</span>
                    </button>
                </div>
                <template v-if="pages.length">
                    <div class="s-pages-list-wrapper blank">
                        <div class="s-pages-list">
                            <div v-for="page in pages"
                                v-bind:key="page.id"
                                class="s-page-wrapper"
                                v-bind:class="{ 'is-moving' : page.is_moving }"
                                v-bind:data-id="page.id">
                                <div class="s-column-move-actions nowrap" v-bind:style="{ 'opacity': (is_locked || page.is_locked) ? .5 : '' }">
                                    <div class="s-toggle-move" draggable="true" v-bind:class="{ 'cursor-move js-page-move-toggle' : !is_locked }">
                                        <i class="icon baseline shift-2"><svg><use xlink:href='{$_sprite_url}#grip'></use></svg></i>
                                    </div>
                                </div>
                                <div class="s-column-name wide">
                                    <span class="s-name" v-bind:class="{ 'is-draft' : !page.status }">{ { page.name } }</span>
                                </div>
                                <div class="s-column-status nowrap">
                                    <span class="s-status" v-if="page.status">[s`Published`]</span>
                                    <span class="s-status is-draft" v-else>[s`Draft`]</span>
                                </div>
                                <div class="s-column-url nowrap">
                                    {if !empty($frontend_urls)}
                                        {$_front = reset($frontend_urls)}
                                        <a class="s-url" v-bind:href="'{$_front.url|escape}' + page.url + '/' + (page.status ? '' : '?preview={$preview_hash}')" target="_blank">../{ { page.url } }/&nbsp;<i class="fas fa-external-link-square-alt"></i></a>
                                    {else}
                                        <span class="s-url">{ { page.url } }</span>
                                    {/if}
                                </div>
                                <div class="s-column-actions nowrap"
                                    v-bind:style="{ 'opacity': (is_locked || page.is_locked) ? .5 : '' }">
                                    <button class="nowrap button nobutton light-gray rounded smaller" type="button"
                                            title="[`Edit`]"
                                            v-bind:disabled="is_locked || page.is_locked"
                                            v-on:click.prevent="editPage(page)">
                                        <span class="s-icon text-blue"><i class="fas fa-pen"></i></span>
                                    </button>
                                    <button class="nowrap button nobutton light-gray rounded smaller" type="button"
                                            title="[`Delete`]"
                                            v-bind:disabled="is_locked || page.is_locked"
                                            v-on:click.prevent="deletePage(page)">
                                        <span class="s-icon text-red"><i class="fas fa-trash-alt"></i></span>
                                        <span class="s-name"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <p class="hint" v-else>[`Add new subpages, and they will appear in the list.`]</p>
            </div>
        </div>
        <!-- plugin hook: 'backend_prod_content.bottom' -->
        {* @event backend_prod_content.%plugin_id%.bottom *}
        {if !empty($backend_prod_content_event)}{foreach $backend_prod_content_event as $_}{ifset($_.bottom)}{/foreach}{/if}

        {* FEATURES HIDDEN ON FRONT *}
        {capture assign="_footer_content"}
            {if $show_sku_warning}
                {$_tooltips["product-sku-features-hidden-on-front"] = [
                "id" => "product-sku-features-hidden-on-front",
                "html" => _w("Open the “Prices & features” tab to fix errors in the product variants.")|escape
                ]}

                <div class="s-features-hidden-on-front-section">
                    <div class="wa-message small warn flexbox space-8">
                        <div class="message-icon"><i class="fas fa-exclamation-triangle text-yellow"></i></div>
                        <div class="message-text wide">
                            <span class="s-text">[`Some product variants are not displayed in the storefront because of errors.`] </span>
                            <span class="s-icon" data-tooltip-id="product-sku-features-hidden-on-front"><i class="fas fa-question-circle  gray"></i></span>
                        </div>
                    </div>
                </div>
            {/if}
        {/capture}

        {* FOOTER *}
        {include file="./includes/footer.html" footer_content=$_footer_content hide_save=true inline}
    </div>

    {* INIT JS *}
    <script>
        ( function($) {
            var sources = [{
                id: "vue-js",
                type: "js",
                uri: "{$wa_app_static_url}js/backend/vue/{if $wa->debug()}vue.global.js{else}vue.global.prod.js{/if}?v={$wa->version()}"
            }, {
                id: "ace-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/ace/ace.js?v=={$wa->version(true)}"
            }, {
                id: "redactor-2-css",
                type: "css",
                uri: "{$wa_url}wa-content/js/redactor/2/redactor.css?v={$wa->version(true)}"
            }, {
                id: "redactor-2-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/redactor/2/redactor.min.js?v={$wa->version(true)}"
            }, {
                id: "wa-editor-2-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/jquery-wa/editor2.js?v={$wa->version(true)}"
            }, {
                id: "wa-shop-products-product-pages-js",
                type: "js",
                uri: "{$wa_app_static_url}js/backend/products/product/product.pages.js?v={$wa->version()}"
            }];

            $.wa.loadSources(sources).then( function() {
                var locale = {$_lang|json_encode};
                if (["ru"].indexOf(locale) >= 0) {
                    $.wa.loadSources([{
                        id: "redactor-2-{$_lang}-js",
                        type: "js",
                        uri: "{$wa_url}wa-content/js/redactor/2/{$_lang}.js?v={$wa->version(true)}"
                    }]).then(init);
                } else {
                    init();
                }
            });

            function init() {
                $.wa_shop_products.init.initProductPagesSection({
                    $wrapper: $("#js-product-pages-section-wrapper"),
                    components: {$_components|json_encode},
                    templates: {$_templates|json_encode},
                    tooltips: {$_tooltips|json_encode},
                    locales: {$_locales|json_encode},
                    urls: {
                        "save"         : "{$wa_app_url}?module=prod&action=pageSave",
                        "move"         : "{$wa_app_url}?module=prod&action=pageMove",
                        "delete"       : "{$wa_app_url}?module=prod&action=pageDelete",
                        "transliterate": "{$wa_app_url}?action=transliterate"
                    },

                    lang: {$_lang|json_encode},
                    pages: {$pages|json_encode},
                    product: {$formatted_product|json_encode},
                    empty_page: {$empty_page|json_encode},
                    can_use_smarty: {$wa->shop->config('can_use_smarty')|json_encode}
                });

                $(document).trigger("wa_product_section_change", "product-pages");
            }
        })(jQuery);
    </script>
</div>