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

{% block title %}Workflow Automation{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/workflows.css">
{% endblock %}
{% block content %}
<main class="page">
    <h1 class="brand">Workflow Automation</h1>

    <div class="card">
        <button onclick="triggerLowStock()" type="button">Test Low Stock Workflow</button>
        {{ ui.button('Automation Command Center', '/automation') }}
        {{ ui.button('Admin', '/admin') }}
    </div>

    <section class="grid">
        {% for wf in workflows %}
            <div class="card">
                <strong>{{ wf.name }}</strong>
                <p>{{ wf.trigger_type }}</p>
                <small>{{ wf.actions_json }}</small>
            </div>
        {% endfor %}
    </section>

    <section class="card">
        <h2>Pending Approvals</h2>
        {% for approval in approvals %}
            <p><strong>{{ approval.approval_type }}</strong> {{ approval.created_at }}</p>
        {% else %}
            <p>No pending approvals.</p>
        {% endfor %}
    </section>
</main>

<script>
async function triggerLowStock() {
    const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
    await fetch("/api/workflows/trigger", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-Token": token
        },
        body: JSON.stringify({
            trigger_type: "low_stock",
            context: {severity: "warning"}
        })
    });
    location.reload();
}
</script>
{% endblock %}