[%
    USE ExpVar;
    USE Uapi;
    USE JSON;

    SET CPANEL.CPVAR.dprefix = "../";

-%]

[% js_code = PROCESS js_block %]

[%
    SET page_styles_list = ['account_preferences/index.css'];
    SET embeded_styles_list = [];
    SET page_title = locale.maketext("Account Preferences");
%]

[% WRAPPER '_assets/master.html.tt'
    app_key = 'account_preferences'
    page_title= page_title
    page_js = js_code
    include_legacy_stylesheets = 0
    include_legacy_scripts = 0
    include_cjt = 0
    use_master_bootstrap = 0
    focus_feature_search = 0
    page_stylesheets = page_styles_list
    embed_stylesheets = embeded_styles_list
-%]

<div id="body-content" class="body-content">

    <!-- NOTE: leave the alert-group in single quotes -->
    <cp-alert-list alert-group="'account_preferences'"></cp-alert-list>

    <p class="description">
        This feature lets you change your account settings.
    </p>
    <div id="viewContent" class="ng-cloak section" ng-controller="ManageController as preferences" ng-cloak>

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

        <div class="layout-medium" ng-show="!preferences.isLoading">
            <section class="widget">
                <h2 class="widget-title">
                    [% locale.maketext("System Notifications") %]
                </h2>
                <form>
                    <span class="help-block">
                        [% locale.maketext('System notifications show you errors, warnings, and success messages. Click the button to set the location where you want to see system notifications.') %]
                    </span>
                    <section class="inline">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <div class="btn-group" ng-click="preferences.setAlertListPosition()">
                                        <label id="btnTopLeft" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'top-left'">[% locale.maketext('Top Left') %]</label>
                                        <label id="btnTopCenter" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'top-middle'">[% locale.maketext('Top Center') %]</label>
                                        <label id="btnTopRight" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'top-right'">[% locale.maketext('Top Right') %]</label>
                                        <label id="btnBottomLeft" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'bottom-left'">[% locale.maketext('Bottom Left') %]</label>
                                        <label id="btnBottomCenter" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'bottom-middle'">[% locale.maketext('Bottom Center') %]</label>
                                        <label id="btnBottomRight" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'bottom-right'">[% locale.maketext('Bottom Right') %]</label>
                                        <label id="btnCenter" class="btn btn-default" ng-model="preferences.alertList.position" uib-btn-radio="'middle-middle'">[% locale.maketext('Centered') %]</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </form>
            </section>
        </div>
    </div>

    [% PROCESS '_assets/cjt2_header_include.tt' %]

</div><!-- end body-content div -->
[% END #wrapper %]

[% BLOCK js_block %]
<script type="text/javascript">
var PAGE = PAGE || {};
PAGE.securityToken = [% CPANEL.ENV.cp_security_token.json() || "" %];
</script>
[% END #js_block %]