{if !empty($app_themes)}
    {$_used_app_themes = []}
    <div class="s-installed-themes-section" id="js-installed-themes-section">
        <div class="s-themes-list">
            {foreach $routes as $r}
                {$r.theme = $r.theme|default:'default'}
                {$r.theme_mobile = $r.theme_mobile|default:'default'}

                {* because rtrim removes repetitions *}
                {if $r.url && $r.url|substr:-1 == "*"}
                    {$r.url = $r.url|substr:0:-1}
                {/if}

                {if isset($app_themes[$r.theme])}
                    {$_theme = $app_themes[$r.theme]}

                    {$_name = $_theme->getName()}
                    {$_cover_image = $_theme->getCover()}
                    {if empty($_cover_image)}
                        {$_cover_image = "`$wa_url`wa-content/img/design/themes/no-image.png"}
                    {/if}

                    {$_theme_id = $_theme->id}
                    {$_used_app_themes[] = $_theme_id}
                    {$_theme_url = "#/design/theme={$r.theme}&domain={$r._domain}&route={$r._id}&action=settings"}

                    <div class="s-theme-wrapper">
                        <a class="s-image-wrapper" href="{$_theme_url|escape}" title="{sprintf('[s`Configure %s`]', waIdna::dec($r._domain)|cat:'/'|cat:$r.url)}">
                            <img src="{$_cover_image|escape}" alt="{$_name|escape}">
                        </a>
                        <a class="s-iframe-wrapper hidden" href="{$_theme_url|escape}" title="{sprintf('[s`Configure %s`]', waIdna::dec($r._domain)|cat:'/'|cat:$r.url)}">
                            <iframe src="{'//'|cat:waIdna::dec($r._domain)|cat:'/'|cat:$r.url}" onload="this.closest('.s-theme-wrapper').querySelector('.s-image-wrapper').remove();this.closest('.s-iframe-wrapper').classList.remove('hidden');"></iframe>
                        </a>

                        <div class="s-name-wrapper">
                            <a class="s-name" href="{$_theme_url}" title="{sprintf('[s`Configure %s`]', waIdna::dec($r._domain)|cat:'/'|cat:$r.url)}">
                                {waIdna::dec($r._domain)}{if !empty($r.url)}/{$r.url|escape}{/if}
                            </a>
                        </div>
                        <div class="s-statuses">
                            <span class="s-status gray">{$_name|escape}</span>
                        </div>
                    </div>
                {/if}

                {if isset($app_themes[$r.theme_mobile]) && $r.theme != $r.theme_mobile}
                    {$_theme = $app_themes[$r.theme_mobile]}

                    {$_name = $_theme->getName()}
                    {$_cover_image = $_theme->getCover()}
                    {if empty($_cover_image)}
                        {$_cover_image = "`$wa_url`wa-content/img/design/themes/no-image.png"}
                    {/if}

                    {$_theme_id = $_theme->id}
                    {$_used_app_themes[] = $_theme_id}
                    {$_theme_url = "#/design/theme={$r.theme}&domain={$r._domain}&route={$r._id}&action=settings"}

                    <div class="s-theme-wrapper">
                        <a class="s-image-wrapper" href="{$_theme_url|escape}" title="{sprintf('[s`Configure %s`]', waIdna::dec($r._domain)|cat:'/'|cat:$r.url)}">
                            <img src="{$_cover_image|escape}" alt="{$_name|escape}">
                        </a>
                        <a class="s-iframe-wrapper hidden" href="{$_theme_url|escape}" title="{sprintf('[s`Configure %s`]', waIdna::dec($r._domain)|cat:'/'|cat:$r.url)}">
                            <iframe src="{'//'|cat:waIdna::dec($r._domain)|cat:'/'|cat:$r.url}" onload="this.closest('.s-theme-wrapper').querySelector('.s-image-wrapper').remove();this.closest('.s-iframe-wrapper').classList.remove('hidden');"></iframe>
                        </a>

                        <div class="s-name-wrapper">
                            <a class="s-name" href="{$_theme_url}" title="{sprintf('[s`Configure %s`]', waIdna::dec($r._domain)|cat:'/'|cat:$r.url)}">
                                {waIdna::dec($r._domain)}{if !empty($r.url)}/{$r.url|escape}{/if}
                            </a>
                        </div>
                        <div class="s-statuses">
                            <span class="s-status gray">{$_name|escape}</span>
                        </div>
                    </div>
                {/if}

            {/foreach}

            {foreach $app_themes as $_theme}
                {$_theme_id = $_theme->id}
                {if in_array($_theme_id, $_used_app_themes)}{continue}{/if}

                {$_theme_is_trial = ($_theme.type == waTheme::TRIAL)}
                {$_name = $_theme->getName()}
                {$_cover_image = $_theme->getCover()}
                {if empty($_cover_image)}
                    {$_cover_image = "`$wa_url`wa-content/img/design/themes/no-image.png"}
                {/if}


                {$_theme_url = "`$design_url`theme=`$_theme_id`"}

                <div class="s-theme-wrapper{if $_theme_is_trial} is-trial{/if}" data-id="{$_theme_id|escape}" data-load="?module=design&action=theme&theme={$_theme_id|escape}">
                    <a class="s-image-wrapper" href="{$_theme_url|escape}" title="{$_name|escape}">
                        <img src="{$_cover_image|escape}" alt="{$_name|escape}">
                    </a>

                    <div class="s-name-wrapper">
                        <a class="s-name text-gray" href="{$_theme_url}" title="{$_name|escape}">
                            {$_name|escape}
                        </a>
                    </div>
                    <div class="s-statuses">
                        {if isset($used_apps_themes[$_theme_id])}
                            <span class="s-status"><i class="fas fa-check"></i> [`Used by other apps.`]</span>
                        {else}
                            <span class="s-status gray">[`Not in use`]</span>
                        {/if}
                    </div>
                </div>
            {/foreach}
        </div>

        <script>
            ( function($) {
                $("#js-installed-themes-section").on("click", "a", function(event) {
                    event.stopPropagation();
                    let $theme = $(this).closest(".s-theme-wrapper");

                    $("#wa-design-container").load( $theme.data("load"), function (responseText) {
                        try {
                            let response = $.parseJSON(responseText);
                            if (response) {
                                if (response.data && response.data.redirect) {
                                    let href = location.href.replace(/#.*$/, '') + response.data.redirect;
                                    location.replace(href);
                                }
                            }
                        } catch (e) {
                        }
                    });

                    const $preview_dd = $('.js-wa-preview-dd');
                    $preview_dd.find('.wa-theme-preview').removeClass('dropdown-toggle').find('.fa-external-link-alt').removeClass('hidden');
                    $preview_dd.find('.dropdown-body > ul').empty();
                });

                {if $wa->user()->getRights('installer')}
                $(".js-theme-upload-link").on('click', function (e) {
                    e.preventDefault();

                    const $upload_dialog = $("#wa-theme-upload-dialog");

                    $(".wa-theme-dialog-error").text('');

                    $upload_dialog.find("div.loading").hide();
                    let $wrapper = $upload_dialog.clone();
                    $.waDialog({
                        $wrapper,
                        onOpen($dialog, dialog) {
                            let $form = $dialog.find('form:first'),
                                $input_file = $dialog.find("#wa-input-file"),
                                $submit_btn = $dialog.find('[type="submit"]');

                            $dialog.find(".upload-area").waUpload({
                                is_uploadbox: true
                            });

                            $form.on('submit', function (e) {
                                e.preventDefault();
                                $submit_btn.addClass('disabled')
                                $dialog.find("div.loading").show();
                                const formData = new FormData(this);

                                postData($(this).attr('action'), formData)
                                    .then(
                                        (res) => {
                                            try {
                                                let response = $.parseJSON(res);
                                                if (response.status === 'fail') {
                                                    $dialog.find("div.loading").hide();
                                                    $input_file.val('');
                                                    handleError(response, $dialog);
                                                } else if (response.status === 'ok') {
                                                    dialog.close();
                                                    location.reload();
                                                }
                                            }catch (e){
                                                let response = {
                                                    'errors': []
                                                };
                                                let message = $(res).find('h1:first, h2:first');
                                                if (message.length) {
                                                    response.errors.push([message.text()]);
                                                } else {
                                                    response.errors.push(['JavaScript error: ' + e.message]);
                                                }
                                                $dialog.find("div.loading").hide();
                                                $input_file.val('');
                                                handleError(response, $dialog);
                                            }

                                        },
                                        (error) => {
                                            console.error(error)
                                        }
                                    );
                            })
                        }
                    });
                });

                async function postData(url, data) {
                    const response = await fetch(url, {
                        method: 'POST',
                        body: data,
                    });
                    return await response.text();
                }

                function handleError(data, $dialog) {
                    let error = '';
                    if (typeof data.errors == 'string') {
                        error += (error ? '\n' : '') + data.errors;
                    } else {
                        for (let error_item in data.errors) {
                            if(data.errors.hasOwnProperty(error_item)) {
                                error += (error ? '\n' : '') + data.errors[error_item][0];
                            }
                        }
                    }
                    if ($dialog.length) {
                        $dialog.find(".wa-theme-dialog-error").html(error + '<br><br>');
                    } else if ($(".wa-theme-dialog-error:first:visible").length) {
                        $(".wa-theme-dialog-error:first:visible").html('<br><br>' + error + '<br><br>');
                    } else {
                        alert('Error:' + error);
                    }
                    $dialog.find("[type=submit]").removeClass('disabled');
                }
                {/if}
            })(jQuery);
        </script>
    </div>
{if $wa->user()->getRights('installer')}
    <div class="dialog" id="wa-theme-upload-dialog">
        <div class="dialog-background"> </div>
        <form class="dialog-body" id="wa-theme-upload-form" method="post" action="?module=design&amp;action=themeUpload" enctype="multipart/form-data">
            <h3 class="dialog-header">[s`Upload theme`]</h3>
            <div class="dialog-content">
                <span class="wa-theme-dialog-error bold" style="color: red;"></span>
                <p class="small custom-mt-0">[s`Theme must be uploaded as a valid Webasyst design theme archive (.tar.gz archive with theme files and theme.xml manifest file).`]</p>
                <div class="upload-area">
                    <div class="upload">
                        <label class="link">
                            <i class="fas fa-file-upload"></i>
                            <span>[s`Select file`]</span>
                            <input id="wa-input-file" type="file" name="theme_files[]" autocomplete="off">
                        </label>
                    </div>
                </div>
                {$wa->csrf()}
                <div class="loading" style="display:none; margin-top: 10px">
                    <i class="fas fa-spinner fa-spin"></i> [s`Uploading...`]
                </div>
            </div>
            <div class="dialog-footer">
                <input type="submit" class="button green" value="[s`Upload`]">
                <a href="{$themes_url}" class="js-close-dialog button light-gray">[s`Cancel`]</a>
            </div>
        </form>
    </div>
{/if}
{elseif isset($app_themes)}
    <div class="s-installed-themes-section">
        <div class="s-empty-message">[`No installed themes.`]</div>
    </div>
{/if}