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

    <!--
      These CDN links are for development or for a non-bundled setup.
      In a fully bundled application (recommended), these 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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reactflow/11.7.0/reactflow.min.css">

  <script type="module" crossorigin src="/assets/editor.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-project-diagram"></i>
                    <span>NoETL Playbook Editor</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 ant-menu-item-selected">
                    <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-12">
                    <div class="page-title-container">
                        <h1 id="editor-title" class="page-title">Playbook Editor</h1>
                        <p class="page-subtitle">Design, configure, and execute your data workflows</p>
                    </div>
                </div>
                <div class="ant-col ant-col-md-12 page-actions">
                    <button id="save-playbook" class="ant-btn ant-btn-primary"><i class="fas fa-save"></i> Save</button>
                    <button id="execute-playbook" class="ant-btn btn-success"><i class="fas fa-play"></i> Execute</button>
                    <button id="export-yaml" class="ant-btn btn-info"><i class="fas fa-file-export"></i> Export YAML</button>
                    <button id="import-yaml" class="ant-btn"><i class="fas fa-file-import"></i> Import YAML</button>
                </div>
            </div>

            <div class="ant-row">
                <div class="ant-col ant-col-24">
                    <div id="info-panel" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-closable" style="display: none;" role="alert">
                        <span id="info-message" class="ant-alert-description"></span>
                        <button type="button" class="ant-alert-close-icon" aria-label="Close">
                            <span class="anticon anticon-close"><i class="fas fa-times"></i></span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="ant-row editor-layout-row">
                <!-- Main Editor Column -->
                <div class="ant-col ant-col-md-18">
                    <div class="ant-card styled-card">
                        <div class="ant-card-head">
                            <div class="ant-tabs ant-tabs-top ant-tabs-card" id="editor-tabs">
                                <div class="ant-tabs-nav">
                                    <div class="ant-tabs-nav-list">
                                        <div class="ant-tabs-tab ant-tabs-tab-active" data-tab-id="workflow"><div class="ant-tabs-tab-btn"><i class="fas fa-project-diagram"></i>Workflow</div></div>
                                        <div class="ant-tabs-tab" data-tab-id="workload"><div class="ant-tabs-tab-btn"><i class="fas fa-cogs"></i>Workload</div></div>
                                        <div class="ant-tabs-tab" data-tab-id="yaml"><div class="ant-tabs-tab-btn"><i class="fas fa-code"></i>YAML</div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ant-card-body" style="padding: 0;">
                            <div class="ant-tabs-content" id="editor-tab-content">
                                <div class="ant-tabs-tabpane ant-tabs-tabpane-active" id="workflow" role="tabpanel"><div id="workflow-editor" class="workflow-canvas"></div></div>
                                <div class="ant-tabs-tabpane" id="workload" role="tabpanel" style="display: none;"><div id="workload-editor"></div></div>
                                <div class="ant-tabs-tabpane" id="yaml" role="tabpanel" style="display: none;"><div id="yaml-editor"></div></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Side Panel Column -->
                <div class="ant-col ant-col-md-6">
                    <div class="ant-card styled-card">
                        <div class="ant-card-head"><div class="ant-card-head-title"><i class="fas fa-sliders-h"></i>Properties</div></div>
                        <div class="ant-card-body properties-panel" id="properties-panel">
                            <div class="placeholder"><i class="fas fa-mouse-pointer"></i><p>Select a node to edit its properties</p></div>
                        </div>
                    </div>

                    <div class="ant-card styled-card">
                        <div class="ant-card-head"><div class="ant-card-head-title"><i class="fas fa-plus"></i>Add Components</div></div>
                        <div class="ant-card-body">
                            <div class="component-buttons">
                                <button class="ant-btn btn-add-step" id="add-step"><i class="fas fa-plus-circle"></i> Add Step</button>
                                <button class="ant-btn btn-add-task" id="add-task"><i class="fas fa-plus-circle"></i> Add Task</button>
                                <button class="ant-btn btn-add-condition" id="add-condition"><i class="fas fa-plus-circle"></i> Add Condition</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Import Modal -->
    <div class="ant-modal-root" id="import-modal" style="display: none;">
        <div class="ant-modal-mask"></div>
        <div class="ant-modal-wrap">
            <div class="ant-modal">
                <div class="ant-modal-content">
                    <div class="ant-modal-header">
                        <div class="ant-modal-title" id="import-modal-label"><i class="fas fa-file-import"></i>Import Playbook YAML</div>
                    </div>
                    <button type="button" class="ant-modal-close" aria-label="Close"><span class="ant-modal-close-x"><i class="fas fa-times"></i></span></button>
                    <div class="ant-modal-body">
                        <div class="ant-form-item">
                            <label for="import-yaml-content" class="ant-form-item-label"><i class="fas fa-code"></i>Paste YAML content:</label>
                            <textarea class="ant-input" id="import-yaml-content" rows="15"></textarea>
                        </div>
                        <div class="ant-form-item">
                            <label for="import-yaml-file" class="ant-form-item-label"><i class="fas fa-upload"></i>Or upload a YAML file:</label>
                            <input class="ant-input" type="file" id="import-yaml-file" accept=".yaml,.yml">
                        </div>
                    </div>
                    <div class="ant-modal-footer">
                        <button type="button" class="ant-btn" id="modal-cancel"><i class="fas fa-times"></i>Cancel</button>
                        <button type="button" class="ant-btn ant-btn-primary" id="confirm-import"><i class="fas fa-check"></i>Import</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
