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

{% block title %}Low Stock Alert - KitsCo{% endblock %}

{% block content %}
<div class="icon-badge icon-warning">
    <span>&#128230;</span>
</div>

<h2 class="text-center">Low Stock Alert</h2>
<p class="text-center text-muted">
    The following products are running low on stock and may need reordering.
</p>

<div class="alert alert-warning">
    <h4>{{ products|length }} Product{{ products|length > 1 ? 's' : '' }} Below Threshold</h4>
    <p>Action required to maintain inventory levels and avoid stockouts.</p>
</div>

<table class="data-table">
    <thead>
        <tr>
            <th>Product</th>
            <th>SKU</th>
            <th class="amount">In Stock</th>
            <th class="amount">Threshold</th>
        </tr>
    </thead>
    <tbody>
        {% for item in products %}
        <tr style="{% if item.product.stockQuantity <= 0 %}background-color: #ffebee;{% elseif item.product.stockQuantity <= item.threshold / 2 %}background-color: #fff3e0;{% endif %}">
            <td>
                <strong>{{ item.product.name }}</strong>
                {% if item.product.stockQuantity <= 0 %}
                <br><span style="color: #c62828; font-size: 12px;">OUT OF STOCK</span>
                {% endif %}
            </td>
            <td style="font-family: monospace; font-size: 13px;">{{ item.product.sku }}</td>
            <td class="amount" style="{% if item.product.stockQuantity <= 0 %}color: #c62828; font-weight: bold;{% elseif item.product.stockQuantity <= item.threshold / 2 %}color: #f57c00;{% endif %}">
                {{ item.product.stockQuantity }}
            </td>
            <td class="amount" style="color: #666;">{{ item.threshold }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% set outOfStock = products|filter(p => p.product.stockQuantity <= 0)|length %}
{% set criticalStock = products|filter(p => p.product.stockQuantity > 0 and p.product.stockQuantity <= p.threshold / 2)|length %}
{% set lowStock = products|filter(p => p.product.stockQuantity > p.threshold / 2)|length %}

<div class="info-box">
    <table>
        <tr>
            <td class="label">Out of Stock</td>
            <td class="value" style="color: #c62828;">{{ outOfStock }} items</td>
        </tr>
        <tr>
            <td class="label">Critical (Below 50%)</td>
            <td class="value" style="color: #f57c00;">{{ criticalStock }} items</td>
        </tr>
        <tr>
            <td class="label">Low Stock</td>
            <td class="value" style="color: #1565c0;">{{ lowStock }} items</td>
        </tr>
    </table>
</div>

<div class="steps">
    <h4>Recommended Actions</h4>
    <ol>
        <li>Review current supplier lead times</li>
        <li>Create purchase orders for critical items</li>
        <li>Check for any pending stock receipts</li>
        <li>Update product availability on website if needed</li>
    </ol>
</div>

<div class="btn-wrapper">
    <a href="{{ adminUrl|default('https://kits.co.tz/admin/product') }}" class="btn btn-primary">View Inventory</a>
</div>

<hr class="divider">

<p class="text-center text-muted text-small">
    This is an automated inventory alert. Stock levels are checked periodically.
</p>
{% endblock %}

{% block contact_section %}{% endblock %}