[%
    USE JSON;
    USE HTTP;

    SET domain = RAW_FORM.domain;
    SET translated_access_type = {
        public  => locale.maketext('public'),
        private => locale.maketext('private'),
    };

    PROCESS '_ajaxapp.tmpl';
-%]

<h2>[% locale.maketext('Current Lists') %]</h2>

    <cp-alert-list></cp-alert-list>

    <section class="sg-example" ng-controller="mainController as main">
        <div class="list-container">
            <div class="row search-page-container ng-cloak">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" id="topSearchBox">
                    <search id="search_box" ng-model="main.model.filterValue"></search>
                </div>
                <div class="col-xs-1">
                    <span spinner
                        id="topSpinner"
                        class="headerSpinner"
                        title="[% locale.maketext('Loading …') %]"></span>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-7 col-lg-7" >
                    <div class="pagination-container hidden-xs hidden-sm">
                        <page-size
                            id="DEFAULT-page-itemsperpage"
                            total-items="main.model.totalResults"
                            show-all="true"
                            ng-model="main.model.pageSize">
                        </page-size>
                        <div id="topPager"
                            uib-pagination
                            ng-if="main.model.pageSize > 0 && main.model.totalResults > main.model.pageSize"
                            ng-change="main.model.selectPage(page)"
                            ng-model="main.model.page"
                            items-per-page="main.model.pageSize"
                            total-items="main.model.totalResults"
                            max-size="4"
                            boundary-links="true"
                            previous-text="<" next-text=">" first-text="<<" last-text=">>"
                            class="pagination-small">
                        </div>
                    </div>
                </div>
            </div>
            <table id="mailingListsTable" class="table table-striped responsive-table ng-cloak" ng-controller="mailingListsController as listsController">
                <thead>
                    <tr>
                        <th ng-repeat="column in listsController.getHeaders()" class="lists-col-header lists-col-header-{{column.key}}">
                            <span toggle-sort
                                id="toggleSort_{{column.key | qaSafeID}}"
                                ng-if="column.key != 'functions'"
                                onsort="main.model.dataSorted"
                                sort-meta="main.model.meta.sort"
                                sort-field="{{column.key}}">{{column.name}}</span>
                            <span ng-if="column.key == 'functions'">{{column.name}}</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        id="datarow_{{list.list | qaSafeID}}"
                        ng-if="listsController.getLists().length" ng-repeat="list in listsController.getLists()" class='lists-row'>
                        <td data-title="{{column.name}}" ng-repeat-start="column in listsController.getHeaders()" ng-if="column.key == 'accesstype'" >
                            <span ng-controller="PrivacyWindowController as privacy"><a
                                 id="datarow_{{list.list | qaSafeID}}_privacy_btn"
                                 href="javascript:void(0)" ng-click="privacy.open(list, $event)" title="[% locale.maketext('Edit this mailing list’s privacy options.') %]" ng-bind="list.getAttribute(column.key)">&nbsp;</a></span>
                        </td>
                        <td data-title="{{column.name}}" ng-if="column.key == 'functions'" class='lists-function-cell'>
                            <a id="datarow_{{list.list | qaSafeID}}_delete_btn" class="btn btn-link" href="dodellist.html?email={{list.list | escape}}">
                                <span class="glyphicon glyphicon-trash"></span>
                                [% locale.maketext('Delete') %]
                            </a>
                            <a id="datarow_{{list.list | qaSafeID}}_password_btn" class="btn btn-link" href="passwdlist.html?email={{list.list | escape}}">
                                <span class="glyphicon glyphicon-pencil"></span>
                                [% locale.maketext('Change Password') %]
                            </a>
                            <a id="datarow_{{list.list | qaSafeID}}_manage_btn" class="btn btn-link" target="_blank" href="loginlist.html?email={{list.list | escape}}&amp;domain={{listsController.domain | escape}}&amp;return_url=[% HTTP.get_client_url().uri() %]">
                                <span class="glyphicon glyphicon-pencil"></span>
                                [% locale.maketext('Manage') %]
                            </a>
                            <a id="datarow_{{list.list | qaSafeID}}_delegate_btn" class="btn btn-link" href="delegatelist.html?email={{list.list | escape}}">
                                <span class="fas fa-users"></span>
                                [% locale.maketext('Delegation') %]
                            </a>
                        </td>
                        <td data-title="{{column.name}}" ng-if="column.key == 'listadmin'">
                            <span
                                ng-bind-html='list.formatListAdmins({maxCols:20,maxItems:3,separator:"<br />"})'
                                title='{{list.formatListAdmins({maxItems:3,separator:"\n"})}}'></span>
                        </td>
                        <td data-title="{{column.name}}" ng-if="column.key != 'accesstype' && column.key != 'functions' && column.key != 'listadmin'" ng-repeat-end class="list-column-{{column.key}}">
                            <p class="truncate" ng-bind="list.getAttribute(column.key)" title="{{list.getAttribute(column.key)}}"></p>
                        </td>
                    </tr >
                    <tr ng-if="!listsController.getLists().length && !main.model.loading" class="info empty-row">
                        <td colspan="{{listsController.getHeaders().length}}">No results found ...</td>
                    </tr>
                </tbody>
            </table>
            <div class="row search-page-container visible-sm-block visible-xs-block hidden-lg hidden-md ng-cloak">
                <div class="col-xs-12 col-sm-12">
                    <div>
                        <div id="bottomPager"
                            uib-pagination
                            ng-if="main.model.pageSize && main.model.totalResults > main.model.pageSize"
                            ng-change="main.model.selectPage(page)"
                            ng-model="main.model.page"
                            items-per-page="main.model.pageSize"
                            total-items="main.model.totalResults"
                            max-size="4"
                            boundary-links="true"
                            previous-text="<" next-text=">" first-text="<<" last-text=">>"
                            class="pagination-small">
                        </div>
                        <div class="col-xs-2">
                            <spinner
                                id="bottomSpinner"
                                class="headerSpinner"
                                title="[% locale.maketext('Loading …') %]"></spinner>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- table -->

    [%

        SET application_dir  = ExpVar.expand('$basedir') _ "/lists/";
        SET file = ExpVar.expand('$basefilename');

        SET requirejs_url_base = '/frontend/' _ CPANEL.CPDATA.RS;

        SET listlists = execute('Email', 'list_lists', {
            domain => domain,
            regex => RAW_FORM.searchregex,
            'api.paginate_start' => 1,
            'api.paginate_size' => CPANEL.CPVAR.itemsperpage,
        } );
    %]

    [% IF page_notice_args -%]
        [% SET PAGE = { notice => page_notice_args } -%]
    [% ELSE -%]
        [% SET PAGE = {
            lists => listlists.data,
            'translated_access_type' => translated_access_type,
        } -%]
    [% END -%]
    <script>
        CPANEL.namespace("CPANEL.PAGE");
        CPANEL.PAGE = [% JSON.stringify(PAGE) -%];
        CPANEL.PAGE.initData = {
            lists: CPANEL.PAGE.lists,
            totalPages: [% listlists.metadata.paginate.total_pages.json() -%],
            totalResults: [% listlists.metadata.paginate.total_results.json() -%],
            resultsPerPage: [% listlists.metadata.paginate.results_per_page.json() -%]
        };
        CPANEL.PAGE.THEME_PATH = [% requirejs_url_base.json() %];
        CPANEL.PAGE.domain = [% domain.json() %];
        window.PAGE = CPANEL.PAGE;
    </script>


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

