[%
    USE Whostmgr;
    USE JSON;
    USE String;

    SET PAGE_BASE = '/scripts2/updateconf/';

    WRAPPER 'master_templates/master.tmpl'
        header        = locale.maketext('Update Preferences'),
        breadcrumburl = PAGE_BASE,
        base          = PAGE_BASE,
        stylesheets = [ '/templates/common/revised_notices.min.css',
            '/templates/upcp/updateconf.min.css',
            Whostmgr.find_file_url('/templates/update_config/index.min.css') ],
        theme         = 'bootstrap'
        app_key = 'update_preferences';
%]
<div ng-controller="config" class="layout-medium" ng-cloak>

<cp-loading-panel id="loadingPanel" ng-show="loading">
[% locale.maketext('Loading …') %]
</cp-loading-panel>

<section ng-show="!loading">
    <p class="help-block">[%- locale.maketext("You can use this interface to choose when and how the system updates your server. For more information, read our [output,url,_1,documentation about release tiers and updates,target,_2].", 'https://go.cpanel.net/versionformat', 'cpdocs-version-format') %]</p>
    <div id="pageNotices">
        <callout callout-type="warning" callout-heading="[% locale.maketext('Warning') %]" ng-if="!autoUpdateEnabled">
            <p>[% locale.maketext('Automatic updates are disabled for this server. We strongly recommend enabling automatic updates.') %]</p>
            <button id="enable-updates-button" type="button" spinner-id="enable-updates-spinner" cp-action="enableAutomaticUpdates()">
                <i class="fas fa-history fa-flip-horizontal" aria-hidden="true"></i>
                [% locale.maketext('Enable Automatic Updates') %]
            </button>
        </callout>

        [% PROCESS 'warnings/_mysql_version.tmpl' %]

        <div ng-show="saved">
            <div class="alert alert-success" id="saved_message">
                [% locale.maketext('The system saved your settings locally and will apply your changes during the next update. To update now, click [output,url,_1,here,id,updateNowBtn].','../scripts2/upcpform') %]
            </div>
            [%- IF data.cluster_server_info.server_count > 0 && (data.cluster_server_info.remote_saved > 0 || data.cluster_server_info.remote_save_failed > 0) -%]
                [%- notice_type = '' -%]
                [%- notice_content = '' -%]
                [%- notice_additional_class = '' %]
                [%- notice_message = locale.maketext('[numf,_1] of [numf,_2] configuration cluster servers received your updated settings.',data.cluster_server_info.remote_saved,data.cluster_server_info.server_count) -%]
                [%- IF data.cluster_server_info.remote_save_failed > 0 && data.cluster_server_info.remote_saved != 0 -%]
                    [%- notice_type = ' notice-warning'%]
                    [%- notice_content = ' warning-notice-content' -%]
                    [%- notice_additional_class = ' class="warning"'%]
                [%- ELSIF data.cluster_server_info.remote_save_failed > 0 && data.cluster_server_info.remote_saved == 0 -%]
                    [%- notice_type = ' notice-error'%]
                    [%- notice_content = ' error-notice-content' -%]
                    [%- notice_message = locale.maketext('The system couldn’t update your configuration cluster servers’ settings.') -%]
                [%- END -%]
            <div id="clusterServersNotice" class="notice[%- notice_type -%]">
                <div class="notice-content[%- notice_content -%]">
                    [%- notice_message -%]
                    <span id="showHideClusterDetail"[%- notice_additional_class -%]>
                        (<a href="#" id="showClusterServerResults"[%- notice_additional_class -%] ng-model="showClusterServerResults" ng-click="showClusterServerResults = !showClusterServerResults" ng-init="showClusterServerResults = false"><span id="showClusterDetail" ng-show="showClusterServerResults">[%- locale.maketext('Show Details') -%]</span><span class="clusterDetailHidden" id="hideClusterDetail" ng-show="!showClusterServerResults">[%- locale.maketext('Hide Details') -%]</span></a>)
                    </span>
                </div>
                <div id="clusterServerDetail" ng-show="!showClusterServerResults">
                    <table class="table">
                        <thead>
                            <tr>
                                <td>Server</td>
                                <td>Status</td>
                                <td>Message</td>
                            </tr>
                        </thead>
                        <tbody>
                            [%- FOREACH server_result IN data.cluster_server_info.results -%]
                                <tr>
                                    <td>
                                        [%- server_result.server -%]
                                    </td>
                                    <td class="statusCell">
                                        [%- IF server_result.status == 'OK' -%]
                                            <img src="/images/success.png" title="[% locale.maketext('The system successfully updated the server: [_1]', server_result.server) %]">
                                        [%- ELSE -%]
                                            <img src="/images/error.png" title="[% locale.maketext('The system failed to update the server: [_1]', server_result.server) %]">
                                        [%- END -%]
                                    </td>
                                    <td class="messageCell">
                                        [%- IF server_result.exists('message') -%]
                                            [%- server_result.message -%]
                                        [%- END -%]
                                    </td>
                                </tr>
                            [%- END -%]
                        </tbody>
                    </table>
                </div>
            </div>
            [% END -%]
        </div>
        <div class="alert alert-danger" ng-if="saveFailed">
            <div ng-non-bindable>
                [% IF data.save_fail_reason -%]
                    [% locale.maketext('The system failed to save your new settings: [_1]', data.save_fail_reason.html()) %]
                [% ELSE -%]
                    [% locale.maketext('The system failed to save your new settings.') %]
                [% END -%]
            </div>
        </div>
    </div>

