<!--
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
-->
<div class="jobhistory-heading-container">
	<h1 class="job-heading">Jobs | {{this._agentJobInfo?.name}} </h1>
	<div class="codicon in-progress" *ngIf="showProgressWheel()"></div>
</div>

<!-- Back -->
<div class="all-jobs" tabindex="0" (click)="goToJobs()" (keyup.enter)="goToJobs()">
	<div class="back-button-icon" (click)="goToJobs()" (keyup.enter)="goToJobs()"></div>All Jobs
</div>

<!-- Actions -->
<div #actionbarContainer class="agent-actionbar-container"></div>

<!-- Overview  -->
<div class="overview-container">
	<div class="overview-tab" (click)='toggleCollapse()' tabindex="0">
		<input id="accordion" type="checkbox">
		<label for="accordion">
			<div class="resultsViewCollapsible collapsed" (click)='toggleCollapse()'></div>
			Overview
		</label>
		<div class="accordion-content">
			<table align='left'>
				<tr>
					<td id='col1'>
						Category:
					</td>
					<td id='col2'>
						{{this._agentJobInfo?.category}}
					</td>
					<td id='col3'>
						Enabled:
					</td>
					<td id='col4'>
						{{this._agentJobInfo?.enabled}}
					</td>
				</tr>
				<tr>
					<td id='col1'>
						Has Alert:
					</td>
					<td id='col2'>
						{{this._agentJobInfo?.hasTarget}}
					</td>
					<td id='col3'>
						Has Schedule:
					</td>
					<td id='col4'>
						{{this._agentJobInfo?.hasSchedule}}
					</td>
				</tr>
				<tr>
					<td id='col1'>
						Last Run:
					</td>
					<td id='col2'>
						{{this._agentJobInfo?.lastRun}}
					</td>
					<td id='col3'>
						Next Run:
					</td>
					<td id='col4'>
						{{this._agentJobInfo?.nextRun}}
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>

<!-- Job History details -->
<div class='history-details'>
	<!-- Previous run list -->
	<div class="prev-run-list-container" style="min-width: 270px">
		<table *ngIf="_showPreviousRuns === true">
			<tr>
				<td class="date-column">
					<b>Date</b>
				</td>
				<td>
					<b>Status</b>
				</td>
			</tr>
		</table>
		<h3 *ngIf="_showPreviousRuns === false" style="text-align: center">No Previous Runs Available</h3>
		<div class="step-table prev-run-list" style="position: relative; width: 100%">
			<div #table style="position: absolute; width: 100%; height: 100%"></div>
		</div>
	</div>
	<!-- Job Steps -->
	<div class="job-steps" id="job-steps">
		<h1 class="job-heading">
			{{agentJobHistoryInfo?.runDate}}
		</h1>
		<table class="step-list">
			<tr class="step-row">
				<td height="20">
					<h3>Status:</h3>
				</td>
				<td height="20">
					<h3>{{_runStatus}}</h3>
				</td>
			</tr>
			<tr class="step-row">
				<td height="20">
					Job ID:
				</td>
				<td height="20" style="user-select: initial">
					{{agentJobHistoryInfo?.jobId || agentJobInfo?.jobId}}
				</td>
			</tr>
			<tr class="step-row">
				<td height="20">
					Message:
				</td>
				<td height="20" style="user-select: initial">
					{{agentJobHistoryInfo?.message}}
				</td>
			</tr>
			<tr class="step-row">
				<td height="20">
					Duration:
				</td>
				<td height="20">
					{{agentJobHistoryInfo?.runDuration}}
				</td>
			</tr>
			<tr class="step-row">
				<td height="20">
					Server:
				</td>
				<td>
					{{agentJobHistoryInfo?.server}}
				</td>
			</tr>
			<tr class="step-row">
				<td height="20">
					SQL message ID:
				</td>
				<td height="20">
					{{agentJobHistoryInfo?.sqlMessageId}}
				</td>
			</tr>
			<tr class="step-row">
				<td height="20">
					Retries Attempted:
				</td>
				<td height="20">
					{{agentJobHistoryInfo?.retriesAttempted}}
				</td>
			</tr>
		</table>
		<div #jobsteps *ngIf="showSteps === true" style="flex: 1 1 auto; position: relative">
			<jobstepsview-component *ngIf="showSteps === true"></jobstepsview-component>
		</div>
		<h3 *ngIf="showSteps === false">No Steps Available</h3>
	</div>
</div>