<script type="text/x-handlebars-template" id="change_list_privacy_template">
    <p>[% locale.maketext('You can adjust this mailing list’s privacy settings below.') %]</p>

    <p>
        <input type="checkbox" id="advertised_checkbox" name="advertised" value="1" {{#if advertised}}checked{{/if}}>
        <label for="advertised_checkbox">[% locale.maketext('Include this list in [asis,Mailman]’s public advertisement of this server’s mailing lists.') %]</label>
    </p>
    <p>
        <input type="checkbox" id="archive_private_checkbox" name="archive_private" value="1" {{#if archive_private}}checked{{/if}}>
        <label for="archive_private_checkbox">[% locale.maketext('Keep this list’s archives private.') %]</label>
    </p>
    <p>
        <input type="radio" id="subscribe_1_radio" name="subscribe_policy" value="1" {{#if subscribe_policy_is_1}}checked{{/if}}>
        <label for="subscribe_1_radio">[% locale.maketext('Require only email confirmation for new subscribers.') %]</label>
        <br>
        <input type="radio" id="subscribe_2_radio" name="subscribe_policy" value="2" {{#if subscribe_policy_is_2}}checked{{/if}}>
        <label for="subscribe_2_radio">[% locale.maketext('Require only administrator approval for new subscribers.') %]</label>
        <br>
        <input type="radio" id="subscribe_3_radio" name="subscribe_policy" value="3" {{#if subscribe_policy_is_3}}checked{{/if}}>
        <label for="subscribe_3_radio">[% locale.maketext('Require both administrator approval and email confirmation for new subscribers.') %]</label>
    </p>

    <p class="row-of-buttons">
        <button type="button" class="set-private-values">[% locale.maketext('Use “Private” Settings') %]</button>
        <button type="reset">[% locale.maketext('Reset Form') %]</button>
    </p>

    <p>[% locale.maketext('This set of privacy configurations constitutes access type: [_1]', '<span class="highlighted" id="form_access_type"></span>') %]</p>
</script>