{%- extends 'base.html' -%}

{% block head %}
    <meta charset="utf-8">

    <title ng-bind-template="{{ '{{' }}pageTitle{{ '}}' }} - {{ '{{\'BRAND.CONTROL_PANEL.NAME\'|translate}}' }}">Control Panel</title>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="viewport" viewport-initial-scale content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <link rel="shortcut icon" href="{{ getFileUrl(BRAND.getMediaPath('favicon.ico'), true) }}" type="image/x-icon" />
    <link rel="stylesheet" href="{{ getFileUrl('@systemIncludes/css/font-awesome.min.css', true) }}" />
{% endblock %}


{% block css %}
    <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ getFileUrl('@systemAssets/assets.min.css', true) }}" />
    <link rel="stylesheet" href="{{ getFileUrl('@adminStyles/style.css', true) }}" />

<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ getFileUrl('@adminFonts/MotoUiIcons.woff2', true) }}">
<style id="MotoUiIconsFontFace">
    @font-face {
        font-family: MotoUiIcons;
        src: url({{ getFileUrl('@adminFonts/MotoUiIcons.eot', true) }});
        src: url({{ getFileUrl('@adminFonts/MotoUiIcons.eot', true) }}) format('embedded-opentype'),
             url({{ getFileUrl('@adminFonts/MotoUiIcons.woff2', true) }}) format('woff2'),
             url({{ getFileUrl('@adminFonts/MotoUiIcons.woff', true) }}) format('woff'),
             url({{ getFileUrl('@adminFonts/MotoUiIcons.ttf', true) }}) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>
<style id="brandStylesTag">
    .spinner-icon {
        background-image: url({{ getFileUrl(BRAND.getMediaPath('loader.gif'), true) }});
    }
    {% if BRAND.isSetStyle('cp_ui') %}
        :root {
            {{ BRAND.getColorTheme() }}
        }

        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.light.loader.backdrop'), '#loading-bar-spinner') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.light.loader.bar'), '#loading-bar .bar') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.light.dashboard.welcome_text'), '.dashboard-welcome') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.light.dashboard.buttons.base'), '.btn.btn-brand__dashboard') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.light.dashboard.buttons.hover', BRAND.getStyle('cp_ui.themes.light.dashboard.buttons.base')), '.btn.btn-brand__dashboard:hover, .btn.btn-brand__dashboard:active, .btn.btn-brand__dashboard:focus') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.light.dashboard.background'), '.guest-app, .dashboard-block') }}

        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.dark.loader.backdrop'), '.dark-ui #loading-bar-spinner') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.dark.loader.bar'), '.dark-ui #loading-bar .bar') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.dark.dashboard.welcome_text'), '.dark-ui .dashboard-welcome') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.dark.dashboard.buttons.base'), '.dark-ui .btn.btn-brand__dashboard') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.dark.dashboard.buttons.hover', BRAND.getStyle('cp_ui.themes.dark.dashboard.buttons.base')), '.dark-ui .btn.btn-brand__dashboard:hover, .dark-ui .btn.btn-brand__dashboard:active, .dark-ui .btn.btn-brand__dashboard:focus') }}
        {{ StyleHelper.generateLessFromArray(BRAND.getStyle('cp_ui.themes.dark.dashboard.background'), '.dark-ui.guest-app, .dark-ui .dashboard-block') }}

    {% else %}
        {% if BRAND.isSetStyle('cp_loading_backdrop') %}
            #loading-bar-spinner {
                opacity: 1;
                {{ BRAND.getStyle('cp_loading_backdrop') }}
            }
        {% endif %}
        {% if BRAND.isSetStyle('cp_loading_bar') %}
            #loading-bar .bar {
                {{ BRAND.getStyle('cp_loading_bar', 'background: #ff9000; height: 2px;') }}
            }
        {% endif %}
        {% if BRAND.isSetStyle('cp_dashboard.background') %}
            .guest-app, .dashboard-block {
                background-position: 0 0;
                background-repeat: repeat;
                background-size: auto auto;
                {{ BRAND.getStyle('cp_dashboard.background') }}
            }
        {% endif %}
        {% if BRAND.isSetStyle('cp_dashboard.welcome_text') %}
            .dashboard-welcome {
                {{ BRAND.getStyle('cp_dashboard.welcome_text') }}
            }
        {% endif %}
        .btn.btn-brand__dashboard {
            {{ BRAND.getStyle('cp_dashboard.buttons.normal') }}
        }
        .btn.btn-brand__dashboard:hover, .btn.btn-brand__dashboard:active, .btn.btn-brand__dashboard:focus {
            {{ BRAND.getStyle('cp_dashboard.buttons.hover', BRAND.getStyle('cp_dashboard.buttons.normal')) }}
        }
    {% endif %}
