{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Alerts{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
{% endblock %}
{% block content %}
<div class="container">

    <h1 class="brand">Gvelo Enterprise Platform</h1>

    <div class="card">

        <h2>System Alerts</h2>
        <p><strong>Unread fraud notifications:</strong> {{ unread_count }}</p>

        <hr>
        <h3>Fraud Detection Alerts</h3>
        {% for alert in fraud_alerts %}
            <p>
                [{{ alert[2]|upper }}] {{ alert[1] }} - {{ alert[3] }}
                {% if alert[4] %}(Ref: {{ alert[4] }}){% endif %}
                <small class="hil-inline-064028e7a7">{{ alert[6] }}</small>
            </p>
        {% else %}
            <p>No fraud alerts detected.</p>
        {% endfor %}

        <hr>

        <h3>⚠ Low Stock</h3>
        {% for p in low_stock %}
            <p>{{p[1]}} - Stock: {{p[3]}}</p>
        {% endfor %}

        <hr>

        <h3>🚨 Out of Stock</h3>
        {% for p in out_of_stock %}
            <p>{{p[1]}}</p>
        {% endfor %}

        <hr>

        <h3>🐢 Slow Moving Goods</h3>
        {% for p in slow_moving %}
            <p>{{p[1]}} - Price: {{p[2]}}</p>
        {% endfor %}

        <br>
        <a href="/admin">Back</a>

    </div>
</div>
{% endblock %}