[%
    USE Whostmgr;
    USE JSON;
    WRAPPER 'master_templates/master.tmpl'
        header = locale.maketext('Grant [asis,cPanel] Support Access')
        breadcrumburl = '/scripts7/authorizesupport'
        stylesheets = [
            Whostmgr.find_file_url('/templates/support/authorizesupport.min.css')
        ]
        scripts = [
            Whostmgr.find_file_url('/libraries/jquery/current/jquery.min.js'),
            Whostmgr.find_file_url('/libraries/angularjs/1.4.4/angular.min.js'),
            Whostmgr.find_file_url('/libraries/angularjs/1.4.4/angular-sanitize.min.js'),
            Whostmgr.find_file_url('/libraries/angular-ui-bootstrap/optimized/ui-bootstrap-tpls-1.2.5.min.js'),
            Whostmgr.find_file_url('/templates/support/support.min.js')
        ]
        theme='bootstrap',
        app_key='grant_cpanel_support_access',
        CJT2_EXCLUSIVE = 0; # This application doesn't use the standard RequireJS structure that CJT2_EXCLUSIVE expects
-%]

<div id="content" ng-app="TicketSupportApp" ng-cloak class="ng-cloak">
    [%# Overides the ui-bootstrap-tpls success and danger alerts to match the styleguide %]
    <script id="template/alert/alert.html" type="text/ng-template">
        <div class='alert' ng-class='type && "alert-" + type'>
            <button type='button' class='close' aria-hidden='true' ng-show='type != "danger"' ng-click='close()'>&times;</button>
            <span class='glyphicon glyphicon-ok-sign' ng-show='type == "success"'></span>
            <span class='glyphicon glyphicon-remove-sign' ng-show='type == "danger"'></span>
            <div class='alert-message'>
                <strong ng-show='type == "success"'>[% locale.maketext('Success:') %]&nbsp;</strong>
                <strong ng-show='type == "danger"'>[% locale.maketext('Error:') %]&nbsp;</strong>
                <span ng-transclude></span>
            </div>
        </div>
    </script>

    <div class="description">
        [% locale.maketext('When you [output,url,_1,create a ticket with cPanel support], we generate a unique [asis,SSH] key related to the ticket and your server. This key allows support to access your server. You may use this page to install the [asis,SSH] key that [asis,cPanel] provides or to remove a previously installed key.', '../scripts7/create_support_ticket') %]
    </div>

    <div ng-controller="List">

        <div class="alert alert-info">
            <span class="glyphicon glyphicon-info-sign"></span>
            <div class="alert-message">
                <p>[% locale.maketext('[output,strong,Info]: Make sure that the following [asis,IP] addresses may connect to your server:') %]</p>
                <ul id="cpanel-support-ips">
                [%- FOR ip IN data.access_ips %]
                    <li id="cpanel-ip-[% ip.ip | html -%]">
                        <span id="cpanel-ip-[% ip.ip | html -%]-ip">[% ip.ip | html %]</span> - <span id="cpanel-ip-[% ip.ip | html -%]-desc">[% ip.description | html %]</span>
                    </li>
                [%- END %]
                </ul>
            </div>
        </div>

        <div    class="callout callout-warning"
                ng-show="getAuthCount() && firewallProblem == 'NEED_SETUP' || !getAuthCount() && firewallProblem == 'NEED_UNSETUP'">
            <div class="limit-info" ng-switch="firewallProblem">
                <span ng-switch-when="NEED_SETUP">[% locale.maketext('[output,strong,Warning]: There are open support tickets with access granted on this server, but the firewall rules added during in the grant process are missing.') %]</span>
                <span ng-switch-when="NEED_UNSETUP">[% locale.maketext('[output,strong,Warning]: There are no granted support tickets for this server, but the Revoke process did not remove [asis,cPanel] support’s [asis,IP] addresses from the server’s firewall rules.') %]</span>
            </div>
            <button type="button"
                    id="fix_iptables"
                    class="btn btn-primary{{this.isFixingFirewall ? ' button-loading' : ''}}"
                    title="[% locale.maketext('Update Firewall Configuration') %]"
                    ng-disabled="this.isFixingFirewall"
                    ng-click="fixFirewall()">
                <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                <span class="button-label">[% locale.maketext('Update Firewall Configuration') %]</span>
            </button>
        </div>

    <div ng-controller="List">
        <h2 class="page-header">[% locale.maketext('Grant or Revoke [asis,cPanel] Support’s Access') %]</h2>

        <div class="callout callout-warning" ng-show="getClosedCount()">
            <div class="limit-info">[% locale.maketext('[output,strong,Warning]: When a support ticket has been closed, immediately revoke [asis,cPanel] support’s access to your server.') %]</div>
            <button type="button"
                id="revoke-all-authroizations"
                class="btn btn-primary{{this.isProcessing ? ' button-loading' : ''}}"
                title="[% locale.maketext('Revoke and Remove Closed Tickets') %]"
                ng-disabled="this.isProcessing"
                ng-click="removeFromClosed()">
                    <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                    <span class="button-label">[% locale.maketext('Revoke and Remove Closed Tickets') %]</span>
            </button>
        </div>

        <div ng-show="alert">
            <alert id="list-alert-{{alert.type}}" type="{{alert.type}}" close="alert=undefined"><span ng-bind-html="alert.msg"></span></alert>
        </div>

        <div ng-repeat="ticket in tickets track by ticket._serial">
            <div id="ticket-{{ticket.ticket_id}}-alert-container" ng-show="ticket.alert">
                <alert id="ticket-{{ticket.ticket_id}}-alert" type="{{ticket.alert.type}}" close="ticket.alert=undefined"><span ng-bind-html="ticket.alert.msg"></span></alert>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <span id='ticket-{{ticket.ticket_id}}-status' class="label label-{{ticket.ticket_status == 'OPEN' ? 'success' : 'default'}}">{{ticket.ticket_status}}</span>
                    <span id='ticket-{{ticket.ticket_id}}-id' class="ticket-id"> [% locale.maketext('Ticket ID:') %] {{ticket.ticket_id}}</span>
                    <span id='ticket-{{ticket.ticket_id}}-subject' class="ticket-subject"> {{ticket.ticket_subject}}</span>
                    <button type="button"
                            id="ticket-{{ticket.ticket_id}}-show-all-servers"
                            class="btn btn-xs btn-default"
                            ng-click="ticket.showAllServers = !ticket.showAllServers"
                            ng-show="ticket.unboundServers"
                            ng-switch="ticket.showAllServers"
                            btn-checkbox>
                        <span ng-switch-when="true">[% locale.maketext('Hide Unrelated Servers') %]</span>
                        <span ng-switch-default>[% locale.maketext('Show Unrelated Servers') %]</span>
                    </button>
                </div>
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr ng-show="boundServers.length">
                            <th>[% locale.maketext('Server') %]</th>
                            <th>[% locale.maketext('User') %]</th>
                            <th>[% locale.maketext('SSH Info') %]</th>
                            <th>[% locale.maketext('Granted') %]</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="auth in boundServers = (ticket.servers | boundServerFilter:ticket.showAllServers ) track by auth._serial" id="list-row-{{$index}}" class="auth-row">
                            <td class="server-id">{{auth.server_name && auth.server_num + " - " + auth.server_name || auth.server_num}}</td>
                            <td class="ssh-username">{{auth.ssh_username}}</td>
                            <td class="ssh-info">{{auth.ssh_ip}}:{{auth.ssh_port}}</td>
                            <td id="auth-{{ticket.ticket_id}}-{{auth.server_num}}" class="ssh-grant-time">
                                <span ng-if="auth.bound && auth.auth_time" title="{{auth.auth_time * 1000 | date:'medium'}}">{{ auth.auth_time | fromNow }}</span>
                                <span ng-if="auth.bound && !auth.auth_time">[% locale.maketext('Not Granted') %]</span>
                                <span ng-if="!auth.bound">[% locale.maketext('Not Applicable') %]</span>
                            </td>
                            <td id="sshtest-{{ticket.ticket_id}}-{{auth.server_num}}" class="ssh-status" ng-switch="auth.ssh_test_result">
                                <div class="status-success" ng-switch-when="SUCCESS">
                                    <span class="glyphicon glyphicon-ok"></span>
                                    <span class="status-message">[% locale.maketext('Success') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="TIMEOUT">
                                    <span class="glyphicon glyphicon-time"></span>
                                    <span class="status-message">[% locale.maketext('Timeout') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="TICKET_SYSTEM_TIMEOUT">
                                    <span class="glyphicon glyphicon-time"></span>
                                    <span class="status-message">[% locale.maketext('Ticket System Timeout') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="UNKNOWN">
                                    <span class="glyphicon glyphicon-question-sign"></span>
                                    <span class="status-message">[% locale.maketext('Unknown') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="UNREACHABLE">
                                    <span class="glyphicon glyphicon-signal"></span>
                                    <span class="status-message">[% locale.maketext('Unreachable') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="REFUSED">
                                    <span class="glyphicon glyphicon-ban-circle"></span>
                                    <span class="status-message">[% locale.maketext('Refused') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="PROTOCOL">
                                    <span class="glyphicon glyphicon-link"></span>
                                    <span class="status-message">[% locale.maketext('Protocol') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="AUTH">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    <span class="status-message">[% locale.maketext('Authentication') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="ENVIRONMENT">
                                    <span class="glyphicon glyphicon-usd"></span>
                                    <span class="status-message">[% locale.maketext('Environment') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="ESCALATE">
                                    <span class="glyphicon glyphicon-chevron-up"></span>
                                    <span class="status-message">[% locale.maketext('Escalate') %]</span>
                                </div>
                                <div class="status-failure" ng-switch-when="ERROR">
                                    <span class="glyphicon glyphicon-remove-sign"></span>
                                    <span class="status-message">[% locale.maketext('Error') %]</span>
                                </div>
                            </td>
                            <td class="ssh-actions">
                                <button type="button"
                                        id="ssh-test-{{ticket.ticket_id}}-{{auth.server_num}}"
                                        class="btn btn-default{{this.auth.isTesting ? ' button-loading' : ''}}"
                                        title="[% locale.maketext('Test') %]"
                                        ng-show="auth.bound && ticket.ticket_status == 'OPEN' && auth.auth_status == 'AUTHED'"
                                        ng-disabled="this.auth.isTesting || this.auth.isProcessing"
                                        ng-click="ssh_test(auth._index)">
                                    <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                                    <span class="button-label">[% locale.maketext("Test") %]<span>
                                </button>
                                <button type="button"
                                        id="grant-{{ticket.ticket_id}}-{{auth.server_num}}"
                                        class="btn btn-primary{{this.auth.isProcessing ? ' button-loading' : ''}}"
                                        title="[% locale.maketext('Grant') %]"
                                        ng-show="auth.bound && !(auth.auth_status == 'AUTHED' || auth.auth_status == 'EXPIRED')"
                                        ng-disabled="this.auth.isProcessing"
                                        ng-click="grant(auth._index)">
                                    <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                                    <span class="button-label">[% locale.maketext('Grant') %]</span>
                                </button>
                                <button type="button"
                                        id="revoke-{{ticket.ticket_id}}-{{auth.server_num}}"
                                        class="btn btn-primary{{this.auth.isProcessing ? ' button-loading' : ''}}"
                                        title="[% locale.maketext('Revoke') %]"
                                        ng-show="ticket.ticket_status == 'OPEN' && auth.auth_status == 'AUTHED'"
                                        ng-disabled="this.auth.isProcessing"
                                        ng-click="revoke(auth._index)">
                                    <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                                    <span class="button-label">[% locale.maketext("Revoke") %]</span>
                                </button>
                                <button type="button"
                                        id="revoke-remove-{{ticket.ticket_id}}-{{auth.server_num}}"
                                        class="btn btn-primary{{this.auth.isProcessing ? ' button-loading' : ''}}"
                                        title="[% locale.maketext('Revoke and Remove') %]"
                                        ng-show="ticket.ticket_status == 'CLOSED' || ticket.ticket_status == 'UNKNOWN' || auth.auth_status == 'EXPIRED'"
                                        ng-disabled="this.isProcessing || this.auth.isProcessing"
                                        ng-click="revoke(auth._index)">
                                    <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                                    <span class="button-label">[% locale.maketext("Revoke and Remove") %]</span>
                                </button>
                            </td>
                        </tr>
                        <tr class="callout callout-info" ng-hide="ticket.servers.length">
                            <td colspan="5">[% locale.maketext('This ticket has no associated servers.') %]</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="callout callout-info" ng-hide="tickets.length">
            <div class="limit-info">[% locale.maketext('[output,strong,0 Tickets] require authorization.') %]</div>
            <button type="button"
                    id="reload_tickets"
                    class="btn btn-primary{{this.isProcessing ? ' button-loading' : ''}}"
                    title="[% locale.maketext('Reload Tickets') %]"
                    ng-disabled="this.isProcessing"
                    ng-click="load()">
                <span class="glyphicon glyphicon-refresh button-loading-indicator"></span>
                <span class="button-label">[% locale.maketext('Reload Tickets') %]</span>
            </button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var PAGE = PAGE || {};
    PAGE.tickets = [% data.list.json() %];
    PAGE.firewall = [% data.firewall.json() %];
</script>
[% END #wrapper -%]