{% extends 'layout.twig' %}

{% block title %}Drink Types - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>Drink Types</h2>
        </div>
        <div class="col-auto">
            <a href="/drink-types/create" class="btn btn-success">
                <i class="fas fa-plus"></i> Add New Drink Type
            </a>
        </div>
    </div>

    {% if drinkTypes is empty %}
        <div class="alert alert-info">
            No drink types found. Click the button above to add your first drink type.
        </div>
    {% else %}
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Desired Stock</th>
                        <th>Current Stock</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for drinkType in drinkTypes %}
                        <tr>
                            <td>{{ drinkType.id }}</td>
                            <td>{{ drinkType.name }}</td>
                            <td>{{ drinkType.description|default('-') }}</td>
                            <td>{{ drinkType.desiredStock }}</td>
                            <td>
                                {% if drinkType.currentStock is defined %}
                                    {% if drinkType.currentStock < drinkType.desiredStock %}
                                        <span class="text-danger">{{ drinkType.currentStock }}</span>
                                    {% else %}
                                        <span class="text-success">{{ drinkType.currentStock }}</span>
                                    {% endif %}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="/drink-types/{{ drinkType.id }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                    <a href="/drink-types/{{ drinkType.id }}/edit" class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <form action="/drink-types/{{ drinkType.id }}/delete" method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this drink type?');">
                                        <button type="submit" class="btn btn-sm btn-danger">
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}