{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1 class="page-title">Processes<span class="page-count">{{ items|length }}</span></h1>
    <div class="flex gap-2">
        <a href="/processes/runs" class="btn btn-secondary">All Runs</a>
        <a href="/processes/create" class="btn btn-primary">+ New Process</a>
    </div>
</div>

<form class="filters-bar" method="get" action="/processes">
    <select name="status" class="filter-select" onchange="this.form.submit()">
        <option value="">All Statuses</option>
        <option value="draft" {{ 'selected' if current_status == 'draft' }}>Draft</option>
        <option value="active" {{ 'selected' if current_status == 'active' }}>Active</option>
        <option value="archived" {{ 'selected' if current_status == 'archived' }}>Archived</option>
    </select>
    <select name="process_type" class="filter-select" onchange="this.form.submit()">
        <option value="">All Types</option>
        <option value="workflow" {{ 'selected' if current_type == 'workflow' }}>Workflow</option>
        <option value="checklist" {{ 'selected' if current_type == 'checklist' }}>Checklist</option>
    </select>
</form>

{% if items %}
<div class="card mt-3">
    {% for item in items %}
    <div class="list-row">
        <span class="row-title"><a href="/processes/{{ item.id }}">{{ item.name }}</a></span>
        <span class="row-tag">{{ item.process_type }}</span>
        <span class="status-badge status-{{ item.status }}">{{ item.status }}</span>
        <span class="row-meta">{{ item.step_count }} step{{ 's' if item.step_count != 1 }}</span>
        {% if item.category %}
        <span class="row-tag">{{ item.category }}</span>
        {% endif %}
        <div class="row-actions">
            <a href="/processes/{{ item.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
            <form action="/processes/{{ item.id }}/delete" method="post" data-confirm="Delete this process?" style="display:inline">
                <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red)">Del</button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state mt-3">
    <div class="empty-state-icon">&#9881;</div>
    <div class="empty-state-text">No processes yet</div>
    <a href="/processes/create" class="btn btn-primary">Create First Process</a>
</div>
{% endif %}
{% endblock %}