{% extends "baselayout.html" %}

{% load i18n %}

{% block title %}
{% translate "Drinks - Home" %}
{% endblock %}

{% block content %}
<h1>{% translate "Available Drinks" %}</h1>
{% if available_drinks %}
<ul class="flex flex-row flex-wrap gap-1rem drinks-list">
    {% for drink in available_drinks %}
    {% if drink.do_not_count %}
    <li class="flex">
        <a class="button flex flex-row flex-center gap-1rem" href="/order/{{ drink.id }}">
            <span>{{ drink }}</span>
            <span>{% translate "available" %}</span>
        </a>
    </li>
    {% else %}
    <li class="flex">
        <a class="button flex flex-row flex-center gap-1rem" href="/order/{{ drink.id }}">
            <span>{{ drink }}</span>
            <span>{{ drink.available }} {% translate "available" %}</span>
        </a>
    </li>
    {% endif %}
    {% endfor %}
</ul>
{% else %}
{% translate "No drinks available." %}
{% endif %}
<script src="/static/js/autoreload.js"></script>
{% endblock %}