{% extends "base.html" %}

{% block title %}Flows Dashboard{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-5 mb-4">Flows Dashboard</h1>
            <p class="lead">Track and manage workflow processes across the organization.</p>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="card text-white bg-primary h-100">
                <div class="card-body">
                    <h5 class="card-title">Total Flows</h5>
                    <p class="display-4">{{ stats.total_flows }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card text-white bg-success h-100">
                <div class="card-body">
                    <h5 class="card-title">In Progress</h5>
                    <p class="display-4">{{ stats.in_progress_flows }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card text-white bg-danger h-100">
                <div class="card-body">
                    <h5 class="card-title">Stuck</h5>
                    <p class="display-4">{{ stats.stuck_flows }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card text-white bg-info h-100">
                <div class="card-body">
                    <h5 class="card-title">Completed</h5>
                    <p class="display-4">{{ stats.completed_flows }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2">
                        <a href="/flows/create" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-1"></i> Create New Flow
                        </a>
                        <a href="/flows/list" class="btn btn-outline-secondary">
                            <i class="bi bi-list me-1"></i> View All Flows
                        </a>
                        <a href="/flows/my-flows" class="btn btn-outline-secondary">
                            <i class="bi bi-person me-1"></i> My Flows
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}