{% extends "base.html" %}
{% block content %}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
    google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAnnotations);

function drawAnnotations() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type: 'string', role: 'annotation'});
      data.addColumn('number', 'Energy Level');
      data.addColumn({type: 'string', role: 'annotation'});

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'},   1, '1',  .25, '.2'],
        [{v: [9, 0, 0], f: '9 am'},   2, '2',   .5, '.5'],
        [{v: [10, 0, 0], f:'10 am'},  3, '3',    1,  '1'],
        [{v: [11, 0, 0], f: '11 am'}, 4, '4', 2.25,  '2'],
        [{v: [12, 0, 0], f: '12 pm'}, 5, '5', 2.25,  '2'],
        [{v: [13, 0, 0], f: '1 pm'},  6, '6',    3,  '3'],
        [{v: [14, 0, 0], f: '2 pm'},  7, '7', 3.25,  '3'],
        [{v: [15, 0, 0], f: '3 pm'},  8, '8',    5,  '5'],
        [{v: [16, 0, 0], f: '4 pm'},  9, '9',  6.5,  '6'],
        [{v: [17, 0, 0], f: '5 pm'}, 10, '10',  10, '10'],
      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        annotations: {
          alwaysOutside: true,
          textStyle: {
            fontSize: 14,
            color: '#000',
            auraColor: 'none'
          }
        },
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          }
        },
        vAxis: {
          title: 'Rating (scale of 1-10)'
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
    <div id="title" class="text-center">
        <h2>{{ beer_data.brewer if beer_data != None else 'DELICOUS BREWER' }}</h2>
        <h2>{{ beer_data.name if beer_data != None else 'DELICOUS BEER' }}</h2>
    </div>
    <div id="stats">
        <table class="table">
            <tr>
                <th scope="col">Parent Style</th>
                <th scope="col">Specific Style</th>
                <th scope="col">Alcohol by Volume </th>
            </tr>
            <tr>
                <td>{{ beer_data.parent_style if beer_data != None else 'ASS BEER' }}</td>
                <td>{{ beer_data.base_style if beer_data != None else 'TURBO ASS BEER' }}</td>
                <td>{{ beer_data.abv if beer_data != None else 'BETWEEN 0 and 100' }} (drinks like: {{beer_data.drinks_like|round(2)}})</td>
            </tr>
        </table>
    </div>
    <div id="chart_div"></div>

    <h5>Beers like {{ beer_data.name }}</h5>
    <table class="table">
      <tr>
        <th>Beer</th> 
        <th>Style</th>
        <th>ABV</th>
      </tr>
      {% for similar_beer in similar_beers %}
      <tr>
        <td><a href="{{ similar_beer.link }}" >{{ similar_beer.brewer }} - {{ similar_beer.name }}</a></td>
        <td>{{similar_beer.base_style}}</td>
        <td>{{similar_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>

    <div class="row">
      <div class="col">
        <form action="" method="post" class="alert alert-secondary form-inline">
          Show me beers which are
          <select name="direction" class="form-control">
              <option {% if direction == '3' %}selected{% endif %} value="3">Much more</option>
              <option {% if direction == '2' %}selected{% endif %} value="2">More</option>
              <option {% if direction == '1' or not direction%}selected{% endif %} value="1">Slightly more</option>
              <option {% if direction == '-1' %}selected{% endif %} value="-1">Slightly less</option>
              <option {% if direction == '-2' %}selected{% endif %} value="-2">Less</option>
              <option {% if direction == '-3' %}selected{% endif %} value="-3">Much less</option>
          </select>
          <select name="attr" class="form-control">
            {% for a in attrs %}
              <option {% if a == attr %}selected{% endif %} value="{{ a }}">{{ a }}</option>
            {% endfor %}
          </select>
          <input type="submit" value="Go" class="btn btn-outline-primary">
        </form>
      </div>
      <div class="col">
        <form action="" method="post" class="alert alert-secondary form-inline">
          Show me similar beers in the style of
          <select name="style" class="form-control">
            <option>American Adjunct Lager</option>
            <option>American Amber / Red Ale</option>
            <option>American Amber / Red Lager</option>
            <option>American Barleywine</option>
            <option>American Black Ale</option>
            <option>American Blonde Ale</option>
            <option>American Brett</option>
            <option>American Brown Ale</option>
            <option>American Brut IPA</option>
            <option>American Cream Ale</option>
            <option>American Dark Wheat Ale</option>
            <option>American IPA</option>
            <option>American Imperial IPA</option>
            <option>American Imperial Pilsner</option>
            <option>American Imperial Porter</option>
            <option>American Imperial Red Ale</option>
            <option>American Imperial Stout</option>
            <option>American Lager</option>
            <option>American Light Lager</option>
            <option>American Malt Liquor</option>
            <option>American Pale Ale (APA)</option>
            <option>American Pale Wheat Ale</option>
            <option>American Porter</option>
            <option>American Stout</option>
            <option>American Strong Ale</option>
            <option>American Wheatwine Ale</option>
            <option>American Wild Ale</option>
            <option>Baltic Porter</option>
            <option>Belgian Blonde Ale </option>
            <option>Belgian Dark Ale</option>
            <option>Belgian Dubbel</option>
            <option>Belgian Faro</option>
            <option>Belgian Fruit Lambic</option>
            <option>Belgian Gueuze</option>
            <option>Belgian IPA</option>
            <option>Belgian Lambic</option>
            <option>Belgian Pale Ale</option>
            <option>Belgian Quadrupel (Quad)</option>
            <option>Belgian Saison</option>
            <option>Belgian Strong Dark Ale</option>
            <option>Belgian Strong Pale Ale</option>
            <option>Belgian Tripel</option>
            <option>Belgian Witbier</option>
            <option>Berliner Weisse</option>
            <option>Bière de Champagne / Bière Brut</option>
            <option>Bohemian Pilsener</option>
            <option>Braggot</option>
            <option>British Barleywine</option>
            <option>California Common / Steam Beer</option>
            <option>Chile Beer</option>
            <option>English Bitter</option>
            <option>English Brown Ale</option>
            <option>English Dark Mild Ale</option>
            <option>English Extra Special / Strong Bitter (ESB)</option>
            <option>English India Pale Ale (IPA)</option>
            <option>English Oatmeal Stout</option>
            <option>English Old Ale</option>
            <option>English Pale Ale</option>
            <option>English Pale Mild Ale</option>
            <option>English Porter</option>
            <option>English Stout</option>
            <option>English Strong Ale</option>
            <option>English Sweet / Milk Stout</option>
            <option>European Dark Lager</option>
            <option>European Export / Dortmunder</option>
            <option>European Pale Lager</option>
            <option>European Strong Lager</option>
            <option>Finnish Sahti</option>
            <option>Flanders Oud Bruin</option>
            <option>Flanders Red Ale</option>
            <option>Foreign / Export Stout</option>
            <option>French Bière de Garde</option>
            <option>Fruit and Field Beer</option>
            <option>German Altbier</option>
            <option>German Bock</option>
            <option>German Doppelbock</option>
            <option>German Dunkelweizen</option>
            <option>German Eisbock</option>
            <option>German Hefeweizen</option>
            <option>German Helles</option>
            <option>German Kellerbier / Zwickelbier</option>
            <option>German Kristalweizen</option>
            <option>German Kölsch</option>
            <option>German Maibock</option>
            <option>German Märzen / Oktoberfest</option>
            <option>German Pilsner</option>
            <option>German Rauchbier</option>
            <option>German Roggenbier</option>
            <option>German Schwarzbier</option>
            <option>German Weizenbock</option>
            <option>Herb and Spice Beer</option>
            <option>Irish Dry Stout</option>
            <option>Irish Red Ale</option>
            <option>Japanese Happoshu</option>
            <option>Japanese Rice Lager</option>
            <option>Leipzig Gose</option>
            <option>Low Alcohol Beer</option>
            <option>Munich Dunkel Lager</option>
            <option>New England IPA</option>
            <option>Pumpkin Beer</option>
            <option>Robust Porter </option>
            <option>Russian Imperial Stout</option>
            <option>Russian Kvass</option>
            <option>Rye Beer</option>
            <option>Scotch Ale / Wee Heavy</option>
            <option>Scottish Ale</option>
            <option>Scottish Gruit / Ancient Herbed Ale</option>
            <option>Smoke Beer</option>
            <option>Smoke Porter</option>
            <option>Vienna Lager</option>
            <option>Winter Warmer</option>
          </select>
          <input type="submit" value="Go" class="btn btn-outline-primary">
        </form>
      </div>
    </div>

    {% if attr_beers %}
    <h5>Beers like {{ beer_data.name }} but {{ direction }} {{ attr }}</h5>
    <table class="table">
      <tr>
        <th>Beer</th>
        <th>Style</th>
        <th>ABV</th>
      </tr>
      {% for attr_beer in attr_beers %}
      <tr>
        <td><a href="{{ attr_beer.link }}" >{{ attr_beer.brewer }} - {{ attr_beer.name }}</a></td>
        <td>{{attr_beer.base_style}}</td>
        <td>{{attr_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}

    {% if style_beers %}
    <h5>Beers like {{ beer_data.name }} but in the {{ style }} style</h5>
    <table class="table">
      <tr>
        <th>Beer</th>
        <th>Style</th>
        <th>ABV</th>
      </tr>
      {% for style_beer in style_beers %}
      <tr>
        <td><a href="{{ style_beer.link }}" >{{ style_beer.brewer }} - {{ style_beer.name }}</a></td>
        <td>{{style_beer.base_style}}</td>
        <td>{{style_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}

{% endblock %}