{% extends 'base.html.twig' %}

{% block body %}
    {% if alerte %}
        <div class="row">
            <div class="col-12">
				<div class="card text-white bg-danger mb-3" style="">
					<div class="card-header">
						<img src="{{ asset('/images/attention.png') }}" width="30" height="30" alt="Attention">
						<strong>  ALERTE METEO  </strong>
						<img src="{{ asset('/images/attention.png') }}" width="30" height="30" alt="Attention">
					</div>
					<div class="card-body">
						{% for al in alerte %}
							<p class="card-text">{{ al.CreatdAt|date("d/m/Y H:i")  }} <strong>{{ al.message }}</strong> </p>
						{% endfor %}
					</div>
				</div>
            </div>
        </div>
    {% endif %}
<div class="container-fluid index">
	<div class="row">
			<div class="col-md-12 col-sm-12 col-lg-12 text-center">
			<div class="card" style="width: auto;">
		  	<div class="card-body">
		    <h5 class="card-title">Bienvenu sur la page web de la station Météo de L'HÔPITAL(57)</h5>
		    <h6 class="card-subtitle mb-2 sm-2 lg-2 text-muted"></h6>
		    <p class="card-text">La station se situe à L'HÔPITAL en Moselle.<br>
				La station météo a était crée avec un Arduino UNO pour plus de détails allez jeter un œil sur la page présentation.<br>
				La station fait une acquisition des données et les envois tous les 30 seconds vers le serveur qui sera utiliser pour l'affichage en dynamique mes aussi pour les stocker toutes les 30 minutes dans une base de données.<br>
				L'affichage des données en direct ce fait via des gauges en JavaScript qui est rafraichi toutes les 30 secondes.<br>
				Il y a aussi la page Historique où l'on peut trouver des graphiques sur 24H très intéressant pour voir l'évolution dans le temps il y aussi un moteur de recherche pour chercher des données a des dates plus précise.<br>
				Le site ainsi que la Station Météo sont toujours en phase de développement donc a fil du temps il y aura encore des évolutions avec l'ajout de nouveau capteur.<br>
				Pour tous les changements à venir toutes les infos seront publier dans la section articles.<br>
				Si vous avez des remarques ou des idées n'hésitez pas a envoyer un message grâce à l'encadrer Contact.<br>
				Bonne visite</p>
		  </div> 
		</div>
	</div>
	</div>
	
	<div class="row donnee_meteo">
		<div class="col-md-12 col-sm-12 col-lg-12">
			<div class="card">
			  <div class="card-header text-center">
			    <h4>Données Météo</h4> 
			  </div>
			  <div class="card-body">
			    <h5 class="card-title text-center">Relevés en direct</h5>
			    	 
	 				<noscript>
					    <h2 style="color:red; text-align:center">&gt;&gt;This pages requires JavaScript enabling in your browser.&lt;&lt;<br>&gt;&gt;Please enable scripting it to enjoy this site at its best.&lt;&lt;</h2>
					</noscript>
					<br>
					<div class="row gauges_index">
						<div class="col-md-2 col-sm-2 col-lg-2"></div>
						<div class="col-md-8 col-sm-8 col-lg-8">
					    <canvas id="canvas_led" width="25" height="25"></canvas>&nbsp;&nbsp;&nbsp;
					    <canvas id="canvas_status" width="550" height="25"></canvas>&nbsp;&nbsp;
					    <canvas id="canvas_timer" width="70" height="25"></canvas>
						</div>
						<div class="col-md-2 col-sm-2 col-lg-2"></div>
					</div>
					<br>
  				<div class="row">
    				<div class="gauge col-md-3 col-sm-3 col-lg-3 center-block" style=float:none;>
      					<div id="tip_0 ">
        					<canvas id="canvas_temp" class="gaugeSizeStd"></canvas>
      					</div>
      						<input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label id="lab_temp1" for="rad_temp1">Outside</label>
      						<input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label>
    					</div>
  					<div class="gauge col-md-3 col-sm-3 col-lg-3 center-block" style=float:none;>
      					<div id="tip_1">
        					<canvas id="canvas_dew" class="gaugeSizeStd"></canvas>
      					</div>
      						<input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>
      						<input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent</label>
      						<br>
      						<input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>
      						<input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>
      						<br>
      						<input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>
    					</div>
    					<div class="gauge col-md-3 col-sm-3 col-lg-3 center-block" style=float:none;>
      						<div id="tip_4">
        						<canvas id="canvas_hum" class="gaugeSizeStd"></canvas>
      						</div>
      							<input id="rad_hum1" type="radio" name="rad_hum" value="out" checked onclick="gauges.doHum(this);"><label id="lab_hum1" for="rad_hum1">Outside</label>
      							<input id="rad_hum2" type="radio" name="rad_hum" value="in" onclick="gauges.doHum(this);"><label id="lab_hum2" for="rad_hum2">Inside</label>
    						</div>
    					<div id="tip_5" class="gauge col-md-3 col-sm-3 col-lg-3 center-block" style=float:none;>
      						<canvas id="canvas_baro" class="gaugeSizeStd"></canvas>
      					</div>

    			</div>
				  <div class="row text-center">
					  <div class="col-md-12 col-sm-12 col-lg-12">
                          <div class="card">
                              <div class="card-header">
                                  Prévision de la station météo
                              </div>
                              <div class="card-body">
								  <div class="row">
									  <div class="col-md-6">
										  <img src="{{ asset('/images/prevision/') }}{{ prevision.1 }}" width=70 height=70 class="text-center" alt="imga_prevision">
									  </div>
									  <div class="col-md-6">
										  <blockquote class="blockquote mb-0">
											  <p>{{ prevision.0 }}</p>
										  </blockquote>
									  </div>
								  </div>
                              </div>
                          </div>
					  </div>
				  </div>
				  <div class="row text-center">
					  <div class="col-md-12 col-sm-12 col-lg-12">
                      	<img src="{{ asset('/images/annimation/') }}{{ lumiere }}" width=100% height=auto class="anim_lumier text-center" alt="animation_lumiere">
					  </div>
				  </div>
  					
  						<h5 class="card-title text-center">Données Météo France</h5><br>
  					
  					<div class="row">		
  						<div class="col-md-6 col-sm-6 col-lg-6 center-block" style=float:none;>
  							<h6>Vigilance Météo en cours</h6><br>
                            <!-- Debut code vignette vigilance départementale  Météo-France -->
                            <iframe src="https://vigilance.meteofrance.fr/fr/widget-vigilance/vigilance-departement/57"  width="302" height="122" frameborder="0">
                            </iframe>
                            <!-- FIN   -->
						</div>
						<div class="col-md-6 col-sm-6 col-lg-6 center-block" style=float:none;>
							<h6>Prévisions Météo France</h6><br>
							<script charset='UTF-8' src='http://www.meteofrance.com/mf3-rpc-portlet/rest/vignettepartenaire/573360/type/VILLE_FRANCE/size/PAYSAGE_VIGNETTE' type='text/javascript'></script>
						</div>
  					</div>
  						<h5 class="card-title text-center">Image satellite Météo</h5><br>
  					<div class="row">
  						<div class="col-md-1 col-sm-1 col-lg-1"></div>
  						<div class="col-md-5 col-sm-5 col-lg-5 center-block" style=float:none;>
  							<a href='http://fr.sat24.com/fr' target='sat24'><image src='http://api.sat24.com/animated/EU/visual/1/Central%20European%20Standard%20Time/4436851' width=280 height=280></image></a>
  						</div>
  						<div class="col-md-5 col-sm-5 col-lg-5 center-block" style=float:none;>
  							<a href='http://fr.sat24.com/fr' target='sat24'><image src='http://api.sat24.com/		crop?type=visual5hdcomplete&lat=49.1621&lon=6.7468&width=300&height=300&zoom=1.00&continent=eu' width=280 height=280></image></a>
  						</div>
  						<div class="col-md-1 col-sm-1 col-lg-1"></div>
  					</div>	
			  </div>

			</div>
		</div>
	</div>
	<div class="row articles_home">
		<div class="col-md-12 col-sm-12 col-lg-12">
			<h5 class="text-center">Articles</h5>
		</div>
			    	{% for article in articles %}
			    		<div class="col-md-4 col-sm-4 col-lg-4">
			    			<div class="card card_articles">
								{% if article.image %}
									<img src="{{ vich_uploader_asset(article, 'imageFile') }}"  width=100% height=auto alt="{{ article.titre }}">
								{% else %}
									<img src="{{ asset('/images/logo_meteo.png') }}" width=100% height=auto class=" " alt="{{ article.titre }}">
								{% endif %}

			    				<div class="card-body">
			    					<a href="{{ path('article.show', {id: article.id}) }}"><h5 class="card-title">{{ article.titre }}</h5></a>
			    					<div class="card-text">{{ article.content|striptags|slice(0, 300)|raw  }}</div>
									<p class="card-text"><small class="text-muted"><a href="{{ path('article.show', {id: article.id}) }}">Lire la suite</a></small></p>
			    				</div>
			    				<div class="card-footer">
			    					<p>Auteur de l'article {{ article.auteur }}|Editer le {{ article.CreatedAt|date("d/m/Y H:i") }}</p>
			    				</div>
			    			</div>
			    		</div> 
			    	{% endfor %}
	</div>
	{{ form_start(form) }}
	<div class="row contact_home">
		<div class="col-md-12 col-sm-12 col-lg-12">
			<div class="card">
			  <div class="card-header">
			    Contact
			  </div>
				{% for message in app.flashes('success')%}
					<div class="alert alert-success">
						{{ message }}
					</div>
				{% endfor %}
			  <div class="card-body">
				  <div class="row">
					  <div class="col">
						  <p>Vous avez une question n’hesitez pas contactez nous avec le formulaire ci-dessous</p>
					  </div>
				  </div>
				  <div class="row">
					  <div class="col">
						  <h6 class="card-subtitle mb-2 text-muted">Nom</h6>
						  {{ form_widget(form.nom) }}
					  </div>
					  <div class="col">
						  <h6 class="card-subtitle mb-2 text-muted">Prenom</h6>
						  {{ form_widget(form.prenom) }}
					  </div>
				  </div>
				  <div class="row">
					  <div class="col">
						  <h6 class="card-subtitle mb-2 text-muted">E-mail</h6>
						  {{ form_widget(form.email) }}
					  </div>
				  </div>
				  <div class="row">
					  <div class="col">
						  <h6 class="card-subtitle mb-2 text-muted">Message</h6>
						  {{ form_widget(form.message) }}
					  </div>
				  </div>
				  <div class="row envoi_contact">
					  <div class="col">
						  <button class="btn btn-primary btn-block" type="submit">Envoyer</button>
					  </div>
				  </div>
				  {{ form_end(form) }}
				  </div>
			  </div>
			</div>
		</div>
	</div>
</div>


{% endblock %}
{% block javascripts %}


{% endblock %}