{% 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('string', 'Style');
          data.addColumn('number', 'Degree likeness');

          data.addRows([
        {% for item in style_map %}
             [{v: '{{ item['name'] | replace(')', '') | replace('(','')}}'}, {{ item['score'] }} ],
        {% endfor %}
          ]);

          var options = {
            hAxis: {
              title: 'Style'
            },
            vAxis: {
              title: 'Taste more like'
            },
            tooltip : {
                    trigger: 'none'
                    },
            legend: {position: 'none'}
          };

          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.name }} ({{ similar_beer.brewer }})</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">
            {% for d in ['Much more', 'More', 'Slightly more'] %}
            <option {% if direction == d %}selected{% endif %}>{{ d }}</option>
            {% endfor %}
          </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.name }} ({{ style_beer.brewer }})</a></td>
        <td>{{style_beer.base_style}}</td>
        <td>{{style_beer.abv}}</td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}

{% endblock %}