{% extends "base.html" %}
{% load static %}
{% load markdown_filters %}

{% block title %}{{ workflow.name }} - {{ playbook.name }}{% endblock %}

{% block content %}
<div data-testid="workflow-detail-page">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playbook_detail' playbook.pk %}">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_list' playbook.pk %}">Workflows</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if workflow.abbreviation %}
                <span class="badge bg-secondary font-monospace me-1" data-testid="workflow-code-crumb">{{ workflow.abbreviation }}</span>
                {% endif %}
                {{ workflow.name }}
            </li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="hg-page-header mb-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="flex-grow-1 min-w-0">
                <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1">
                    <i class="fa-solid fa-diagram-project hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span data-testid="workflow-name">{{ workflow.name }}</span>
                </h1>
                <p class="text-muted small mb-0">
                    {% if workflow.abbreviation %}
                    <span class="badge bg-secondary font-monospace me-1"
                          data-testid="workflow-code">{{ workflow.abbreviation }}</span>
                    {% endif %}
                    <span class="badge bg-secondary me-1" data-testid="workflow-order">#{{ workflow.order }}</span>
                    <a href="{% url 'playbook_detail' playbook.pk %}">{{ playbook.name }}</a>
                </p>
            </div>

            <div role="toolbar" aria-label="Workflow actions" class="d-flex flex-wrap gap-2 align-items-center flex-shrink-0"
                 data-testid="workflow-header-actions">
            {% if can_edit %}
            <a href="{% url 'workflow_delete' playbook.pk workflow.pk %}"
               class="btn btn-outline-danger"
               data-bs-toggle="tooltip"
               data-testid="workflow-delete-btn"
               title="Delete this workflow">
                <i class="fa-solid fa-trash"></i> Delete
            </a>
            <a href="{% url 'workflow_edit' playbook.pk workflow.pk %}"
               class="btn btn-outline-primary"
               data-bs-toggle="tooltip"
               data-testid="workflow-edit-btn"
               title="Edit workflow details">
                <i class="fa-solid fa-edit"></i> Edit
            </a>
            {% elif can_submit_pip %}
            <a href="{% url 'pip_create' %}?playbook={{ playbook.pk }}&workflow={{ workflow.pk }}"
               class="btn btn-primary"
               data-testid="workflow-submit-pip"
               data-bs-toggle="tooltip"
               title="Propose changes to this Released playbook (context: this workflow)">
                <i class="fa-solid fa-lightbulb"></i> Submit PIP
            </a>
            {% endif %}
            <a href="{% url 'workflow_list' playbook.pk %}"
               class="btn btn-outline-secondary"
               data-testid="workflow-back-btn"
               data-bs-toggle="tooltip"
               title="Back to workflows for this playbook">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
            </div>
        </div>
    </div>

    <!-- Description -->
    {% if workflow.description %}
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Description</h5>
            <div class="card-text markdown-content" data-testid="workflow-description">{{ workflow.description|markdown }}</div>
        </div>
    </div>
    {% endif %}

    <!-- Activities Flow Diagram -->
    <div class="card mb-4" data-testid="activities-section">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="fa-solid fa-diagram-project"></i> Activities Flow ({{ activity_count }})
            </h5>
            {% if can_edit %}
            <a href="{% url 'activity_create' playbook_pk=playbook.pk workflow_pk=workflow.pk %}" 
               class="btn btn-sm btn-primary"
               data-testid="add-activity-btn"
               data-bs-toggle="tooltip"
               data-bs-placement="left"
               title="Create a new activity in this workflow">
                <i class="fa-solid fa-plus"></i> Add Activity
            </a>
            {% endif %}
        </div>
        <div class="card-body">
            {% if has_activities %}
                {% if activities_svg %}
                    <!-- Graphviz SVG Flow Diagram -->
                    <div class="graph-container" data-testid="activities-graph">
                        {{ activities_svg|safe }}
                    </div>
                {% else %}
                    <!-- Graph generation failed - show message -->
                    <div class="alert alert-warning" role="alert">
                        <i class="fa-solid fa-exclamation-triangle"></i>
                        <strong>Graph visualization unavailable.</strong>
                        Unable to generate activity flow diagram. Graphviz may not be installed.
                    </div>
                {% endif %}
            {% else %}
                <!-- Empty State -->
                <div class="text-center py-5" data-testid="empty-activities-state">
                    <i class="fa-solid fa-diagram-project fa-4x text-muted mb-3"></i>
                    <h5>No Activities Yet</h5>
                    <p class="text-muted">This workflow doesn't have any activities defined.</p>
                    {% if can_edit %}
                    <a href="{% url 'activity_create' playbook_pk=playbook.pk workflow_pk=workflow.pk %}" 
                       class="btn btn-primary"
                       data-testid="create-first-activity-btn"
                       data-bs-toggle="tooltip"
                       title="Create the first activity for this workflow">
                        <i class="fa-solid fa-plus"></i> Create First Activity
                    </a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    /* Activity Graph SVG Styling */
    .graph-container {
        overflow-x: auto;
        margin: 1rem 0;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 4px;
    }
    
    .graph-container svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    /* Make SVG links clickable with pointer cursor */
    .graph-container svg a {
        cursor: pointer;
    }
    
    /* Hover effect for activity nodes */
    .graph-container svg a:hover {
        opacity: 0.85;
    }
    
    /* Responsive handling for smaller screens */
    @media (max-width: 768px) {
        .graph-container {
            padding: 0.5rem;
        }
    }
</style>

<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
{% endblock %}