[%
    USE Whostmgr;
%]

<div ng-show="isInstalled">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-10">
                        <div class="input-group filter-controls">
                            <input  id="txtFilter"
                                    class="form-control"
                                    placeholder="[% locale.maketext('Search') %]"
                                    title="[% locale.maketext('To find vendors quickly, use the Search feature.') %]"
                                    ng-model="meta.filterValue"
                                    autocomplete="off"
                                    auto-focus
                                    ng-keyup="triggerToggleSearch($event)">
                            <span class="input-group-btn">
                                <button id="btnSearch"
                                        type="button"
                                        class="btn btn-default"
                                        ng-click="toggleSearch(true)">
                                    <span class="glyphicon" ng-class="{ 'glyphicon-search': !activeSearch, 'glyphicon-remove': activeSearch }"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <span spinner id="loadingSpinner" class="headerSpinner" title="[% locale.maketext('Loading …') %]"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-9 col-sm-6 text-left-xs text-right-sm form-inline">
            <div class="form-group page-size-container">
                <label for="ddlPageSize">[% locale.maketext('Page Size') %]
                    <select id="ddlPageSize"
                            class="form-control page-size-control"
                            ng-model="meta.pageSize"
                            ng-options="size for size in meta.pageSizes">
                    </select>
                </label>
            </div>
            <uib-pagination id="topPager"
                        ng-change="selectPage()"
                        ng-model="meta.pageNumber"
                        items-per-page="meta.pageSize"
                        total-items="totalItems"
                        max-size="5"
                        direction-links="false"
                        boundary-links="true"
                        first-text="[% locale.maketext('First') %]"
                        last-text="[% locale.maketext('Last') %]"
                        previous-text="[% locale.maketext('Previous') %]"
                        next-text="[% locale.maketext('Next') %]"
                        class="pagination-small">
            </uib-pagination>
        </div>
    </div>
    <table class="table table-striped table-condensed">
        <thead>
            <tr cp-responsive-sort>
                <th class="visible-xs" colspan="7">
                    <cp-responsive-sort-insert id-suffix="vendors" main-label="[% locale.maketext('Sort by') %]"></cp-responsive-sort-insert>
                </th>
                <th class="hidden-xs col-xs-3 vendor-name">
                    <toggle-sort id="sortName"
                                 onsort="sortList"
                                 sort-meta="meta"
                                 sort-field="name">
                        [% locale.maketext('Vendor') %]
                    </toggle-sort>
                </th>
                <th class="hidden-xs col-xs-1 vendor-provider text-center">
                    <toggle-sort id="sortProvider"
                                 onsort="sortList"
                                 sort-meta="meta"
                                 sort-field="cpanel_provided"
                                 sort-reverse>
                        [% locale.maketext('Provider') %]
                    </toggle-sort>
                </th>
                <th class="hidden-xs col-xs-1 vendor-enabled text-center">
                    <toggle-sort id="sortEnabled"
                                 onsort="sortList"
                                 sort-meta="meta"
                                 sort-field="enabled">
                        [% locale.maketext('Enabled') %]
                    </toggle-sort>
                </th>
                <th class="hidden-xs col-xs-1 vendor-updates-enabled text-center">
                    <toggle-sort id="sortUpdatesEnabled"
                                 onsort="sortList"
                                 sort-meta="meta"
                                 sort-field="update">
                        [% locale.maketext('Updates') %]
                    </toggle-sort>
                </th>
                <th class="hidden-xs col-xs-1 vendor-rulesets text-center">
                    <toggle-sort id="sortInUse"
                                 onsort="sortList"
                                 sort-meta="meta"
                                 sort-field="in_use">
                        [% locale.maketext('Sets Included') %]
                    </toggle-sort>
                </th>
                <th class="hidden-xs col-xs-2 vendor-action">
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat-start="vendor in vendors" ng-if="!shouldShowDialog(vendor)" ng-class="{disabled: !isVendorInstalled(vendor)}">
                <td class="vendor-name-desc">
                    <div ng-if="vendor.vendor_url">
                        <a id="nameData{{$index}}" ng-href="{{vendor.vendor_url}}" target="_blank">
                            {{vendor.name}}<span ng-if="vendor.is_pkg">&nbsp;[% locale.maketext("(via pkg)") %]</span> <span class="fas fa-external-link-alt"></span>
                        </a>
                    </div>
                    <div id="nameData{{$index}}" ng-if="!vendor.vendor_url">
                        {{vendor.name}}<span ng-if="vendor.is_pkg">&nbsp;[% locale.maketext("(via pkg)") %]</span>
                    </div>
                    <div id="descData{{$index}}" class="small">{{vendor.description}}<span ng-if="vendor.is_pkg">&nbsp;[% locale.maketext("(via package “[_1]”)", '{{vendor.is_pkg}}') %]</span></div>
                </td>
                <td class="vendor-provider text-center" id="providerData{{$index}}">
                    <span ng-show="vendor.cpanel_provided"><img src="[% MagicRevision('/images/cpanel.png') %]" title="[% locale.maketext('[asis,cPanel] Curated') %]" /></span>
                    <span  ng-hide="vendor.cpanel_provided">[% locale.maketext('Third Party') %]</span>
                </td>
                <td class="vendor-enabled text-center" id="enabledData{{$index}}" ng-show="isVendorInstalled(vendor)">
                    <div class="btn-group btn-group-nowrap">
                        <label  id="btnEnable{{$index}}"
                                class="btn"
                                ng-model="vendor.enabled"
                                uib-btn-radio="true"
                                ng-class="{ 'btn-primary': vendor.enabled, 'btn-default btn-none': !vendor.enabled }"
                                ng-change="setVenderStatus(vendor)">[% locale.maketext('On') %]</label>
                        <label  id="btnDisable{{$index}}"
                                class="btn"
                                ng-model="vendor.enabled"
                                uib-btn-radio="false"
                                ng-class="{ 'btn-negative': !vendor.enabled, 'btn-default btn-none': vendor.enabled }"
                                ng-change="setVenderStatus(vendor)">[% locale.maketext('Off') %]</label>
                    </div>
                </td>
                <td class="vendor-updates-enabled text-center" id="updatesEnabledData{{$index}}" ng-show="isVendorInstalled(vendor)">
                    <div class="btn-group btn-group-nowrap">
                        <label  id="btnEnableUpdates{{$index}}"
                                class="btn"
                                ng-model="vendor.update"
                                uib-btn-radio="true"
                                ng-class="{ 'btn-primary': vendor.update, 'btn-default btn-none': !vendor.update }"
                                ng-disabled="!vendor.enabled"
                                ng-change="setVenderUpdate(vendor)">[% locale.maketext('On') %]</label>
                        <label  id="btnDisableUpdates{{$index}}"
                                class="btn"
                                ng-model="vendor.update"
                                uib-btn-radio="false"
                                ng-class="{ 'btn-negative': !vendor.update, 'btn-default btn-none': vendor.update }"
                                ng-disabled="!vendor.enabled"
                                ng-change="setVenderUpdate(vendor)">[% locale.maketext('Off') %]</label>
                    </div>
                </td>
                <td class="vendor-rulesets text-center" id="rulesetsData{{$index}}" ng-show="isVendorInstalled(vendor)">
                    <span class="in-use-stats" id="in-use-stats{{$index}}" ng-show="vendor.in_use && vendor.in_use > 0">
                        {{vendor.in_use}} / {{vendor.configs.length}}
                    </span>
                    <span id="warning-no-rulesets-enabled{{$index}}" class="alert alert-warning no-rulesets-enabled" ng-show="!vendor.in_use || vendor.in_use === 0">
                        <span class="fas fa-exclamation-triangle fa-lg"></span>
                        <span class="message" title="[% locale.maketext('You have not included any rule sets for this vendor. Enabling or disabling this vendor will not do anything until you have selected at least one rule set for inclusion. Click the edit link and pick the rule sets you want to include.') %]">
                        [% locale.maketext('No rule sets.') %]
                        </span>
                    </span>
                </td>
                <td class="vendor-install-container text-center" id="installNotice{{$index"}} colspan="3" ng-hide="isVendorInstalled(vendor)">
                    <span id="info-vendor-not-installed{{$index}}" class="alert alert-info vendor-not-installed">
                        <span class="fas fa-info-circle fa-lg"></span>
                        <span class="message">[% locale.maketext('This vendor is not installed.') %]</span>
                    </span>
                </td>
                <td class="vendor-action" id="action{{$index}}">
                    <button id="btnEdit{{$index}}"
                            type="button"
                            class="btn-sm btn-link text-left"
                            ng-click="loadEditVendorView(vendor)"
                            ng-show="isVendorInstalled(vendor)">
                        <span class="glyphicon glyphicon-pencil"></span>
                        [% locale.maketext('Edit') %]
                    </button>
                    <button id="btnDelete{{$index}}"
                        type="button"
                        class="btn-sm btn-link text-left"
                        ng-click="showDeleteConfirm(vendor)"
                        ng-show="isVendorInstalled(vendor)">
                        <span class="glyphicon glyphicon-trash"></span>
                        [% locale.maketext('Delete') %]
                    </button>
                    <button id="btnInstall{{$index}}"
                        type="button"
                        class="btn-sm btn-link text-left"
                        ng-click="showInstallConfirm(vendor)"
                        ng-hide="isVendorInstalled(vendor)">
                        <span class="glyphicon glyphicon-plus"></span>
                        [% locale.maketext('Install') %]
                    </button>
                </td>
            </tr>
            <tr ng-repeat-end ng-if="shouldShowDialog(vendor)">
                <td ng-show="canShowDeleteConfirm(vendor)" class="vendor-action-confirm" id="deleteConfirm{{$index}}" colspan="7">
                    <div  class="callout callout-danger">
                        <span class="confirm-message">[% locale.maketext('Are you sure that you wish to remove “[_1]” from your system?', '{{vendor.name}}') %]</span>
                        <div class="form-group action-group">
                            <button id="btnConfirmDelete{{$index}}"
                                type="button"
                                class="btn btn-primary"
                                spinner-id="spinnerDelete{{$index}}"
                                cp-action="delete(vendor)">
                                [% locale.maketext('Delete') %]
                            </button>
                            <button id="btnCancelDelete{{$index}}"
                                type="button"
                                class="btn btn-link"
                                ng-click="hideDeleteConfirm(vendor)"
                                ng-disabled="isDeleting(vendor)">
                                [% locale.maketext('Cancel') %]
                            </button>
                        </div>
                    </div>
                </td>
                <td ng-show="canShowInstallConfirm(vendor)" class="vendor-action-confirm" id="installConfirm{{$index}}" colspan="7">
                    <div  class="callout callout-info">
                        <span class="confirm-message">[% locale.maketext('Are you sure that you wish to install the “[_1]” vendor?', '{{vendor.name}}') %]</span>
                        <div class="form-group action-group">
                            <button id="btnInstallVendor{{$index}}"
                                type="button"
                                class="btn btn-primary"
                                spinner-id="spinnerInstallVendor{{$index}}"
                                cp-action="install(vendor)">
                                [% locale.maketext('Install and Restart [asis,Apache]') %]
                            </button>
                            <button id="btnCancelInstall{{$index}}"
                                type="button"
                                class="btn btn-link"
                                ng-click="hideInstallConfirm(vendor)"
                                ng-disabled="isInstalling(vendor)">
                                [% locale.maketext('Cancel') %]
                            </button>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class="info emptyrow" ng-hide="vendors.length" ng-switch="loading">
                <td colspan="7" id="noRecords" ng-switch-when="true">[% locale.maketext('The system is loading the [asis,ModSecurity] rule vendors.') %]</td>
                <td colspan="7" id="noRecords" ng-switch-default>[% locale.maketext('The [asis,ModSecurity] vendors list is empty.') %]</td>
            </tr>
        </tbody>
    </table>

    <div class="row" ng-show="!dbException">
        <div class="col-xs-12 col-sm-6 text-left-xs text-right-sm form-inline pull-right">
            <div class="form-group page-size-container">
                <label for="ddlBottomPageSize">[% locale.maketext('Page Size') %]
                    <select id="ddlBottomPageSize"
                            class="form-control page-size-control"
                            ng-model="meta.pageSize"
                            ng-options="size for size in meta.pageSizes">
                    </select>
                </label>
            </div>
            <uib-pagination id="bottomPager"
                        ng-change="selectPage()"
                        ng-model="meta.pageNumber"
                        items-per-page="meta.pageSize"
                        total-items="totalItems"
                        max-size="5"
                        direction-links="false"
                        boundary-links="true"
                        first-text="[% locale.maketext('First') %]"
                        last-text="[% locale.maketext('Last') %]"
                        previous-text="[% locale.maketext('Previous') %]"
                        next-text="[% locale.maketext('Next') %]"
                        class="pagination-small">
            </uib-pagination>
        </div>
        <div class="col-xs-12 col-sm-6 pull-left">
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="navigation-controls">
                            <button id="btnTop"
                                    type="button"
                                    class="btn btn-link"
                                    ng-click="scrollTo('top')">
                                <span class="glyphicon glyphicon-chevron-up"></span>
                                [% locale.maketext('Back To Top') %]
                            </button>
                            <button id="addVendorBottom" class="btn btn-default" ng-click="loadView('vendors/add')">[% locale.maketext('Add Vendor') %]</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>