{% extends 'base.html.twig' %}

{% block title %}{{'Beer index'}}{% endblock %}

{% block body %}
{# responsive, fixed-width container class #}
<div class="container">

    <h1 class="display-1">{{'Beer index'}}</h1>

    <table class="table">
        <thead class="thead-light">
            <tr>
                <th scope="col">{{'Id'}}</th>
                <th scope="col">{{'Name'}}</th>
                <th scope="col">{{'Alcool'}}</th>
                <th scope="col">{{'actions'}}</th>
            </tr>
        </thead>
        <tbody>
        {% for beer in beers %}
            <tr>
                <th scope="row">{{ beer.id }}</th>
                <td>{{ beer.name }}</td>
                <td>{{ beer.alcool|format_percent_number({rounding_mode: 'floor', fraction_digit: 1}) }}</td>
                <td>
                    <a href="{{ path('beer_show', {'id': beer.id}) }}" class="btn btn-secondary" role="button" title="{{'show'}}">
                       <i class="fa fa-eye fa-fw"></i>
                    </a>
                    <a href="{{ path('beer_edit', {'id': beer.id}) }}" class="btn btn-warning" role="button" title="{{'edit'}}">
                       <i class="fa fa-pencil fa-fw"></i>
                    </a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="4">{{'no records found'}}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('beer_new') }}" class="btn btn-primary" role="button">
       <i class="fa fa-plus fa-fw"></i> {{'Create new'}}
    </a>
</div>
{% endblock %}