
<div class="helpdeskTickets">
    <!-- Searchbox start -->
    <div class="input-group input-group-sm helpdeskSearch pull-left" ng-show="vm.modeSupporter && (vm.tickets.length > 0 || vm.searchText)">
        <input type="text" class="form-control"
                ng-model="vm.searchText"
                autocomplete="off"
                ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
                placeholder="{{'Search' | translate}}"
                ng-change="vm.getTickets()"
                />
        <span class="input-group-addon">
            <span ng-show="!vm.searchText" class="glyphicon glyphicon-search"></span>
            <span ng-show="vm.searchText" ng-click="vm.searchText = '';vm.getTickets()" class="glyphicon glyphicon-remove"></span>
        </span>
    </div>
    <!-- Searchbox end -->
    <!-- Checkbox to show closed tickets also -->
    <div class="form-check checkToSeeClosedTickets pull-right" ng-if="vm.modeSupporter && vm.view == 'AllTickets'">
        <div class="checkbox">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" ng-change="vm.toggleShowClosedTickets()" ng-model="vm.showClosedTickets">{{'Also show closed cases' | translate}}
            </label>
            <label ng-click="vm.downloadCsv()"><i class="ms-Icon ms-Icon--Download"></i>{{'Export' | translate}}</label>
        </div>
    </div>
    <div class="helpdeskList" ng-show="vm.tickets.length == 0 && (vm.view == 'AllTickets' || vm.searchText)">
        <table class="table table-striped table-hover table-responsive helpdeskListTable">
            <thead>
                <tr>
                    <th class="text-center">{{'No tickets' | translate}}</th>
                </tr>
            </thead>
        </table>
    </div>
    <div ng-show="vm.tickets.length > 0">
        <!-- Supporter list -->
        <div ng-if="vm.modeSupporter" class="helpdeskSupporter">
            <div class="helpdeskList helpdeskUserTicketsActive">
                <table class="table table-striped table-hover table-responsive helpdeskListTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{"No." | translate}}</th>
                            <th>{{"Title" | translate}}</th>
                            <th>{{"User" | translate}}</th>
                            <th></th>
                            <th>{{"Status" | translate}}</th>
                            <th>{{"Assigned to" | translate}}</th>
                            <th class="hidden-xs hidden-sm">{{"Subject" | translate}}</th>
                            <th class="hidden-xs">{{"Created" | translate}}</th>
                        </tr>
                    </thead>
                    <tbody class="helpdeskListTableBody">
                        <tr ng-repeat="ticket in vm.tickets" ng-click="onTicketSelected(ticket.id);" ng-class="vm.getColumn(ticket, 'W365HD_Status').value == 'Finished' ? 'helpdeskCaseFinished' : ''">
                            <td class="ticketPriority"><i ng-if="ticket.priority.name == 'high'" class="ms-Icon ms-Icon--Important" aria-hidden="true" title="{{'High priority' | translate}}"></i></td>
                            <td class="ticketId">{{ticket.id}}</td>
                            <td class="mainCell ticketTitle">{{ticket.title}}</td>
                            <td class="ticketUser">{{ticket.user}}</td>
                            <td class="ticketStart"><i ng-if="ticket.canStart" ng-click="vm.ticketStart(ticket); $event.stopPropagation();" class="glyphicon glyphicon-chevron-right btn-primary circleIcon" aria-hidden="true" title="{{'Start' | translate}}"></i><img ng-if="ticket.starting" src="/_layouts/15/images/gears_anv4.gif" class="ticketStartingIcon" /></td>
                            <td class="ticketStatus">{{vm.getColumn(ticket, 'W365HD_Status').value | translate}}</td>
                            <td class="ticketAssignedTo">{{ticket.supporter}}</td>
                            <td class="ticketTableCategory hidden-xs hidden-sm"><i class="{{ticket.categoryIcon}} ticketTableCategoryIcon"></i><span ng-show="ticket.rootCategory.id != ticket.category.id">{{ticket.rootCategory.name}} / </span>{{ticket.category.name}}</td>
                            <td class="ticketCreated hidden-xs">{{vm.getColumn(ticket, 'W365HD_Created').value | date:'medium'}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Normal user list -->
        <div class="helpdeskNormalUser" ng-if="!vm.modeSupporter">

            <div class="ticketBox" ng-repeat="ticket in vm.tickets track by ticket.id" ng-click="onTicketSelected(ticket.id);" ng-class="vm.getColumn(ticket, 'W365HD_Status').value == 'Finished' ? 'helpdeskCaseFinished' : ''">
                <div class="ticketBoxTop">
                    <div class="ticketBoxTopIcon"><i class="{{ticket.categoryIcon}}" title="{{ticket.category.name}}"></i></div>
                    <div class="ticketBoxTopText">
                        <div class="ticketId">{{'Ticket #' | translate}}{{ticket.id}}</div>
                        <div class="ticketCategory" title="{{ticket.category.name}}">{{ticket.category.name}}</div>
                    </div>
                </div>
                <div class="ticketBoxContent">
                    <div class="ticketStatusWaitingForSupporter" ng-show="vm.isWaitingOnSupporter(ticket)">{{"Waiting for supporter" | translate}}</div>
                    <div class="ticketStatusWaitingForMe" ng-show="vm.isWaitingOnUser(ticket)">{{"Waiting for me" | translate}}</div>
                    <div class="ticketBoxDateAndTime">
                        <span class="ticketBoxDate"><i class="ms-Icon ms-Icon--Calendar"></i>{{vm.getColumn(ticket, 'W365HD_Created').value | date : 'longDate' }}</span>
                        <span class="ticketBoxTime"><i class="ms-Icon ms-Icon--Recent"></i>{{vm.getColumn(ticket, 'W365HD_Created').value | date : 'shortTime' }}</span>
                    </div>
                    <div class="ticketBoxTitle" title="{{ticket.title}}">{{ticket.title}}</div>
                    <div class="ticketBoxDescription">{{vm.getColumn(ticket, 'W365HD_Description').value}}</div>
                </div>
                <div class="ticketBoxBottom">{{'View' | translate}}</div>
            </div>

        </div>

    </div>
</div>



