<html>
<head>
  <title>Fioul</title>
  <link rel="stylesheet" href="/static/classless.css">
  <link rel="stylesheet" href="/static/fioul.css">
  <link rel="icon" type="image/png" href="/static/favicon.png" />
  <script src="/static/plotly-2.12.1.min.js"></script>
</head>
<body>
  <h1>Prix du m³ de fioul pour Languidic</h1>
  <table id="results" class="u-full-width">
    <tr>
      <th colspan="2"></th> <!-- Date -->
      <th>1000-1499 L</th>
      <th>500-999 L</th>
    </tr>
    <tr class="current">
      <td colspan="2">Actuellement</td>
      <td>{{current_1000}}</td>
      <td>{{current_500}}</td>
    </tr>
    % for x in results:
    <tr class="{{day_classes[x.date.weekday()]}}">
      <td>{{x.date.strftime('%A')}}</td>
      <td>{{x.date.strftime('%d %b %Y')}}</td>
      <td>{{x.price}}</td>
      <td>{{x.price500 if x.price500 is not None else "---"}}</td>
    </tr>
    % end
  </table>
  <div id="price-plot"></div>
  <script>
    var plotDiv = document.getElementById('price-plot');
    var plotData = [
      {
        x: {{ [str(d.date) for d in results] }},
        y: {{ [d.price for d in results] }},
        type: 'scatter',
        name: '1000-1499 L',
        marker: {
          color: '#1f77b4',
        },
      },
      {
        x: {{ [str(d.date) for d in results if d.price500 is not None] }},
        y: {{ [d.price500 for d in results if d.price500 is not None] }},
        type: 'scatter',
        name: '500-999 L',
        marker: {
          color: '#ff7f0e',
        },
      },
      {
        x: [new Date().toJSON().slice(0, 10)],
        y: [{{ current_1000 }}],
        type: 'scatter',
        name: 'today',
        showlegend: false,
        mode: 'markers',
        marker: {
          symbol: 'cross',
          color: '#1f77b4',
        },
      },
      {
        x: [new Date().toJSON().slice(0, 10)],
        y: [{{ current_500 }}],
        type: 'scatter',
        name: 'today',
        showlegend: false,
        mode: 'markers',
        marker: {
          symbol: 'cross',
          color: '#ff7f0e',
        },
      },
    ];
    var plotLayout = {
      margin: { t: 0 }
    };
    var plotConfig = {
      responsive: true,
      displaylogo: false,
    };
	  Plotly.newPlot(
      plotDiv,
      plotData,
      plotLayout,
      plotConfig,
    );
  </script>
</body>
</html>
