<div class="bootstrap-wrapper helpdesk" ng-if="webpartProperties">
	<div ng-if="editMode" class="left-corner">
        <div class="webpart-edit-button-container">
            <button class="editWebpartButton btn" ng-click="vm.editWebpart()" type="button" title='{{"Edit Webpart" | translate}}'>
                <span class="ms-Icon ms-Icon--Edit"></span><span class="editWebpartButtonText">{{"Edit" | translate}}</span>
            </button>
        </div>
		<br /><br />
	</div>

	<!-- Navigation for Supporter -->
	<div ng-if="vm.modeSupporter()" class="helpdeskTabContainer">
		<div class="helpdeskTab" ng-class="vm.view == 'MyActiveTicketsSupporter' || vm.view == 'MyActiveTickets'  ? 'helpdeskTabActive' : ''" ng-click="vm.showMyActiveTicketsSupporter();"><i class="ms-Icon ms-Icon--Home"></i>{{'My Tickets' | translate}}</div>
		<div class="helpdeskTab" ng-class="vm.view == 'TicketsWaitingForUser' ? 'helpdeskTabActive' : ''" ng-click="vm.showTicketsWaitingForUser()"><i class="ms-Icon ms-Icon--TemporaryUser"></i>{{'Waiting for user' | translate}}</div>
		<div class="helpdeskTab" ng-class="vm.view == 'TicketsForDispatch' ? 'helpdeskTabActive' : ''" ng-click="vm.showTicketsForDispatch()"><i class="ms-Icon ms-Icon--Switch"></i>{{'For dispatch' | translate}}</div>
		<div class="helpdeskTab" ng-class="vm.view == 'AllTickets' ? 'helpdeskTabActive' : ''" ng-click="vm.showAllTickets()"><i class="ms-Icon ms-Icon--BulletedList"></i>{{'All tickets' | translate}}</div>
		<button type="button" class="btn btn-primary pull-right" ng-click="vm.showHelpDesksOverview()"><i class="ms-Icon ms-Icon--Add"></i>{{'Create ticket' | translate}}</button>
	</div>

	<!-- Navigation for normal User -->
	<div ng-if="!vm.modeSupporter()" class="helpdeskTabContainer">
		<div class="helpdeskTab" ng-class="vm.view == 'MyActiveTickets' ? 'helpdeskTabActive' : ''" ng-click="vm.showMyActiveTickets();"><i class="ms-Icon ms-Icon--home"></i>{{'My Tickets' | translate}}</div>
		<div class="helpdeskTab" ng-class="vm.view == 'MyCompletedTickets' ? 'helpdeskTabActive' : ''" ng-click="vm.showMyCompletedTickets()"><i class="ms-Icon ms-Icon--MultiSelectMirrored"></i>{{'Closed tickets' | translate}}</div>
		<div class="helpdeskTab" ng-class="vm.view == 'Overview' || vm.view == 'CreateTicket' ? 'helpdeskTabActive' : ''" ng-click="vm.showHelpDesksOverview()"><i class="ms-Icon ms-Icon--Add"></i>{{'Create ticket' | translate}}</div>
	</div>


	<!-- Views -->
	<div ng-switch="vm.view">
		<div ng-switch-when="MyActiveTickets"
			 wizdom365-Helpdesk-Tickets-List
			 refresh-interval="webpartProperties.refreshInterval"
			 template="webpartProperties.overviewTemplateUrl"
			 instance-Ids="vm.instanceIds"
			 mode-Supporter="vm.modeSupporter()"
			 filter='Metadata=W365HD_Status%20neq%20closed&Role=%22User%22%20eq%20{{vm.currentPrincipalId}}'
			 view="vm.view"
			 on-Ticket-Selected="vm.showTicket">
		</div>

		<div ng-switch-when="MyActiveTicketsSupporter">
			<div wizdom365-Helpdesk-Tickets-List
				 refresh-interval="webpartProperties.refreshInterval"
				 template="webpartProperties.overviewTemplateUrl"
				 instance-Ids="vm.instanceIds"
				 mode-Supporter="vm.modeSupporter()"
				 filter='Metadata=W365HD_Status%20neq%20closed&Role=%22Supporter%22%20eq%20{{vm.currentPrincipalId}}'
				 view="vm.view"
				 on-Ticket-Selected="vm.showTicket">
			</div>
			<div wizdom365-Helpdesk-Tickets-List
				 refresh-interval="webpartProperties.refreshInterval"
				 template="webpartProperties.overviewTemplateUrl"
				 instance-Ids="vm.instanceIds"
				 mode-Supporter="vm.modeSupporter()"
				 filter='Metadata=W365HD_Status%20neq%20closed&Role=%22User%22%20eq%20{{vm.currentPrincipalId}}'
				 view="vm.view"
				 on-Ticket-Selected="vm.showTicket">
			</div>
		</div>

		<div ng-switch-when="MyCompletedTickets"
			 wizdom365-Helpdesk-Tickets-List
			 refresh-interval="webpartProperties.refreshInterval"
			 template="webpartProperties.overviewTemplateUrl"
			 instance-Ids="vm.instanceIds"
			 filter='Metadata=W365HD_Status%20eq%20closed&Role=%22User%22%20eq%20{{vm.currentPrincipalId}}'
			 view="vm.view"
			 on-Ticket-Selected="vm.showTicket">
		</div>

		<div ng-switch-when="Overview"
			 wizdom365-Helpdesk-Show-Helpdesks
			 template="webpartProperties.helpdeskOverviewTemplateUrl"
			 instance-Ids="vm.instanceIds"
			 view="vm.view"
			 on-Category-Selected="vm.createTicket">
		</div>

		<div ng-switch-when="TicketsWaitingForUser"
			 wizdom365-Helpdesk-Tickets-List
			 refresh-interval="webpartProperties.refreshInterval"
			 template="webpartProperties.overviewTemplateUrl"
			 instance-Ids="vm.instanceIds"
			 mode-Supporter="vm.modeSupporter()"
			 filter='Metadata=W365HD_Status%20eq%20"waiting+on+user"&Role=%22Supporter%22%20eq%20{{vm.currentPrincipalId}}'
			 view="vm.view"
			 on-Ticket-Selected="vm.showTicket">
		</div>

		<div ng-switch-when="TicketsForDispatch"
			 wizdom365-Helpdesk-Tickets-List
			 refresh-interval="webpartProperties.refreshInterval"
			 template="webpartProperties.overviewTemplateUrl"
			 instance-Ids="vm.instanceIds"
			 mode-Supporter="vm.modeSupporter()"
			 filter='Metadata=W365HD_Status%20eq%20"created"'
			 view="vm.view"
			 on-Ticket-Selected="vm.showTicket">
		</div>

		<div ng-switch-when="AllTickets"
			 wizdom365-Helpdesk-Tickets-List
			 refresh-interval="webpartProperties.refreshInterval"
			 template="webpartProperties.overviewTemplateUrl"
			 instance-Ids="vm.instanceIds"
			 mode-Supporter="vm.modeSupporter()"
			 filter='Metadata=W365HD_Status%20neq%20"closed"'
			 view="vm.view"
			 on-Ticket-Selected="vm.showTicket">
		</div>


		<div ng-switch-when="CreateTicket"
			 wizdom365-Helpdesk-Create-Ticket
			 template="webpartProperties.createTicketTemplateUrl"
			 instance-id="vm.currentInstanceId"
			 category-id="vm.currentCategoryId"
			 view="vm.view"
			 ticket-Created="vm.ticketCreated">
		</div>
		<div ng-switch-when="ShowTicket"
			 wizdom365-Helpdesk-Show-Ticket
			 template="webpartProperties.showTicketTemplateUrl"
			 cancel="vm.showTicketCancel"
			 ticket-Id="vm.currentTicketId"
			 view="vm.view"
			 display-mode="webpartProperties.displayMode">
		</div>

	</div>


</div>