[% no_downgrades_title = locale.maketext("You can’t select this tier. It requires a downgrade.") %]
[% tier_doesnt_exist_title = locale.maketext("The selected tier doesn’t exist on the update server.") %]
[% selected_tier_is_downgrade = locale.maketext("The selected tier requires a downgrade.") %]
[% remote_tier_not_found = 0 %]
[% SET staging_dir_placeholder = '.cpanel__' _ data.hostname.replace('[.]', '_') _ '__upcp_staging' %]

[% MACRO extra_status_class(tier) BLOCK %]
    [%- error_class = '' -%]
    [%- IF data.checked == tier && data.is_less_than_current_version(data.version.$tier)-%]
        [%- error_class = 'fas fa-exclamation-circle' -%]
    [%- ELSIF data.custom_tier == tier %]
        [%- IF data.is_less_than_current_version(data.non_named_tiers.$tier) -%]
            [%- error_class = 'fas fa-exclamation-circle' -%]
        [%- END -%]
    [%- ELSIF data.is_less_than_current_version(data.version.$tier) -%]
        [%- error_class = 'fas fa-exclamation-triangle' -%]
    [%- END -%]
    [%- error_class -%]
[% END %]

[% MACRO tier_status_title(tier) BLOCK %]
    [%- msg_title = '' -%]
    [%- IF data.checked == tier && data.is_less_than_current_version(data.version.$tier) -%]
        [%- msg_title = selected_tier_is_downgrade -%]
    [%- ELSIF data.custom_tier == tier -%]
        [%- IF data.is_less_than_current_version(data.non_named_tiers.$tier) -%]
            [%- msg_title = selected_tier_is_downgrade -%]
        [%- END -%]
    [%- ELSIF data.is_less_than_current_version(data.version.$tier) -%]
        [%- msg_title = no_downgrades_title -%]
    [%- END -%]
    [%- msg_title -%]
