[%
    USE Whostmgr;
    USE JSON;

    SET styleSheets = [
            Whostmgr.find_file_url('/templates/cpanel_customization/index.min.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 branding and style that users see when they access cPanel’s [output,strong,Paper Lantern] interface.") %]
[% locale.maketext("You can also use this interface to modify your hosting company’s public contact information.") -%]
</p>

<div id="content"
    ng-controller="BaseController as base"
    class="ng-cloak"
    ng-cloak>
    <callout id="jupiter-customization-info-callout" callout-type="information" callout-heading="[% locale.maketext("Looking to customize cPanel’s Jupiter theme?") %] ">
        <p>[% locale.maketext("Use the [output,url,_1,Customizations API,target,jupiter-customization] to customize cPanel’s [output,strong,Jupiter] theme.", "https://go.cpanel.net/whm-guide-to-cpanel-customization") %] </p>
    </callout>
        <uib-tabset>
            <uib-tab select="go('customize-brand',0)" active="activeTabs[0]">
                <uib-tab-heading>
                    [%# The extra <span> works around a quirk where the spinner will stay in the UI too long. %]
                    <span id="loaderCustomizeBranding" ng-if="loading && activeTabs[0]"><i class="fas fa-spinner fa-spin"></i></span>
                    <span id="tabCustomizeBranding">[% locale.maketext('Customize Branding') %]</span>
                </uib-tab-heading>
            </uib-tab>
            <uib-tab select="go('customize-style',1)" active="activeTabs[1]">
                <uib-tab-heading>
                    <span id="loaderCustomizeStyle" ng-if="loading && activeTabs[1]"><i class="fas fa-spinner fa-spin"></i></span>
                    <span id="tabCustomizeStyle">[% locale.maketext('Customize Style') %]</span>
                </uib-tab-heading>
            </uib-tab>
            <uib-tab select="go('public-contact',2)" active="activeTabs[2]">
                <uib-tab-heading>
                    <span id="loaderPublicContact" ng-if="loading && activeTabs[2]"><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 ng-class="{'view-disabled': loading}" class="animate-view" ng-view>
        </div>
        <div growl></div>
</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 = {
            company_name: [% data.company_name.json || '' %],
            help_url: [% data.help_url.json || '' %],
            documentation_url: [% data.documentation_url.json || '' %],
            company_logo: [% data.company_logo.json || '' %],
            webmail_logo: [% data.webmail_logo.json || '' %],
            favicon: [% data.favicon.json || '' %],
            branding_dir: [% data.branding_dir.json || '' %],
            public_contact: [% data.public_contact.json() %],
            has_root: [% Whostmgr.hasroot() ? 1 : 0 %],
        };
</script>
[% END %]