<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NoETL Execution View</title>

    <!--
      In a fully bundled application (recommended), these CDN links would be removed,
      and the dependencies would be managed via npm and imported in JavaScript.
    -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.12.2/dist/reset.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <script type="module" crossorigin src="/assets/execution.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/main2.js">
  <link rel="stylesheet" crossorigin href="/assets/main2.css">
</head>
<body>
    <div class="ant-layout">
        <header class="ant-layout-header app-header">
            <div class="logo">
                <a href="/catalog">
                    <i class="fas fa-tasks"></i>
                    <span>NoETL Execution View</span>
                </a>
            </div>
            <nav class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal">
                <div class="ant-menu-item">
                    <a href="/catalog"><i class="fas fa-th-list"></i>Catalog</a>
                </div>
                <div class="ant-menu-item">
                    <a href="/editor/new"><i class="fas fa-edit"></i>Editor</a>
                </div>
            </nav>
        </header>

        <main class="ant-layout-content app-content">
            <div class="ant-row page-header-row">
                <div class="ant-col ant-col-md-16">
                    <div class="page-title-container">
                        <h1 id="execution-title" class="page-title">Execution View</h1>
                        <p id="execution-subtitle" class="page-subtitle">Monitoring playbook execution...</p>
                    </div>
                </div>
                <div class="ant-col ant-col-md-8 page-actions">
                    <button id="refresh-execution" class="ant-btn ant-btn-primary"><i class="fas fa-sync-alt"></i> Refresh</button>
                    <button id="back-to-catalog" class="ant-btn"><i class="fas fa-arrow-left"></i> Back to Catalog</button>
                </div>
            </div>

            <div class="ant-row">
                <div class="ant-col ant-col-24">
                    <!-- Execution Status Card -->
                    <div class="ant-card styled-card">
                        <div class="ant-card-head">
                            <div class="ant-card-head-title"><i class="fas fa-info-circle"></i>Execution Status</div>
                        </div>
                        <div class="ant-card-body">
                            <div id="execution-status" class="execution-status">
                                <div class="ant-spin ant-spin-spinning" id="execution-spinner"></div>
                                <div>
                                    <h5 id="status-text">Loading execution status...</h5>
                                    <p id="status-details"></p>
                                </div>
                            </div>
                            <div class="ant-row execution-details-grid">
                                <div class="ant-col ant-col-md-12">
                                    <div class="detail-item"><span class="detail-label">Execution ID:</span> <span id="execution-id"></span></div>
                                    <div class="detail-item"><span class="detail-label">Playbook:</span> <span id="playbook-path"></span></div>
                                    <div class="detail-item"><span class="detail-label">Version:</span> <span id="playbook-version"></span></div>
                                </div>
                                <div class="ant-col ant-col-md-12">
                                    <div class="detail-item"><span class="detail-label">Start Time:</span> <span id="start-time"></span></div>
                                    <div class="detail-item"><span class="detail-label">End Time:</span> <span id="end-time"></span></div>
                                    <div class="detail-item"><span class="detail-label">Duration:</span> <span id="duration"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Execution Steps Card -->
                    <div class="ant-card styled-card">
                        <div class="ant-card-head">
                            <div class="ant-card-head-title"><i class="fas fa-shoe-prints"></i>Execution Steps</div>
                        </div>
                        <div class="ant-card-body">
                            <div id="steps-container">
                                <div class="placeholder"><div class="ant-spin ant-spin-spinning"></div><p>Loading execution steps...</p></div>
                            </div>
                        </div>
                    </div>

                    <!-- Execution Results Card -->
                    <div class="ant-card styled-card">
                        <div class="ant-card-head">
                            <div class="ant-card-head-title"><i class="fas fa-clipboard-check"></i>Execution Results</div>
                        </div>
                        <div class="ant-card-body">
                            <div id="results-container">
                                <div class="placeholder"><div class="ant-spin ant-spin-spinning"></div><p>Loading execution results...</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>



</body>
</html>
