<div v-if="servidor_estado">
	<div class="container bloque">
		<!-- Inicio Tablero Principal  -->
		<div class="row">
			<div class="col-sm-12 wow bounceInLeft">
				<div class="ibox-title ibox-title-temperatura" style="background-color:rgb(126, 41, 59);color:white;">
					<div v-if="observaciones[0]">
						<span><img src="imgs/Estacion-Carpincho_blanco.png" width="55" height="55" />
							{{ nombre }} - <b> {{ pais }}, {{ ciudad }}</b>
							<span class="label label-estacion-off pull-right" v-if="tiempo_enlinea > 10">
								<div align="center">Fuera de línea</div>
							</span>
							<span class="label label-estacion-on pull-right" v-if="tiempo_enlinea < 10">
								<div align="center">En línea</div>
							</span></span>
					</div>
					<div v-else>
						<img src="./imgs/reload.gif" width="40" height="40" />
					</div>
				</div>
				<div class="ibox-title" v-if="observaciones[0]">
					<div class="ibox-content" style="padding: 0px 0px 0px 0px;">
						<div class="row">
							<div class="col-sm-4">
								<span class="fas fa-globe"> Último Registro:</span><span> {{ fecha_ultimo_registro }}
								</span><br />
								<span class="fas fa-globe"> Software:</span><span> {{ software }}</span><br />
							</div>
							<div class="col-sm-4">
								<span class="fas fa-globe"> Longitud:</span><span> {{ longitud }} </span><br />
								<span class="fas fa-globe"> Latitud :</span><span> {{ latitud }} </span><br />
							</div>
							<div class="col-sm-4">
								<span class="fas fa-globe"> Distancia:</span><span> {{ distancia }} Km</span><br />
								<span class="fas fa-globe"> Altura:</span><span> {{ altura }} m </span><br />
							</div>
						</div>
						<hr />
						<div class="row" align="left">
							<div class="col-12" v-if="cargando">
								<span class="fas fa-cog fa-spin" style="font-size: 20px;color:green"></span><span
									style="font-size: 16px;color:green">
									<b> Actualizado:</b> {{ uptime }}</span>
							</div>
							<div class="col-12" v-else>
								<span class="fas fa-cog" style="font-size: 20px;color:green"></span><span
									style="font-size: 16px;color:green">
									<b> Actualizado:</b> {{ uptime }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins" v-else>
					<div class="ibox-title ibox-title-humedad pull-center" align="center">
						<img src="./imgs/reload.gif" width="40" height="40" />
					</div>
					<div class="ibox-content"><small>Cargando datos...</small></div>
				</div>
			</div>
		</div>
		<br />
		<div class="row">
			<div class="col-sm-12">
				<div class="row wow slideInRight">
					<div class="col-sm-4 short-div">
						<div class="ibox float-e-margins" v-if="observaciones[0]">
							<div class="ibox-title ibox-title-temperatura">
								<span class="label label-temperatura pull-right">°C</span>
								<h5>Temperatura Externa</h5>
								<img 
								src="./imgs/info-circle-solid.png" 
								data-toggle="tooltip"
								title="Termómetro: es un instrumento de medición de la temperatura."
								width="20"
								height="20" 
								>
							</div>
							<div class="ibox-content">
								<div align="center">
									<span class="fas fa-thermometer-three-quarters" style="font-size: 50px;color:red">
										{{ observaciones[0].temperatura_externa }} °C</span>
									<hr />
									<div class="row">
										<div class="col-6 col-centered" align="center">
											<span class="badge badge-danger maximo" title="Maxíma">
												{{ getMax(estadisticas, "temperatura_externa_max") }} °C</span>
										</div>
										<div class="col-6 col-centered" align="center">
											<span class="badge badge-success minimo" title="Minima">
												{{ getMin(estadisticas, "temperatura_externa_min") }} °C</span>
										</div>
									</div>
								</div>
							</div>
							<br /><br />
							<div class="ibox-title ibox-title-temperatura">
								<span class="label label-lluvia pull-right">%</span>
								<h5>Humedad Externa</h5>
									<img 
									src="./imgs/info-circle-solid.png" 
									data-toggle="tooltip"
									title="Higrómetro: es un instrumento de medición de humedad del aire."
									width="20"
									height="20"
									>
							</div>
							<div class="ibox-content">
								<div align="center">
									<span class="fas fa-tint" style="font-size: 50px;color:blue">
										{{ observaciones[0].humedad_externa }} %</span>
									<hr />
									<div class="row">
										<div class="col-6 col-centered" align="center">
											<span class="badge badge-danger maximo" title="Maxíma">
												{{getMax(estadisticas, "humedad_externa_max")}} %</span>
										</div>
										<div class="col-6 col-centered" align="center">
											<span class="badge badge-success minimo" title="Minima">
												{{getMin(estadisticas, "humedad_externa_min")}} %</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="ibox float-e-margins" v-else>
							<div class="ibox-title ibox-title-humedad pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
					<div class="col-sm-4 short-div">
						<div class="ibox float-e-margins" v-if="observaciones[0]">
							<div class="ibox-title ibox-title-temperatura">
								<span class="label label-viento pull-right">Grados</span>
								<h5>Direccion del Viento</h5>
								<img 
								src="./imgs/info-circle-solid.png" 
								data-toggle="tooltip"
								title="Veleta: es un instrumento de medición de la dirección del viento."
								width="20"
								height="20" 
								>
							</div>
							<div class="ibox-content-bloques">
								<canvas id="grafico_vientos" data-type="radial-gauge"></canvas>
								<br />
								<div align="center">
									<span>Vientos del <b>{{ observaciones[0].viento_direccion_nombre }}</b>
									</span>
								</div>
								<hr />
								<div class="row">
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-info maximo" title="Viento">
											{{ observaciones[0].viento_direccion_nombre }}
										</span>
									</div>
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-info minimo" title="Grados">
											{{ observaciones[0].viento_direccion }}°
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="ibox float-e-margins" v-else>
							<div class="ibox-title ibox-title-humedad pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
					<div class="col-sm-4 short-div">
						<div class="ibox float-e-margins" v-if="observaciones[0]">
							<div class="ibox-title ibox-title-viento-vel">
								<span class="label label-humedad pull-right">Km/h</span>
								<h5>Viento Velocidad</h5>
								<img 
								src="./imgs/info-circle-solid.png" 
								data-toggle="tooltip"
								title="Anemómetro: es un instrumento de medición de la velocidad del viento."
								width="20"
								height="20" 
								>
							</div>
							<div class="ibox-content-bloques">
								<canvas id="grafico_vientos_km" data-type="radial-gauge"></canvas>
								<br />
								<div align="center">
									<span>
										Vientos sostenidos a <b>{{ observaciones[0].viento_velocidad }} Km/h</b>
									</span>
								</div>
								<hr />
								<div class="row">
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-danger maximo" title="Maxíma">
											{{ getMax(estadisticas, "viento_velocidad_max")}} Km/h</span>
									</div>
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-success minimo" title="Minima">
											{{ getMin(estadisticas, "viento_velocidad_max") }} Km/h</span>
									</div>
								</div>
							</div>
						</div>
						<div class="ibox float-e-margins" v-else>
							<div class="ibox-title ibox-title-humedad pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
				</div>
				<div class="row wow bounceInLeft">
					<div class="col-sm-4 short-div">
						<div class="ibox float-e-margins" v-if="observaciones[0]">
							<div class="ibox-title ibox-title-temperatura">
								<span class="label label-temperatura pull-right">Hpa</span>
								<h5>Presion Atmosférica</h5>
								<img 
								src="./imgs/info-circle-solid.png" 
								data-toggle="tooltip"
								title="Barómetro: es un instrumento de medición de la presión atmosférica."
								width="20"
								height="20"
								>
							</div>
							<div class="ibox-content-bloques">
								<canvas id="grafico_presion" data-type="radial-gauge"></canvas>
								<div align="center">
									<span>Presión atmosferica de <b>{{ observaciones[0].presion_absoluta }} Hpa</b>
									</span>
								</div>
								<hr />
								<div class="row">
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-danger maximo" title="Maxíma">
											{{ getMax(estadisticas, "presion_absoluta_max") }} Hpa</span>
									</div>
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-success minimo" title="Minima">
											{{ getMin(estadisticas, "presion_absoluta_max") }} Hpa</span>
									</div>
								</div>
							</div>
						</div>
						<div class="ibox float-e-margins" v-else>
							<div class="ibox-title ibox-title-humedad pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
					<div class="col-sm-4 short-div">
						<div class="ibox float-e-margins" v-if="observaciones[0]">
							<div class="ibox-title ibox-title-temperatura">
								<span class="label label-uv pull-right">Indice UV</span>
								<h5>Rayos Ultravioletas</h5>
								<img 
								src="./imgs/info-circle-solid.png" 
								data-toggle="tooltip"
								title="Heliógrafo: es un instrumento de medición de la insolación recibida en la superficie terrestre."
								width="20"
								height="20" 
								>
							</div>
							<div class="ibox-content-bloques">
								<canvas id="grafico_uv" data-type="linear-gauge"></canvas>
								<div align="center">
									<span>Rayos Ultravioletas de <b>{{ observaciones[0].luxer_uv }} UV</b>
									</span>
								</div>
								<hr />
								<div class="row">
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-danger maximo" title="Maxíma">
											{{ getMax(estadisticas, "luxer_uv_max") }}
											UV</span>
									</div>
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-success minimo" title="Minima">
											{{ getMin(estadisticas, "luxer_uv_min") }}
											UV</span>
									</div>
								</div>
							</div>
						</div>
						<div class="ibox float-e-margins" v-else>
							<div class="ibox-title ibox-title-humedad pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
					<div class="col-sm-4 short-div">
						<div class="ibox float-e-margins" v-if="observaciones[0]">
							<div class="ibox-title ibox-title-luminancia">
								<span class="label label-luminancia pull-right">Klux</span>
								<h5>Iluminacia del Sol</h5>
								<img 
								src="./imgs/info-circle-solid.png" 
								data-toggle="tooltip"
								title="Luxómetro: es un instrumento de medición de iluminancia real de un ambiente."
								width="20"
								height="20"
								>
							</div>
							<div class="ibox-content-bloques">
								<canvas id="grafico_iluminancia" data-type="linear-gauge"></canvas>
								<div align="center">
									<span>La iluminacia actual es de
										<b>{{ observaciones[0].luxer_intencidad }} lux</b></span>
								</div>
								<hr />
								<div class="row">
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-danger maximo" title="Maxíma">
											{{ getMax(estadisticas, "luxer_intencidad_max") }} Lux</span>
									</div>
									<div class="col-6 col-centered" align="center">
										<span class="badge badge-success minimo" title="Minima">
											{{ getMin(estadisticas, "luxer_intencidad_min") }} Lux</span>
									</div>
								</div>
							</div>
						</div>
						<div class="ibox float-e-margins" v-else>
							<div class="ibox-title ibox-title-humedad pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Fin Tablero Principal  -->

		<!-- Inicio Acumulados Lluvia  -->

		<div class="row wow slideInRight">
			<div class="col-sm-3 short-div">
				<div class="ibox float-e-margins" v-if="observaciones[0]">
					<div class="ibox-title ibox-title-temperatura">
						<span class="label label-lluvia pull-right">mm</span>
						<h6>Lluva Hora</h6>
					</div>
					<div class="ibox-content">
						<span>{{ observaciones[0].lluvia_acumulado_hora }}</span>
						<img src="./imgs/lluvia.png" style="height: 15%; width: 15%" />
						<hr />
						<div><small>Lluvia Hora</small>
							<img 
							src="./imgs/info-circle-solid.png" 
							data-toggle="tooltip"
							title="Pluviómetro: es un instrumento de medición de la precipitación o cantidad de agua caída."
							width="20"
							height="20"
							>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins" v-else>
					<div class="ibox-title ibox-title-temperatura pull-center" align="center">
						<img src="./imgs/reload.gif" width="40" height="40" />
					</div>
					<div class="ibox-content"><small>Cargando datos...</small></div>
				</div>
			</div>
			<div class="col-sm-3 short-div">
				<div class="ibox float-e-margins" v-if="observaciones[0]">
					<div class="ibox-title ibox-title-temperatura">
						<span class="label label-lluvia pull-right">mm</span>
						<h6>Lluvia Dia</h6>
					</div>
					<div class="ibox-content">
						<span>{{ observaciones[0].lluvia_acumulado_diario }} </span>
						<img src="./imgs/lluvia.png" style="height: 15%; width: 15%" />
						<hr />
						<div><small>Lluvia Dia</small>
							<img 
							src="./imgs/info-circle-solid.png" 
							data-toggle="tooltip"
							title="Pluviómetro: es un instrumento de medición de la precipitación o cantidad de agua caída."
							width="20"
							height="20" 
							>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins" v-else>
					<div class="ibox-title ibox-title-temperatura pull-center" align="center">
						<img src="./imgs/reload.gif" width="40" height="40" />
					</div>
					<div class="ibox-content"><small>Cargando datos...</small></div>
				</div>
			</div>
			<div class="col-sm-3 short-div">
				<div class="ibox float-e-margins" v-if="observaciones[0]">
					<div class="ibox-title ibox-title-temperatura">
						<span class="label label-lluvia pull-right">mm</span>
						<h6>Lluvia Semanal</h6>
					</div>
					<div class="ibox-content">
						<span>{{ observaciones[0].lluvia_acumulado_semanal }}</span>
						<img src="./imgs/lluvia.png" style="height: 15%; width: 15%" />
						<hr />
						<div><small>Lluvia Semanal</small>
						<img 
						src="./imgs/info-circle-solid.png" 
						data-toggle="tooltip"
						title="Pluviómetro: es un instrumento de medición de la precipitación o cantidad de agua caída."
						width="20"
						height="20"
						>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins" v-else>
					<div class="ibox-title ibox-title-temperatura pull-center" align="center">
						<img src="./imgs/reload.gif" width="40" height="40" />
					</div>
					<div class="ibox-content"><small>Cargando datos...</small></div>
				</div>
			</div>
			<div class="col-sm-3 short-div">
				<div class="ibox float-e-margins" v-if="observaciones[0]">
					<div class="ibox-title ibox-title-temperatura">
						<span class="label label-lluvia pull-right">mm</span>
						<h6>Lluvia Mensual</h6>
					</div>
					<div class="ibox-content">
						<span>{{ observaciones[0].lluvia_acumulado_mensual }}</span>
						<img src="./imgs/lluvia.png" style="height: 15%; width: 15%" />
						<hr />
						<div><small>Lluvia Mensual</small>
						<img 
						src="./imgs/info-circle-solid.png" 
						data-toggle="tooltip"
						title="Pluviómetro: es un instrumento de medición de la precipitación o cantidad de agua caída."
						width="20"
						height="20" 
						>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins" v-else>
					<div class="ibox-title ibox-title-temperatura pull-center" align="center">
						<img src="./imgs/reload.gif" width="40" height="40" />
					</div>
					<div class="ibox-content"><small>Cargando datos...</small></div>
				</div>
			</div>
		</div>
		<!-- Fin Acumulados Lluvia  -->

		<!-- Inicio del Gráfico  -->
		<div class="container d-none d-sm-none d-md-block">
			<!--Esto no es visible para smartphones-->
			<div class="row wow bounceInLeft">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title ibox-title-temperatura">
							<h5>Gráfico interactivo - últimas 24 horas</h5>
						</div>
						<div class="ibox-content" v-show="grafico">
							<canvas id="graph"></canvas>
						</div>
						<div class="ibox float-e-margins" v-if="!grafico">
							<div class="ibox-title ibox-title-temperatura pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando Gráfico...</small></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Fin del Gráfico  -->

		<!-- Inicio del Datatable -->
		<div class="container d-none d-sm-none d-md-block">
			<!--Esto no es visible para smartphones-->
			<div class="row wow slideInRight">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title ibox-title-temperatura">
							<h5>Observaciones Meteorológicas</h5>
						</div>
						<div class="ibox-content" v-show="tabla">
							<table id="dt_principal" class="table table-datatable display" style="width:100%">
								<thead>
									<tr>
										<th>N°</th>
										<th>Fecha_Registro___</th>
										<th>Temperatura</th>
										<th>Humedad</th>
										<th>Velocidad Viento</th>
										<th>Viento Rafagas</th>
										<th>Dirección Viento</th>
										<th>Direccion Nombre</th>
										<th>Presion absoluta</th>
										<th>Presion relativa</th>
										<th>Punto Rocío</th>
										<th>Rayos UV</th>
										<th>Luxer intencidad</th>
										<th>LLuvia hora</th>
										<th>LLuvia diario</th>
										<th>LLuvia semanal</th>
										<th>LLuvia mensual</th>
										<th>LLuvia anual</th>
										<th>Software</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(dato,index) in datatable">
										<td>{{ index }}</td>
										<td>
											{{ moment(dato.fecha).format("DD/MM/YYYY H:mm:ss") }}
										</td>
										<td>{{ dato.temperatura_externa}}º</td>
										<td>{{ dato.humedad_externa }}%</td>
										<td>{{ dato.viento_velocidad }}</td>
										<td>{{ dato.viento_rafagas }}</td>
										<td>{{ dato.viento_direccion }}</td>
										<td>{{ dato.viento_direccion_nombre }}</td>
										<td>{{ dato.presion_absoluta }}</td>
										<td>{{ dato.presion_relativa }}</td>
										<td>{{ dato.punto_de_rocio }}</td>
										<td>{{ dato.luxer_uv }}</td>
										<td>{{ dato.luxer_intencidad }}</td>
										<td>{{ dato.lluvia_acumulado_hora }}</td>
										<td>{{ dato.lluvia_acumulado_diario }}</td>
										<td>{{ dato.lluvia_acumulado_semanal }}</td>
										<td>{{ dato.lluvia_acumulado_mensual }}</td>
										<td>{{ dato.lluvia_acumulado_anual }}</td>
										<td>{{ dato.software }}</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="ibox float-e-margins" v-if="!tabla">
							<div class="ibox-title ibox-title-temperatura pull-center" align="center">
								<img src="./imgs/reload.gif" width="40" height="40" />
							</div>
							<div class="ibox-content"><small>Cargando datos...</small></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Fin del Datatable -->
	</div>
</div>
<div class="ibox float-e-margins" v-if="!servidor_estado">
	<div class="ibox-title ibox-title-temperatura pull-center" align="center">
		<img src="./imgs/reload.gif" width="40" height="40" /> <br />
		<small>Conectando al servidor EmaCenter...</small>
		<div class="ibox-title-temperatura pull-center" align="center" v-if="servidor_error">
			<br />
			<label class="btn btn-danger" onclick="location.reload();">Servidor Fuera de Linea, click si quiere
				intentarlo de nuevo ...</label>
		</div>
	</div>
</div>