 <div id="csLoadingBar" class="csLoadingBar"></div>
 <div id="csAddon" class="csAddon" style="visibility: hidden;">
  <div ng-app="csApp" ng-controller="csCtrl" id="csCtrl">
    <div id="resultMessage" ng-show="(resultMessage.length > 0)" class="result-message alert {{resultMessageClass}}">
      <i class="{{resultMessageClassExt}}"></i>
      {{resultMessage}}
    </div>
    <div id="ticketsApplication">
     <h4 class="titleWithBorder">{{i18n.ticketsList}}</h4>
     <div class="controls">
      <input ng-model="def" id="search" class="form-control" placeholder="Filter text" ng-change="vm.setPage(vm.pager.currentPage)">
      <select name="chooseFilterSelect" class="filterSelect" id="chooseFilterSelect" ng-model="selectedFilter" ng-change="loadTickets()">
        <option value="myopentickets">{{i18n.myOpenTickets}}</option>
        <option value="allmytickets">{{i18n.allMyTickets}}</option>
        <option data-ng-show="canManage" value="assignedopentickets">{{i18n.myAssignedTickets}}</option>
        <option data-ng-show="canManage" value="allassignedtickets">{{i18n.allAssignedTickets}}</option>
        <option value="allopentickets">{{i18n.allOpenTickets}}</option>
        <option value="alltickets">{{i18n.allTickets}}</option>
        <option value="lastCreated">{{i18n.lastCreated}}</option>
        <option value="lastUpdated">{{i18n.lastUpdated}}</option>
        <option data-ng-show="canManage" value="notAssigned">{{i18n.notAssigned}}</option>
      </select>
      <select data-ng-show="currentSpace == ''" name="chooseSpaceSelect" class="filterSelect" id="chooseSpaceSelect" ng-model="selectedSpace" ng-options="space as space.name for space in spaces track by space.groupId" ng-change="loadTickets()">
        <option value="">{{i18n.allSpaces}}</option>
      </select>
      <select  data-ng-hide="selectedFilter == 'lastCreated'"  name="chooseStatusSelect" class="filterSelect" id="chooseStatusSelect" ng-model="selectedStatusFilter" ng-options="state as i18n[state] for state in allStatusesNames" ng-change="loadTickets()">
        <option value="">{{i18n.all}}</option>
     </select>
      <span>{{tickets.length}} {{i18n.ticketsSelected}}</span>

         <button  ng-if="currentSpace != ''" class="btn btn-primary btn-xlarge" style="float: right;" ng-click="createTicket()">
             <i class="uiIconEcmsAddDocument uiIconWhite"></i>   {{i18n.createNewTicket}}</button>

     </div>
     <br/>
     <table id="ticketsTable" class="table uiGrid table-hover table-striped">
        <thead>
          <tr>
            <th> <a href="#" ng-click="orderByField='title'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.title}}
                <img ng-show="orderByField == 'title' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                <img ng-show="orderByField == 'title' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
            </a></th>
             <th> <a href="#" ng-click="orderByField='type'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.type}}
                 <img ng-show="orderByField == 'type' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'type' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
             <th> <a href="#" ng-click="orderByField='severity'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.ticketseverity}}
                 <img ng-show="orderByField == 'severity' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'severity' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
              <th> <a href="#" ng-click="orderByField='status'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.status}}
                  <img ng-show="orderByField == 'status' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                  <img ng-show="orderByField == 'status' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
              </a></th>
              <th data-ng-show="canManage"> <a href="#" ng-click="orderByField='owner'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.owner}}
                  <img ng-show="orderByField == 'owner' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                  <img ng-show="orderByField == 'owner' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
              </a></th>
              <th data-ng-show="canManage">{{i18n.attachedJira}}</th>
              <th> <a href="#" ng-click="orderByField='creator'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.requestCreator}}
                  <img ng-show="orderByField == 'creator' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                  <img ng-show="orderByField == 'creator' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
              </a></th>
             <th> <a href="#" ng-click="orderByField='startDate'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.requestStartTime}}
                 <img ng-show="orderByField == 'startDate' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'startDate' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
             <th> <a href="#" ng-click="orderByField='updateDate'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.requestUpdateDate}}
                 <img ng-show="orderByField == 'updateDate' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'updateDate' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
             <th data-ng-show="canManage"> <a href="#" ng-click="orderByField='assignee'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.assignee}}
                 <img ng-show="orderByField == 'assignee' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'assignee' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
             <th data-ng-show="canManage">{{i18n.action}}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="ticket in vm.items | filter:def " class="{{ticket.warning}}{{man}}">
            <td class="hide-long-text"><a href="{{ticket.link}}">{{ticket.title}}</a></td>
            <td>
                <span data-ng-hide="editedTicket.id === ticket.id" rel="tooltip" data-toggle="tooltip" data-original-title="{{ticket.type}}"><i ng-class="{uiIconColorWarning: ticket.type == 'INCIDENT', uiIconColorInfo: ticket.type == 'INFORMATION'}"></i></span>
                <select data-ng-show="editedTicket.id === ticket.id" ng-model="ticket.type" name="selectType" id="selectType">
                    <option ng-repeat="selectedType in ticketTypes" value="{{selectedType}}">{{selectedType}}</option>
                </select>
            </td>
            <td>
                <span data-ng-hide="editedTicket.id === ticket.id"  class="sev_{{ticket.severity}}">{{i18n[ticket.severity]}}</span>
                <select data-ng-show="editedTicket.id === ticket.id" ng-model="ticket.severity" name="selectSeverity" id="selectSeverity">
                    <option ng-repeat="selectedSeverity in severities" value="{{selectedSeverity}}">{{selectedSeverity}}</option>
                </select>
            </td>
              <td> <span ng-if="editedTicket.id != ticket.id">{{i18n[ticket.status] || i18n.open}}</span>
                  <select ng-if="editedTicket.id === ticket.id" ng-model="ticket.status" name="status" ng-init="tempStatus=ticket.status">
                      <option ng-repeat="status in allStatusesNames" value="{{status}}">{{i18n[status]}}</option>
                  </select>
              </td>
              <td data-ng-show="canManage">
                  <span data-ng-hide="editedTicket.id === ticket.id" rel="tooltip" data-toggle="tooltip" data-original-title="{{ticket.owner}}">{{ticket.owner}}</span>
                  <select data-ng-show="editedTicket.id === ticket.id" ng-model="ticket.owner" name="selectType" id="selectedOwner">
                      <option ng-repeat="selectedOwner in ownersList" value="{{selectedOwner}}">{{selectedOwner}}</option>
                  </select>
              </td>
              <td data-ng-show="canManage">
                  <span data-ng-hide="editedTicket.id === ticket.id" rel="tooltip" data-toggle="tooltip" data-original-title="{{ticket.attachedJira}}">{{ticket.attachedJira}}</span>
                  <input type="text"  data-ng-show="editedTicket.id === ticket.id" name="attachedJira" id="attachedJira"  ng-model="ticket.attachedJira">
              </td>
              <td>{{ticket.creator}}</td>
            <td>{{ticket.startDate}}</td>
            <td>{{ticket.updateDate}}</td>
            <td data-ng-show="canManage"> <span data-ng-hide="editedTicket.id === ticket.id">{{getDisplayName(ticket.assignee)}}</span>
                <select data-ng-show="editedTicket.id === ticket.id" ng-model="ticket.assignee" name="assignee">
                   <option ng-repeat="assignee in assignees" value="{{assignee.userName}}">{{assignee.displayName}}</option>
                   <option value="{{i18n.empty}}">{{i18n.empty}}</option>
                </select>
            </td>
            <td data-ng-show="canManage" >
                <a data-placement="bottom" rel="tooltip" class="actionIcon" data-ng-hide="editedTicket.id === ticket.id || ticket.type == 'PRODUCT'" data-ng-click="editedTicket = ticket; editTicket(ticket)" data-original-title="Edit" ><i class="uiIconEditStyle uiIconLightGray"></i></a>
                <a data-placement="bottom" role="button" class="actionIcon" data-ng-hide="editedTicket.id === ticket.id"  ng-click="prepareToDelete(ticket)"><i class="uiIconRemoveStyle uiIconLightGray"></i></a>
                <a data-placement="bottom" rel="tooltip" class="actionIcon" data-ng-show="editedTicket.id === ticket.id" data-ng-click="editedTicket = null; saveTicket(ticket, $index)" data-original-title="Edit" ><i class="uiIconSave uiIconLightGray"></i></a>
                <a role="button"  class="actionIcon" data-ng-show="editedTicket.id === ticket.id" data-ng-click="editedTicket = null; cancel()"><i class="uiIcon uiIconStatus-canceled uiIconLightGray"></i></a>
            </td>
          </tr>
        </tbody>
      </table>
  <div id="wrapper">
    <div id="leftcolumn" class="pagination">
        <!-- pager -->
        <ul ng-if="vm.pager.pages.length" class="pagination">
            <li ng-class="{disabled:vm.pager.currentPage === 1}">
                <a ng-click="vm.setPage(1)">First</a>
            </li>
            <li ng-class="{disabled:vm.pager.currentPage === 1}">
                <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
            </li>
            <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
                <a ng-click="vm.setPage(page)">{{page}}</a>
            </li>
            <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
            </li>
            <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
            </li>
        </ul>
    </div>
    </div>
        <!-- Modal -->
        <div class="modal hide fade" id="confirmDelete"  data-backdrop="false">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>{{i18n.confirmDeleteTicketHeader}}</h3>
            </div>
            <div class="modal-body">
                <p>{{i18n.confirmDeleteTicketBody}} {{ticketToDelete.title}} ?</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{i18n.cancel}}</a>
                <a href="#" class="btn btn-primary" ng-click="deleteTicket(ticketToDelete)" data-dismiss="modal" aria-hidden="true">{{i18n.delete}}</a>
            </div>
        </div>
   </div>
 </div>
</div>
