{% extends "base.html" %}
{% load humanize %}

{% block title %}Beers — BrewSync{% endblock %}

{% block extra_css %}
<style>
    .pagination { display: flex; justify-content: center; gap: 8px; margin: 32px 0; flex-wrap: wrap; }
    .pagination a, .pagination span {
        padding: 8px 14px; border-radius: 8px; font-size: 14px; text-decoration: none;
        background: var(--card); color: var(--text); border: 1px solid var(--border);
    }
    .pagination a:hover { background: var(--bg-alt); }
    .pagination .current { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
    .pagination .disabled { opacity: 0.4; pointer-events: none; }
    .search-form { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
    .search-form input { flex: 1; margin-bottom: 0; }
    .search-form button {
        padding: 12px 20px; background: var(--accent); color: #000; border: none;
        border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 15px;
    }
</style>
{% endblock %}

{% block content %}
<h1 style="font-size:28px; margin-bottom:20px; color:#fff;">Our Beers</h1>

<form class="search-form" method="get" action="/beers/">
    <input type="text" class="search-box" name="q" value="{{ search_query }}" placeholder="Search beers..." autocomplete="off">
    {% if active_style %}<input type="hidden" name="style" value="{{ active_style }}">{% endif %}
    <button type="submit">Search</button>
</form>

<div class="toolbar">
    <a href="/beers/{% if search_query %}?q={{ search_query }}{% endif %}" class="filter-btn {% if not active_style %}active{% endif %}">All</a>
    {% for style in styles %}
    <a href="/beers/?style={{ style|urlencode }}{% if search_query %}&q={{ search_query }}{% endif %}" class="filter-btn {% if active_style == style %}active{% endif %}">{{ style }}</a>
    {% endfor %}
</div>

<div class="count">{{ total_count|intcomma }} beer{{ total_count|pluralize }}</div>

<div class="grid" id="beer-grid">
    {% for beer in beers %}
    <a href="/beers/{{ beer.pk }}/" class="card">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;">
            <h3>{{ beer.name }}</h3>
            {% if beer.abv %}<span class="badge badge-accent">{{ beer.abv }}%</span>{% endif %}
        </div>
        <div style="font-size:13px; color:var(--accent); margin-bottom:4px;">{{ beer.style }}</div>
        <div style="font-size:13px; color:var(--text-muted);">{{ beer.brewery_display|default:"—" }}</div>
        {% if beer.description %}<div style="font-size:13px; color:var(--text-muted); line-height:1.4; margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">{{ beer.description }}</div>{% endif %}
        <div style="display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);">
            <div class="stars">
                {% if beer.avg_rating %}
                {% with stars=beer.avg_rating|floatformat:0 %}
                {% for i in "12345" %}{% if forloop.counter <= stars|add:0 %}★{% else %}☆{% endif %}{% endfor %}
                {% endwith %}
                <span class="rating-count">({{ beer.rating_count }})</span>
                {% else %}☆☆☆☆☆{% endif %}
            </div>
            {% if beer.ibu %}<span class="badge badge-muted">{{ beer.ibu }} IBU</span>{% endif %}
        </div>
    </a>
    {% empty %}
    <div style="text-align:center; padding:60px 20px; color:var(--text-muted); grid-column:1/-1;">
        No beers found.
    </div>
    {% endfor %}
</div>

{% if num_pages > 1 %}
<div class="pagination">
    {% if has_previous %}
    <a href="?page={{ previous_page }}{% if active_style %}&style={{ active_style|urlencode }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">← Prev</a>
    {% else %}
    <span class="disabled">← Prev</span>
    {% endif %}

    {% for num in page_range %}
        {% if page_num == num %}
        <span class="current">{{ num }}</span>
        {% elif num > page_num|add:"-3" and num < page_num|add:"3" or num == 1 or num == num_pages %}
        <a href="?page={{ num }}{% if active_style %}&style={{ active_style|urlencode }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a>
        {% elif num == page_num|add:"-3" or num == page_num|add:"3" %}
        <span>…</span>
        {% endif %}
    {% endfor %}

    {% if has_next %}
    <a href="?page={{ next_page }}{% if active_style %}&style={{ active_style|urlencode }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">Next →</a>
    {% else %}
    <span class="disabled">Next →</span>
    {% endif %}
</div>
{% endif %}
{% endblock %}