</style>
{% endblock %}


{% block js %}
    <script src="{{ getFileUrl('@systemAssets/assets.min.js', true) }}" type="text/javascript" data-cfasync="false"></script>
{% endblock %}

{% block content %}
        <div ng-show="loader.status()">
            <div class="loader"></div>
            {{ loader.message() }}
        </div>
        <div class="moto-ui-browser-not-supported-panel" ng-cloak>
            <span class="moto-ui-browser-not-supported-icon"></span>
            <p class="moto-ui-browser-not-supported-label">{{ '{{::\'COMMON.TEXT.BROWSER_NOT_SUPPORTED_LABEL\'|translate}}' }}</p>
            <p class="moto-ui-browser-not-supported-message">{{ '{{::\'COMMON.TEXT.BROWSER_NOT_SUPPORTED_MESSAGE\'|translate}}' }}</p>
        </div>
        <div class="moto-ui-notification-panel moto-ui-notification-panel_php-warning moto-ui-notification-panel_with-close-button" ng-if="showPHPVersionPanel" ng-cloak>
            <p class="moto-ui-notification-panel-message h6">{{ '{{::\'COMMON.TEXT.PHP_5_6_SUPPORT_EXPIRED_MESSAGE\'|translate}}' }}</p>
            <a href class="moto-ui-notification-panel-close-btn moto-ui-icon" ng-click="hidePHPExpiryPanel()">close</a>
        </div>
        <div class="moto-ui-notification-panel moto-ui-notification-panel_utf8-warning moto-ui-notification-panel_with-close-button" ng-if="showDBEncodingPanel" ng-cloak>
            <p class="moto-ui-notification-panel-message h6">{{ '{{::\'COMMON.TEXT.DB_UTF8_ENCODING_SUPPORT_EXPIRY_MESSAGE\'|translate}}' }}</p>
            <a href class="moto-ui-notification-panel-close-btn moto-ui-icon" ng-click="hideDBEncodingPanel()">close</a>
        </div>
        <div class="moto-ui-notification-panel moto-ui-notification-panel_collect-analytics-warning moto-ui-notification-panel_with-close-button moto-ui-notification-panel_with-buttons" ng-if="showCollectAnalyticsPanel" ng-cloak>
            <p class="moto-ui-notification-panel-message h6" translate>COMMON.TEXT.COLLECT_ANALYTICS_MESSAGE</p>
            <div class="form-control-buttons">
                <button type="button" class="btn btn-success btn-xs" ng-click="hideCollectAnalyticsPanel(true)">{{ '{{::\'COMMON.BUTTON.AGREE\'|translate }}' }}</button>
                <button type="button" class="btn btn-primary btn-xs" ng-click="hideCollectAnalyticsPanel(false)">{{ '{{::\'COMMON.BUTTON.DISAGREE\'|translate }}' }}</button>
            </div>
            <a href class="moto-ui-notification-panel-close-btn moto-ui-icon" ng-click="hideCollectAnalyticsPanel()">close</a>
        </div>
        {% block header %}{% endblock %}
        {% block body %}{% endblock %}
{% endblock %}