 <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 ng-if="currentSpace != ''" class="titleWithBorder pull-left" style="width: 83%">{{i18n.ticketsList}}</h4>
     <h4 ng-if="currentSpace == ''" class="titleWithBorder">{{i18n.ticketsList}}</h4>
    <button  ng-if="currentSpace != ''" class="btn btn-primary btn-xlarge" style="margin: 0px 10px; width: 15%;" ng-click="createTicket()"> <i class="uiIconEcmsAddDocument uiIconWhite"></i>   {{i18n.createNewTicket}}</button>
     <div class="controls" style="float: none;clear:both;">
      <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>
        <option value="customerSpaces">{{i18n.customerSpaces}}</option>
        <option value="internalSpaces">{{i18n.internalSpaces}}</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.allStatus}}</option>
     </select>
     <select  data-ng-show="canManage && selectedFilter != 'assignedopentickets' && selectedFilter != 'allassignedtickets' && selectedFilter != 'notAssigned'" name="chooseAssigneeSelect" class="filterSelect" id="chooseAssigneeSelect" ng-model="selectedAssignee" ng-options="assignee as assignee.displayName for assignee in assignees track by assignee.userName" ng-change="vm.setPage(1)">
        <option value="">{{i18n.allAssignee}}</option>
     </select>
     <select  data-ng-show="canManage" name="chooseOwnerSelect" class="filterSelect" id="chooseOwnerSelect" ng-model="selectedOwner" ng-options="owner as owner for owner in ownersList" ng-change="vm.setPage(1)">
        <option value="">{{i18n.allOwners}}</option>
     </select>
    <select data-ng-show="currentSpace == ''" name="chooseSpaceTypeSelect" class="filterSelect" id="chooseSpaceTypeSelect" ng-model="selectedSpaceType" ng-change="vm.setPage(1)">
         <option value="">{{i18n.allSpaces}}</option>
        <option value=false >{{i18n.customerSpaces}}</option>
        <option value=true >{{i18n.internalSpaces}}</option>
      </select>  
	  <label class="uiCheckbox"><input id="ratedTickets" type="checkbox" class="checkbox" name="ratedTickets" ng-model="ratedTickets" ng-change="vm.setPage(1)"><span>Rated</span></label>
      <span class="resultsLength">{{resultsLength}} {{i18n.ticketsSelected}}</span>
<div class="controlsActions">
      <a data-placement="bottom" rel="tooltip" class="actionIcon" data-original-title="Permalink"  ng-click="getPaermalink()"><i class="uiIconPermalink uiIconLightGray"></i></a>


      <div ng-if="resultsLength > 0 && canManage" excel-export export-data="filtredTickets" file-name="{{fileName}}"></div>

</div>
     </div>
     <br/>
 <div id="exportable" class="table-responsive">
     <table id="ticketsTable" class="table uiGrid table-hover table-striped">
        <thead>
          <tr>
		    <th data-ng-show="canManage"></th>
            <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 data-ng-show="canManage">
			<i ng-if="ticket.customerSatisfied==true" class="uiIconColorValidate"></i>
			<i ng-if="ticket.customerSatisfied==false" class="uiIconColorError"></i>
			</td>
            <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-change="setReason()" 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><a class="avatarXSmall" rel="tooltip" data-toggle="tooltip" data-original-title="{{ticket.creator}}" href="/portal/intranet/profile/{{ticket.creatorId}}"><img class="" alt="ticket.creator" src="/rest/v1/social/users/{{ticket.creatorId}}/avatar"></a></td>
              <td> <span rel="tooltip" data-toggle="tooltip" data-original-title="{{ticket.startDate| date:'d MMM y HH:mm:ss'}}">{{timeDifference(ticket.startDate)}} </span></td>
              <td> <span rel="tooltip" data-toggle="tooltip" data-original-title="{{ticket.updateDate| date:'d MMM y HH:mm:ss'}}">{{timeDifference(ticket.updateDate)}}</span></td>
            <td data-ng-show="canManage"> <span data-ng-hide="editedTicket.id === ticket.id"> <a ng-if="ticket.assignee!=null" class="avatarXSmall" rel="tooltip" data-toggle="tooltip" data-original-title="{{getDisplayName(ticket.assignee)}}"  href="/portal/intranet/profile/{{ticket.assignee}}"><img class="" alt="ticket.assignee" src="/rest/v1/social/users/{{ticket.assignee}}/avatar"> </a></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>
  <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>
            <li>
                <select name="types" id="types" class="pull-right" ng-options="nbPages for nbPages in itemsPerPageSugg" ng-model="pageSize" ng-change="vm.setPage(0)" style="margin-left: 15px;"></select>
            </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>
