{% extends 'web/admin/base.html' %}

{% block admin_title %}Inventory alerts{% endblock %}
{% block admin_subtitle %}Products at or below minimum stock{% endblock %}

{% block admin_content %}
<div class="alert alert-warning border-0 rounded-4 mb-4 d-flex align-items-center gap-2">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <span><strong>{{ low_stock }}</strong> SKU(s) need attention (stock ≤ min stock).</span>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h5 class="mb-0 fw-bold">Low stock list</h5>
        <a href="{{ url_for('web.low_stock') }}" class="btn btn-sm btn-outline-secondary rounded-pill">Public low-stock page</a>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>Product</th>
                    <th>Category</th>
                    <th class="text-end">Stock</th>
                    <th class="text-end">Min</th>
                </tr>
            </thead>
            <tbody>
                {% for p in low_stock_products %}
                <tr>
                    <td class="fw-medium">{{ p.name }}</td>
                    <td class="small text-muted">{{ p.category.name if p.category else '—' }}</td>
                    <td class="text-end fw-bold {% if p.stock <= 0 %}text-danger{% endif %}">{{ p.stock }}</td>
                    <td class="text-end text-muted">{{ p.min_stock }}</td>
                </tr>
                {% else %}
                <tr><td colspan="4" class="text-center text-muted py-5">No low-stock products.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}