[%
    USE Whostmgr;
    USE JSON;

    SET styleSheets = [
            Whostmgr.find_file_url('/templates/cpanel_customization/index.min.css')
            Whostmgr.find_file_url('/libraries/jquery-minicolors/2.1.7/jquery.minicolors.css')
        ];

    WRAPPER 'master_templates/master.tmpl'
        app_key = 'customization'
        header = locale.maketext("Customization")
        breadcrumburl = '/scripts6/customization',
        base = '/scripts6/customization/',
        stylesheets = styleSheets,
        theme='bootstrap'
        CJT2_EXCLUSIVE = 1;
%]

<p class="description">
[% locale.maketext("Use this interface to customize the cPanel interface.") %]
</p>

<div id="content"
    ng-controller="BaseController as base"
    class="ng-cloak"
    ng-cloak>
    <div class="row">
        <div class="col-xs-12">
            <div class="tab-panel">
                <uib-tabset active="activeTab">
                    [%# JUPITER TABS %]
                    <uib-tab index="3"
                             select="goTo('logos')"
                             data-tab-name="logos"
                             deselect="preventDeselect($event)">
                        <uib-tab-heading>
                            <span id="loaderLogos" ng-if="loading && isActive('logos')"><i class="fas fa-spinner fa-spin"></i></span>
                            <span id="tabLogos">[% locale.maketext('Logos') %]</span>
                        </uib-tab-heading>
                    </uib-tab>
                    <uib-tab index="4"
                             select="goTo('colors')"
                             data-tab-name="colors"
                             deselect="preventDeselect($event)">
                        <uib-tab-heading>
                            <span id="loaderColors" ng-if="loading && isActive('colors')"><i class="fas fa-spinner fa-spin"></i></span>
                            <span id="tabColors">[% locale.maketext('Colors') %]</span>
                        </uib-tab-heading>
                    </uib-tab>
                    <uib-tab  index="5"
                              select="goTo('favicon')"
                              data-tab-name="favicon"
                              deselect="preventDeselect($event)">
                        <uib-tab-heading>
                            <span id="loaderFavIcon" ng-if="loading && isActive('favicon')"><i class="fas fa-spinner fa-spin"></i></span>
                            <span id="tabFavIcon">[% locale.maketext('Favicon') %]</span>
                        </uib-tab-heading>
                    </uib-tab>
                    <uib-tab index="6"
                             select="goTo('links')"
                             data-tab-name="links"
                             deselect="preventDeselect($event)">
                        <uib-tab-heading>
                            <span id="loaderLinks" ng-if="loading && isActive('links')"><i class="fas fa-spinner fa-spin"></i></span>
                            <span id="tabLinks">[% locale.maketext('Links') %]</span>
                        </uib-tab-heading>
                    </uib-tab>

                    [%# COMMON TABS %]
                    <uib-tab index="10"
                             data-tab-name="public-contact"
                             deselect="preventDeselect($event)"
                             select="goTo('public-contact')">
                        <uib-tab-heading>
                            <span id="loaderPublicContact" ng-if="loading && isActive('public-contact')"><i class="fas fa-spinner fa-spin"></i></span>
                            <span id="tabPublicContact">[% locale.maketext('Public Contact') %]</span>
                        </uib-tab-heading>
                    </uib-tab>
                </uib-tabset>
            </div>
        </div>
        <div class="col-xs-12" ng-class="{'view-disabled': loading}" class="animate-view" ng-view>
        </div>
    </div>

    <div growl>
    </div>

    <script type="text/ng-template" id="directives/fileConfirmUploadDelete.phtml">
    [% INSERT 'cpanel_customization/directives/fileConfirmUploadDelete.phtml' %]
    </script>

    <script type="text/ng-template" id="directives/fileUpload.phtml">
    [% INSERT 'cpanel_customization/directives/fileUpload.phtml' %]
    </script>
</div>
[% PROCESS 'master_templates/cjt2_header_include.tt' %]

<script type="text/javascript">
    var PAGE = PAGE || {};

    PAGE.token = "[% cp_security_token %]";
    PAGE.isRoot = [% Whostmgr.ENV.REMOTE_USER == "root" ? "true" : "false" %];
    PAGE.data = {
            // Jupiter branding
            jupiter: [% data.jupiter.json() || {} %],

            // Shared branding
            public_contact: [% data.public_contact.json() %],
            has_root: [% Whostmgr.hasroot() ? 1 : 0 %],
        };
</script>
[% END %]