[% END %]

    <div id="versionDetailsPanel" class="panel panel-primary">
        <div class="panel-heading">
            [% locale.maketext('[asis,cPanel] [output,amp] WHM Version') %]
        </div>
        <div class="panel-body">
            <dl id="current_info">
                <dt>[% locale.maketext("Installed Version:") %]</dt>
                <dd>
                    [% data.current_version %]
                    <div ng-show="isDevVersion" class="font-italic additional-note">
                    [%- locale.maketext("[output,strong,About Development Releases:] Odd-numbered builds are development builds. [output,strong,Don’t] install them in a production environment. They change often and we may not have fully tested or documented them yet.") %]
                    </div>
                </dd>
            </dl>
            <a class="showVersionDetails" href="javascript:void(0);" ng-click="toggleVersionDetails()">
                {{additionalInfoText}} <i class="fas" ng-class="{'fa-chevron-down': !showVersionDetails, 'fa-chevron-up': showVersionDetails}" aria-hidden="true"></i>
            </a>
            <dl class="additional-version-details" ng-if="showVersionDetails">
                <dt>[% locale.maketext("Update From:") %]</dt>
                <dd>[% data.httpupdate %]
                    [% IF data.uses_next %]
                        <div class="font-italic additional-note">
                        [% locale.maketext("[output,strong,Warning:] The server is configured to receive updates from the beta network.") %]
                        </div>
                    [% END %]
                </dd>
                <dt>[% locale.maketext("Current Tier:") %]</dt>
                <dd>[% data.checked FILTER upper %]</dd>
                <dt id="support_ends_lbl" ng-if="customTierExpiration">
                    <span ng-if="customTierIsExpired">[% locale.maketext( "Tier Support Ended:" ) %]</span>
                    <span ng-if="!customTierIsExpired">[% locale.maketext( "Tier Support Ends:" ) %]</span>
                </dt>
                <dd ng-if="customTierExpiration">
                    {{ customTierExpirationLocalized }}
                </dd>
            </dl>
        </div>
    </div>

    <form id="the_form" method="post" action="" ng-submit="submitForm($event)">
        <h3>[% locale.maketext('Release Tier') %]</h3>
        <p>[% locale.maketext("Select the release tier to use for updating [asis,cPanel amp() WHM]. You [output,strong,can’t] downgrade or select tiers that are older than the currently-installed version.") %]</p>
        <table id="tierTable" class="table table-striped tier-table">
            <thead>
                <tr>
                    <th class="col1"></th>
                    <th class="col2">[% locale.maketext('Tier') %]</th>
                    <th class="col3" title="[% locale.maketext("The tier’s current version.") %]">[% locale.maketext('Currently') %]</th>
                    <th></th>
                    <th class="col4">[% locale.maketext('Description') %]</th>
                </tr>
            </thead>
            <tbody>
        <!-- Custom Tier -->
                <tr ng-if="customTier" class="custom-tier-row">
                    <td class="col1"><input id="tier_custom" type="radio" name="CPANEL" ng-model="tierSelection" value="{{customTier}}" /></td>
                    <td class="col2"><label for="tier_custom">[% locale.maketext('Custom') %]</label></td>
                    <td class="col3">
                        <label for="tier_custom">
                            <span ng-if="customTierLatestBuild">
                                {{ customTierLatestBuild.replace('11\.', '') || '[% locale.maketext('Unknown') %]' }}
                            </span>
                            <span ng-if="!customTierLatestBuild" class="text-warning">
                                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                                [% locale.maketext('Unknown') %]
                            </span>
                        </label>
                    </td>
                    <td>
                        <i id="customTierStatus" class="[% extra_status_class('custom') %]" title="[% tier_status_title('custom') %]"></i>
                    </td>
                    <td class="col4"><span class="desc">[% locale.maketext('You configured the server to update to a specific [asis,cPanel amp() WHM] version or build. We [output,strong,strongly] recommend selecting a named release tier.') %]</span></td>
                </tr>
                <!-- This dummy row just helps us work around the .table-striped alternating background colors -->
                <tr ng-if="customTier && hasCustomTierWarning" class="custom-tier-warning-dummy-row"></tr>
                <tr ng-if="customTier && hasCustomTierWarning" class="custom-tier-warning-row">
                    <td></td>
                    <td colspan="4">
                        <cp-alert type="warning" id="custom-tier-expiration-warning" ng-if="customTierExpiredWarningText">
                            {{ customTierExpiredWarningText }}
                        </cp-alert>
                        <cp-alert type="warning" id="custom-tier-invalid-warning" ng-if="customTierInvalidWarningText">
                            {{ customTierInvalidWarningText }}
                        </cp-alert>
                    </td>
                </tr>
        <!-- LTS -->
                <tr>
                    <td class="col1"><input id="tier_lts" [% IF data.is_less_than_current_version(data.version.lts) %]disabled="disabled"[% END %]type="radio" name="CPANEL" ng-model="tierSelection" value="lts" /></td>
                    <td class="col2[% IF data.is_less_than_current_version(data.version.lts) %] grayed[% END %]"><label for="tier_lts">[% locale.maketext('[output,acronym,LTS,Long-Term Support]') %]</label></td>
                    <td class="col3[% IF data.is_less_than_current_version(data.version.lts) %] grayed[% END %]"><label for="tier_lts">{{ tiers.lts.replace('11\.', '') }}</label></td>
                    <td>
                        <i id="ltsTierStatus" class="[% extra_status_class('lts') %]" title="[% tier_status_title('lts') %]"></i>
                    </td>
                    <td class="col4"><span class="desc">[% locale.maketext('A well-tested and proven version that [asis,cPanel], L.L.C. supports for one full year.') %]</span></td>
                </tr>
        <!-- STABLE -->
                <tr>
                    <td class="col1"><input id="tier_stable" [% IF data.is_less_than_current_version(data.version.stable) %]disabled="disabled"[% END %]type="radio" name="CPANEL" ng-model="tierSelection" value="stable" /></td>
                    <td class="col2[% IF data.is_less_than_current_version(data.version.stable) %] grayed[% END %]"><label for="tier_stable">STABLE</label></td>
                    <td class="col3[% IF data.is_less_than_current_version(data.version.stable) %] grayed[% END %]"><label for="tier_stable">{{ tiers.stable.replace('11\.', '') }}</label></td>
                    <td>
                        <i id="stableTierStatus" class="[% extra_status_class('stable') %]" title="[% tier_status_title('stable') %]"></i>
                    </td>
                    <td class="col4"><span class="desc">[% locale.maketext('A version that is feature-complete, fully tested, and is in widespread use.') %]</span></td>
                </tr>
        <!-- RELEASE -->
                <tr>
                    <td class="col1"><input id="tier_release" title="[% locale.maketext('Recommended for most users.') %]" [% IF data.is_less_than_current_version(data.version.release) %]disabled="disabled"[% END %]type="radio" name="CPANEL" ng-model="tierSelection" value="release" /></td>
                    <td class="col2[% IF data.is_less_than_current_version(data.version.release) %] grayed[% END %]">
                        <label for="tier_release" title="[% locale.maketext('Recommended for most users.') %]">
                            RELEASE
                        </label>
                        <div class="label-container">
                            <span class="label label-info">[% locale.maketext('Recommended') %]</span>
                        </div>
                    </td>
                    <td class="col3[% IF data.is_less_than_current_version(data.version.release) %] grayed[% END %]"><label for="tier_release" title="[% locale.maketext('Recommended for most users.') %]">{{ tiers.release.replace('11\.','') }}</td>
                    <td>
                        <i id="releaseTierStatus" class="[% extra_status_class('release') %]" title="[% tier_status_title('release') %]"></i>
                    </td>
                    <td class="col4">
                        <span class="desc">[% locale.maketext('A version that is feature-complete and well tested.') %]</span>
                    </td>
                </tr>
        <!-- CURRENT -->
                <tr>
                    <td class="col1"><input id="tier_current" [% IF data.is_less_than_current_version(data.version.current) %]disabled="disabled" [% END %]type="radio" name="CPANEL" ng-model="tierSelection" value="current" title="[% locale.maketext('Release Candidate') %]" /> </td>
                    <td class="col2[% IF data.is_less_than_current_version(data.version.current) %] grayed[% END %]"><label for="tier_current" title="[% locale.maketext('Release Candidate') %]">CURRENT</label></td>
                    <td class="col3[% IF data.is_less_than_current_version(data.version.current) %] grayed[% END %]"><label for="tier_current" title="[% locale.maketext('Release Candidate') %]">{{ tiers.current.replace('11\.','') }}</td>
                    <td>
                        <i id="currentTierStatus" class="[% extra_status_class('current') %]" title="[% tier_status_title('current') %]"></i>
                    </td>
                    <td class="col4"><span class="desc">[% locale.maketext('A “release candidate” version that is tested but may not be feature-complete.') %]</span></td>
                </tr>
        <!-- EDGE -->
                <tr>
                    <td class="col1"><input id="tier_edge"  title="[%locale.maketext('Not Recommended')%]" type="radio" name="CPANEL" ng-model="tierSelection" value="edge" title="[%locale.maketext('Not Recommended')%]" [% IF data.is_less_than_current_version(data.version.edge) %]disabled="disabled" [% END %]/></td>
                    <td class="col2[% IF data.is_less_than_current_version(data.version.edge) %] grayed[% END %]"><label for="tier_edge" title="[%locale.maketext('Not Recommended')%]">EDGE</label></td>
                    <td class="col3[% IF data.is_less_than_current_version(data.version.edge) %] grayed[% END %]"><label for="tier_edge" title="[%locale.maketext('Not Recommended')%]">{{ tiers.edge.replace('11\.','') }}</td>
                    <td>
                        <i id="edgeTierStatus" class="[% extra_status_class('edge') %]" title="[% tier_status_title('edge') %]"></i>
                    </td>
                    <td class="col4"><span class="desc" title="[%locale.maketext('Not Recommended')%]">[% locale.maketext('A development version for testing [output,strong,only] and [output,strong,not] for production servers.') %]</span></td>
                </tr>
            </tbody>
        </table>
        <hr>
        <div class="selection-wrapper">
            <h3>[% locale.maketext('Security Updates') %]</h3>
            <div class="description">
                [% locale.maketext('The system applies security updates for your current major version as soon as they are available, independent of your normal update schedule. This happens even when updates are otherwise set to manual or disabled. [output,url,_1,Read our documentation,target,_2].', 'https://go.cpanel.net/securityupdates', 'cpdocs-security-updates') %]
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <label for="security_updates">
                        [%# The hidden field must follow the checkbox: the form parser keeps the first value for a repeated name, so a checked box (hourly) wins and an unchecked box leaves only the hidden "never". %]
                        <input type="checkbox" id="security_updates" name="SECURITY_UPDATES" value="hourly" ng-model="securityUpdates" />
                        [% locale.maketext('Automatically apply security updates as soon as they are available.') %]
                        <input type="hidden" name="SECURITY_UPDATES" value="never" />
                    </label>
                </div>
            </div>
        </div>
        <hr>
        <div class="selection-wrapper">
            <h3>[%locale.maketext('Staging Directory')%]</h3>
            <div class="description">
                [% locale.maketext('The staging directory stores update data before the system applies it. Make sure to select a directory with enough disk space.') %]
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                        <label id="staging_label" for="staging_dir">[% locale.maketext('Staging Directory') %]:</label>
                        <span class="info-block">[% locale.maketext('Enter a directory path or select a partition from available partitions. This value defaults to the [asis,/usr/local/cpanel] directory.') %]</span>
                    </div>
                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                        <div class="input-group">
                            <input type="text" class="form-control" id="staging_dir" ng-model="stagingDir" name="staging_dir" ng-change="stagingdirOnChange()"/>
                            <span id="staging_subdir" ng-show="showStagingSubdir" class="input-group-addon">[% '/' _ staging_dir_placeholder _ '/' %]</span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                        <span class="help-block" ng-show="showStagingSubdir">[% locale.maketext('If you choose a custom location, the system stages updates in a “[_1]” subdirectory within your specified directory.', staging_dir_placeholder ) %]</span>
                    </div>
                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <label for="partition-table">[% locale.maketext('Available Partitions:') %]</label>
                    [% IF data.devices.size %]
                        <table id="partition-table" class="table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>[% locale.maketext('Staging Directory') %]</th>
                                    <th>[% locale.maketext('Mount Point') %]</th>
                                    <th>[% locale.maketext('Size') %]</th>
                                    <th>[% locale.maketext('Used') %]</th>
                                    <th>[% locale.maketext('Available') %]</th>
                                    <th>[% locale.maketext('Percent Used') %]</th>
                                    <th>[% locale.maketext('Device') %]</th>
                                </tr>
                            </thead>
                            <tbody>
                            [% FOREACH device = data.devices.sort('mount') %]
                                <tr>
                                    <td>
                                        <input type="radio"
                                            name="staging_selection"
                                            id="selection_[% loop.index() %]"
                                            value="[% device.path.html() %]"
                                            ng-model="stagingSelection"
                                            ng-click="changeStagingDir()" />
                                    </td>
                                    <td>[% device.path.html() %]</td>
                                    <td>[% device.mount.html() %]</td>
                                    <td>[% locale.format_bytes(device.total).html() %]</td>
                                    <td>[% locale.format_bytes(device.used).html() %]</td>
                                    <td>[% locale.format_bytes(device.available).html() %]</td>
                                    <td>[% device.percentage.html() _ '%' %]</td>
                                    <td>[% device.filesystem.html() %]</td>
                                </tr>
                            [% END %]
                            </tbody>
                        </table>
                    [% ELSE %]
                        <p class="text-info">[% locale.maketext("No partitions with sufficient space ([format_bytes,_1]) are available.", data.required_free_space) %]</p>
                    [% END %]
                </div>
            </div>
        </div>
        <input type="submit" name="saveBtn" id="saveBtn" class="btn btn-primary" value="[%locale.maketext('Save')%]" ng-class="{ disabled: isSaving }" />
        [% IF data.cluster_server_info.server_count > 0 %]
        <input type="checkbox" id="cb_clusterservers" ng-model="clusterservers" name="clusterservers" value="1">
        <label for="cb_clusterservers"> [% locale.maketext('Send my settings to all configuration cluster servers.') %]</label>
        [% END %]
    </form>
</section>
</div>
<cp-alert-list></cp-alert-list>
<script>
    var PAGE = {
        preventSumbit: [% (data.custom_tier && data.is_less_than_current_version(data.custom_tier)) ? "true" : "false" %],
        saved: [% data.saved ? "true" : "false" %],
        save_failed: [% data.save_failed ? "true" : "false" %],
        save_fail_reason: [% data.save_fail_reason.json || 'null' %],
        current_major_version: "[% data.current_major_version %]",
        checked: "[% data.checked %]",
        custom_tier: "[% data.custom_tier || '' %]",
        custom_tier_info: [% data.custom_tier_hr.json || '""' %],
        current_version: "[% data.current_version %]",
        required_free_space: [% data.required_free_space %],
        hostname: "[% data.hostname %]",
        flat_tiers: [% data.flat_tiers.json || "null" %],
        upconf: [% upconf.json %],
        partitions: [% data.devices.json %]
    };
</script>
[% PROCESS 'master_templates/cjt2_header_include.tt' %]
[% END %]