{% extends "base.html" %}
{% from 'components/_macros.html' import status_badge, empty_state %}

{% block content %}
<script src="/static/js/workflows.js?v=5"></script>
<script>
    // Pre-render Jinja2 data for Alpine.js
    window.workflowsData = {
        executionIds: {{ executions | map(attribute='execution_id') | list | tojson | safe }},
        executionCount: {{ executions | length }},
        allExecutions: {{ executions | tojson | safe }}
    };

    // Hide loading state once Alpine.js is ready
    document.addEventListener('alpine:init', () => {
        const loading = document.getElementById('executions-loading');
        if (loading) {
            loading.style.display = 'none';
        }
    });
</script>

<div x-data="workflowsComponent()" 
     class="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full"
     @keydown.window="handleKeydown($event)">
    
    {% include "components/workflows/sidebar.html" %}
    
    {% include "components/workflows/details.html" %}
    
    {% include "components/workflows/resume_modal.html" %}
</div>

<style>
    /* Custom Scrollbar for this page */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(65, 72, 104, 0.5);
        border-radius: 3px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(122, 162, 247, 0.5);
    }
</style>
{% endblock %}