{% if not included %}
{% extends 'index.html' %}

{% block title %}
Meteo panel
{% endblock title %}

{% endif %}

{% set included = True %}

{% block head %}
{% endblock head %}

{% block content %}

<h3>OARPAF Weather station        Coordinates: 44°35'28"  9°12'12" Altitude: 1490m</h3>

<section class="row">

  <div class="col">
    <h4>Externals</h4>
    <dl class="row">
      {% for key, value in data.external.items() | sort %}

      <dt class="col-6">{{key}}</dt>
      <dd class="col-6 text-success"><var data-status="environment-external-{{key}}">{{value}}</dd>
      {% endfor %}
    </dl>
  </div>

  <div class="col">
    <h4>Internals</h4>
    <dl class="row">
      {% for key,value in data.internal.items() | sort %}
      <dt class="col-6">{{key}}</dt>
      <dd class="col-6 text-success"><var data-status="environment-internal-{{key}}">{{value}}</dd>
      {% endfor %}
    </dl>
  </div>


  <div class="col">

      <h4>Display</h4>

      <figure class="card">
        <!-- <img class="card-img-top" src="http://skycam:Antola@130.251.11.11/skycam/Skycam-2023-02-01-04-45.jpg"> -->
        <figcaption class="card-body">
          <h5 class="card-title">title</h5>
          
          <p class="card-text">
            <span title="insmode"  class="badge bg-primary">fotometry</span>
            <span title="filter"   class="badge bg-info">Free</span>
            <span title="binning"  class="badge bg-info">2x2</span>
            <span title="frametyp" class="badge bg-dark">bias</span>
            <span title="seeing"   class="badge bg-warning">no seeing</span>
            <span title="resolved" class="badge bg-warning">no wcs</span>
          </p>

          <dl data-var="cardList" class="card-text">
          </dl>

        </figcaption>
        <aside class="card-footer">
          <a href="#" class="card-link">png</a>
          <a href="#" class="card-link">fits</a>
          <a href="#" class="card-link">header</a>
          <a href="#" class="card-link">extra</a>
        </aside>
      </figure>
    

            <ul>
            Statistics Stars found:
            <li> -Central: 100/100</li>
            <li> -North: 100/100</li>
            <li> -South: 100/100</li>
            <li> -East: 100/100</li>
            <li> -West: 100/100</li>
            </ul>
    
  </div>

</section>


<section class="row">
  
  <!-- <div class="col-4"> -->
  <!--   <img src="/static/images/Radar_meteo.jpeg" class="d-block w-100" alt="..."> -->
  <!-- </div> -->
  
  <!-- <div class="col-4"> -->
  <!--   <img src="/static/images/Infrared.jpeg" class="d-block w-100" alt="..."> -->
  <!-- </div> -->
  
  
  <div class="col-4">
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->
    
    <canvas id="myChart1" style="width:100%;max-width:600px"></canvas>
    
    <script>
      // var xValues = [50,60,70,80,90,100,110,120,130,140,150];
      // var yValues = [7,8,8,9,9,9,10,11,14,14,15];
      
      // new Chart("myChart1", {
      //     type: "line",
      //     data: {
      //         labels: xValues,
      //         datasets: [{
      //             fill: false,
      //             lineTension: 0,
      //             backgroundColor: "rgba(0,0,255,1.0)",
      //             borderColor: "rgba(0,0,255,0.1)",
      //             data: yValues
      //         }]
      //     },
      //     options: {
      //         legend: {display: false},
      //         scales: {
      //             yAxes: [{ticks: {min: 6, max:16}}],
      //         }
      //     }
      // });
    </script>
    
    
    <canvas id="myChart2" style="width:100%;max-width:600px"></canvas>
    
    <script>
    //   var xValues = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    //   var yValues = [7,5,4,7,7,8,8,9,9,9,10,11,14,14,15];

    //   new Chart("myChart2", {
    //       type: "line",
    //       data: {
    //           labels: xValues,
    //           datasets: [{
    //               fill: false,
    //               lineTension: 0,
    //               backgroundColor: "rgba(0,0,255,1.0)",
    //               borderColor: "rgba(0,0,255,0.1)",
    //               data: yValues
    //           }]
    //       },
    //       options: {
    // legend: {display: false},
    //           scales: {
    //               yAxes: [{ticks: {min: 3, max:16}}],
    //           }
    //       }
    //   });
    </script>
    
  </div>   

</section>

{% endblock content %}


{% block footer %}
{% endblock footer %}
