<div *ngIf="isProcessing" class="process"
	fxLayout="column"
	fxLayoutAlign="space-around center">
	<mat-spinner></mat-spinner>
</div>
<div *ngIf="!isProcessing" class="container"
	fxLayout="column"
	fxLayoutAlign="space-around center">
	<mat-card class="info-card">
		<mat-card-content class="info-content">
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50" style="display: grid; align-items: center;"><b>Processus InterCOM:</b></span>
				<div *ngIf="isAlive" style="display: grid; align-items: center;"><mat-icon style="color: green;">check_circle</mat-icon></div>
				<div *ngIf="!isAlive" style="display: grid; align-items: center;"><mat-icon style="color: red;">cancel</mat-icon></div>
			</div>
		</mat-card-content>
	</mat-card>
	<mat-card class="sys-card">
		<mat-card-header>
			<mat-card-title-group class="info-title">
				<mat-card-title>Système</mat-card-title>
				<img mat-card-sm-image src="/assets/img/linux.png">
			</mat-card-title-group>
		</mat-card-header>
		<mat-card-content class="info-content">
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Architecture:</b></span>
				<span>{{infos.system.arch}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Machine:</b></span>
				<span>{{infos.system.machine}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>OS:</b></span>
				<span>{{infos.system.os}} {{infos.system.version}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Usage CPU:</b></span>
				<span style="color:{{cpu_color}}"><b>{{infos.system.cpu_usage}}%</b></span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Mémoire totale:</b></span>
				<span>{{infos.system.total_mem}} Mo</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Mémoire disponible:</b></span>
				<span>{{infos.system.avail_mem}} Mo</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Mémoire utilisée:</b></span>
				<span>{{infos.system.used_mem}} Mo</span>
				<span style="margin-left: 5px; color:{{mem_color}}">(<b>{{infos.system.percent_used_mem}}%</b>)</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Disque total:</b></span>
				<span>{{infos.system.total_disk}} Mo</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Disque libre:</b></span>
				<span>{{infos.system.free_disk}} Mo</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="50"><b>Disque utilisé:</b></span>
				<span>{{infos.system.used_disk}} Mo</span>
				<span style="margin-left: 5px; color:{{disk_color}}">(<b>{{infos.system.percent_used_disk}}%</b>)</span>
			</div>
		</mat-card-content>
	</mat-card>
	<mat-card class="info-card">
		<mat-card-header>
			<mat-card-title-group class="info-title">
				<mat-card-title>Module GSM</mat-card-title>
				<img mat-card-sm-image src="/assets/img/GNSS_GSM_GPS_rpi.png">
			</mat-card-title-group>
		</mat-card-header>
		<mat-card-content class="info-content">
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="45"><b>Fabricant:</b></span>
				<span>{{infos.manufacturer.identification}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="45"><b>Modèle:</b></span>
				<span>{{infos.manufacturer.model}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="45"><b>Révision matérielle:</b></span>
				<span>{{infos.manufacturer.hardware_rev}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="45"><b>Numéro de série:</b></span>
				<span>{{infos.manufacturer.serial_number}}</span>
			</div>
		</mat-card-content>
	</mat-card>
	<mat-card class="control-card">
		<mat-card-header>
			<mat-card-title-group class="info-title">
				<mat-card-title>Contrôle</mat-card-title>
			</mat-card-title-group>
		</mat-card-header>
		<mat-card-content class="info-content">
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="40"><b>Opérateur:</b></span>
				<span>{{infos.operator}}</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="40"><b>Provider:</b></span>
				<span>{{infos.provider}}</span>
			</div>
			<div fxLayout="row" fxLayoutAlign="none center" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="40"><b>Signal:</b></span>
				<span>{{infos.signal_dbm}}dbm</span>
				<span style="margin-left: 5px; color:{{qos_color}}">(<b>{{infos.signal_qos}}</b>)</span>
			</div>
			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
				<span fxFlex="40" style="display: grid; align-items: center;"><b>carte SIM:</b></span>
				<div *ngIf="infos.sim_inserted" style="display: grid; align-items: center;"><mat-icon style="color: green;">check_circle</mat-icon></div>
				<div *ngIf="!infos.sim_inserted" style="display: grid; align-items: center;"><mat-icon style="color: red;">cancel</mat-icon></div>
			</div>
		</mat-card-content>
	</mat-card>
	<button mat-raised-button color="warn" (click)="onReboot()">Redémarrer le système</button>
</div>
