{% extends "base.html" %}
{% block content %}
    <div id="title" class="text-center">
        <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' }}</td>
            </tr>
        </table>
    </div>
    <div id="machine">
    <select>
    </select>
    </div>

    <div class="row">
      {% for attr in attrs %}
      <div class="col col-3">
        <select class="form-control" name="{{ attr }}">
          <option value="-3">A lot less {{ attr }}</option>
          <option value="-2">Less {{ attr }}</option>
          <option value="-1">A little less {{ attr }}</option>
          <option value="0" selected>Same {{ attr }}</option>
          <option value="1">A little more {{ attr }}</option>
          <option value="2">More {{ attr }}</option>
          <option value="3">A lot more {{ attr }}</option>
        </select>
      </div>
      {% endfor %}
    </div>

{% endblock %}