{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    <a href="/processes">Processes</a>
    <span class="sep">/</span>
    <a href="/processes/{{ run.process_id_ref }}">{{ run.process_name }}</a>
    <span class="sep">/</span>
    <span>{{ run.title }}</span>
</div>

<div class="detail-header">
    <h1 class="detail-title">{{ run.title }}</h1>
    <div class="flex gap-2">
        {% if run.status != 'completed' %}
        <form action="/processes/runs/{{ run.id }}/complete" method="post" data-confirm="Mark this run as complete?" style="display:inline">
            <button type="submit" class="btn btn-primary btn-sm">Mark Complete</button>
        </form>
        {% endif %}
        <form action="/processes/runs/{{ run.id }}/delete" method="post" data-confirm="Delete this run?" style="display:inline">
            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
        </form>
    </div>
</div>

<div class="detail-meta mt-2">
    <span class="status-badge status-{{ run.status }}">{{ run.status|replace('_', ' ') }}</span>
    <span class="row-tag">{{ run.process_type }}</span>
    <span class="row-tag">{{ run.task_generation|replace('_', ' ') }}</span>
    {% if run.project_name %}<span class="detail-meta-item">{{ run.project_name }}</span>{% endif %}
    {% if run.contact_first %}<span class="detail-meta-item">{{ run.contact_first }} {{ run.contact_last or '' }}</span>{% endif %}
    {% if run.started_at %}<span class="detail-meta-item">Started {{ run.started_at.strftime('%Y-%m-%d') }}</span>{% endif %}
    {% if run.completed_at %}<span class="detail-meta-item">Completed {{ run.completed_at.strftime('%Y-%m-%d') }}</span>{% endif %}
</div>

<!-- Progress Bar -->
<div class="card mt-3" style="padding: 16px;">
    <div style="display: flex; align-items: center; gap: 12px;">
        <span style="font-weight: 600; font-size: 0.9rem;">Progress</span>
        <div style="flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;">
            <div style="width: {{ (completed_steps / total_steps * 100)|int if total_steps > 0 else 0 }}%; height: 100%; background: var(--green); border-radius: 4px; transition: width 0.3s;"></div>
        </div>
        <span style="font-weight: 600; font-size: 0.9rem;">{{ completed_steps }}/{{ total_steps }}</span>
    </div>
</div>

<!-- Steps Checklist -->
<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title">Steps</h3>
    </div>

    {% for step in steps %}
    <div class="list-row {{ 'completed' if step.status == 'completed' }}" style="align-items: flex-start;">
        <div class="row-check">
            {% if step.status == 'completed' %}
            <form action="/processes/runs/{{ run.id }}/steps/{{ step.id }}/uncomplete" method="post" style="display:inline">
                <input type="checkbox" id="step-{{ step.id }}" checked onchange="this.form.submit()">
                <label for="step-{{ step.id }}"></label>
            </form>
            {% else %}
            <form action="/processes/runs/{{ run.id }}/steps/{{ step.id }}/complete" method="post" style="display:inline" id="complete-form-{{ step.id }}">
                <input type="checkbox" id="step-{{ step.id }}" onchange="this.form.submit()">
                <label for="step-{{ step.id }}"></label>
            </form>
            {% endif %}
        </div>
        <div style="flex: 1;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <span class="row-meta" style="min-width: 20px; font-weight: 600;">{{ loop.index }}</span>
                <span class="row-title" style="{{ 'text-decoration: line-through; opacity: 0.6;' if step.status == 'completed' }}">{{ step.title }}</span>
            </div>
            {% if step.instructions %}
            <div style="color: var(--muted); font-size: 0.82rem; margin: 4px 0 0 28px;">{{ step.instructions }}</div>
            {% endif %}
            {% if step.completed_at %}
            <div style="color: var(--green); font-size: 0.78rem; margin: 4px 0 0 28px;">
                Completed {{ step.completed_at.strftime('%Y-%m-%d %H:%M') }}
            </div>
            {% endif %}
            {% if step.notes %}
            <div style="color: var(--muted); font-size: 0.82rem; margin: 2px 0 0 28px; font-style: italic;">{{ step.notes }}</div>
            {% endif %}
            {% if step.status != 'completed' %}
            <div style="margin: 6px 0 0 28px;">
                <button type="button" class="btn btn-ghost btn-xs" onclick="toggleNotes('{{ step.id }}')">Add Notes</button>
                <div id="notes-{{ step.id }}" style="display: none; margin-top: 4px;">
                    <form action="/processes/runs/{{ run.id }}/steps/{{ step.id }}/complete" method="post" style="display: flex; gap: 6px; align-items: flex-end;">
                        <input type="text" name="notes" class="form-input" placeholder="Completion notes..." style="flex: 1; height: 32px; font-size: 0.82rem;">
                        <button type="submit" class="btn btn-primary btn-sm">Complete with Notes</button>
                    </form>
                </div>
            </div>
            {% endif %}
            <!-- Show linked tasks for this step -->
            {% if step_tasks.get(step.id|string) %}
            <div style="margin: 6px 0 0 28px;">
                {% for task in step_tasks[step.id|string] %}
                <div style="display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;">
                    <span class="status-badge status-{{ task.status }}" style="font-size: 0.72rem;">{{ task.status }}</span>
                    <a href="/tasks/{{ task.id }}" style="font-size: 0.82rem;">{{ task.title }}</a>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

<!-- All Generated Tasks -->
{% if tasks %}
<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title">Generated Tasks<span class="page-count">{{ tasks|length }}</span></h3>
    </div>
    {% for task in tasks %}
    <div class="list-row {{ 'completed' if task.status == 'done' }}">
        <span class="priority-dot priority-{{ task.priority }}"></span>
        <span class="row-title"><a href="/tasks/{{ task.id }}">{{ task.title }}</a></span>
        {% if task.project_name %}<span class="row-tag">{{ task.project_name }}</span>{% endif %}
        <span class="status-badge status-{{ task.status }}">{{ task.status|replace('_', ' ') }}</span>
    </div>
    {% endfor %}
</div>
{% endif %}

<script>
function toggleNotes(stepId) {
    var el = document.getElementById('notes-' + stepId);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
</script>
{% endblock %}