<div class="overview">
	<div class="row column">
		<h1>Server overview</h1> <!-- this is default name. Will show custom server name if set -->
	</div>
	<section class="row column">
		<div class="page-header"></div>
	</section>

	<section class="row">
		<div class="column large-8">
			<!-- Server Metadata -->
			<div class="row overview__server-metadata">
				<div class="column large-4">
					<h3 class="bold h4">Server information</h3>
				</div>
				<div class="column large-8">
					<ul class="overview__metadata-wrapper">
						<li class="overview__metadata-block">
							<p class="content-label">Model</p>
							<p class="courier-bold">5150-A0A</p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Manufacturer</p>
							<p class="courier-bold">IBM</p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Firmware version</p>
							<p class="courier-bold">2.3.104497</p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Serial number</p>
							<p class="courier-bold">123456abcd</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- BMC Metadata -->
			<div class="row overview__server-metadata">
				<div class="column large-4">
					<h3 class="bold h4">BMC information</h3>
				</div>
				<div class="column large-8">
					<ul class="overview__metadata-wrapper">
						<li class="overview__metadata-block">
							<p class="content-label">BMC IP address</p>
							<p class="courier-bold">9.3.111.222</p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Hostname</p>
							<p class="courier-bold overview__hostname">bmc401.aus.stg1.global</p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Mac address</p>
							<p class="courier-bold"></p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Firmware</p>
							<p class="courier-bold">4.3.104497</p>
						</li>

					</ul>
				</div>
			</div>
			<!-- Power metadata -->
			<div class="row overview__server-metadata">
				<div class="column large-4">
					<h3 class="bold h4">Power information</h3>
				</div>
				<div class="column large-8">
					<ul class="overview__metadata-wrapper">
						<li class="overview__metadata-block">
							<p class="content-label">Power Consumption</p>
							<p class="courier-bold">000 W</p>
						</li>
						<li class="overview__metadata-block">
							<p class="content-label">Power Cap</p>
							<p class="courier-bold">000 W</p>
						</li>
					</ul>
				</div>
			</div>

			<!-- Power metadata -->
			<div class="row column overview__event-log event-log__events" >
				<h3 class="bold h4">High priority events</h3>

				<!-- TODO: I built event log section so that you could easily just pull in our existing event log template. All display tweaks (such as hiding checkbox) are done via SCSS -->

				<!-- show when there are no critical events from event log -->
				<!-- <p class="disabled">No high priority events</p> -->

				<!-- single event -->
				<a href="#/server-health/event-log"> <!-- this should go to specific event in event log page -->
					<div class="row column event-log__single-event">
						<div class="row">
							<div class="column small-1 large-1 event-log__col-check">
								<label class="control-check">
									<input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
											ng-checked="event.selected"/>
									<span class="control__indicator"></span>
								</label>
							</div>
							<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
								<p class="inline event__id">#00995</p>
								<p class="inline event__priority high-priority">High</p>
								<p class="inline event__severity">emergency</p>
								<p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p>
								<div>
									<p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id dui</p>
								</div>
							</div>
							<div class="column small-1 large-1">
								<button class="accord-trigger"></button>
							</div>
						</div>
					</div>
				</a>
				<!-- single event -->
				<a href="#/server-health/event-log"><!-- this should go to specific event in event log page -->
				<div class="row column event-log__single-event">
					<div class="row">
						<div class="column small-1 large-1 event-log__col-check">
							<label class="control-check">
								<input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
										ng-checked="event.selected"/>
								<span class="control__indicator"></span>
							</label>
						</div>
						<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
							<p class="inline event__id">#00991</p>
							<p class="inline event__priority high-priority">High</p>
							<p class="inline event__severity">emergency</p>
							<p class="inline event__timestamp">02/09/2017 21:00:26 EDT</p>
							<div>
								<p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id dui Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
							</div>
						</div>
						<div class="column small-1 large-1">
							<button class="accord-trigger"></button>
						</div>
					</div>
				</div>
				</a>
			</div>
		</div>
		<div class="column large-4">
			<div class="quick-links" >
				<a href="" class="quick-links__item quick-links__events event-log__events" >
					<span class="event__priority high-priority">High</span><p class="inline quick-links__event-copy">3 High priority events</p><!-- link to event log filtered to the high priority events -->
				</a>
				<div class="quick-links__item no-icon">
					<p class="inline quick-links__label">BMC time</p>
					<p class="inline float-right courier-bold">3:20:12 5/22/2017 UTC</p>
				</div>
				<div class="quick-links__item no-icon">
					<p class="inline quick-links__label">Turn on server indicator</p>
					<div class="toggle inline float-right">
						<input id="toggle__switch-round"
								class="toggle-switch toggle-switch__round-flat"
								type="checkbox"
								tabindex="0"
								ng-click="toggleLED()"
								ng-checked="dataService.LED_state == 'on'"
								ng-disabled="dataService.server_unreachable">
						<label for="toggle__switch-round" tabindex="0">Server indicator is <span class="uid-switch__status">{{dataService.LED_state}}</span></label>
					</div>
				</div>
				<a href="" class="no-icon quick-links__item">
					<p class="inline quick-links__label">Launch Serial Over Lan</p>
					<span class="btn-pop-out inline float-right"></span>
				</a>
				<a href="" class="quick-links__item">
					<p class="inline quick-links__label">Edit network settings</p>
				</a>
			</div>
		</div>
	</section>
</div>