<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NoETL Playbook Catalog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- The build process will automatically inject the correct CSS link here -->
  <script type="module" crossorigin src="/assets/catalog.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="/">
                    <i class="fas fa-book-open"></i>
                    <span>NoETL Playbook Catalog</span>
                </a>
            </div>
            <nav class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal">
                <div class="ant-menu-item ant-menu-item-selected">
                    <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="catalog-title" class="page-title">Playbook Catalog</h1>
                        <p id="catalog-subtitle" class="page-subtitle">Browse, manage, and execute your playbooks.</p>
                    </div>
                </div>
                <div class="ant-col ant-col-md-8 page-actions">
                     <a href="/editor/new" class="ant-btn ant-btn-primary"><i class="fas fa-plus-circle"></i> Create New Playbook</a>
                </div>
            </div>

            <!-- This panel will be used for info messages, like execution status -->
            <div id="info-panel" class="ant-alert" 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 class="ant-card styled-card">
                <div class="ant-card-head">
                    <div class="ant-card-head-title"><i class="fas fa-list-ul"></i>Available Playbooks</div>
                </div>
                <div class="ant-card-body">
                    <div class="ant-table-container">
                        <table class="ant-table">
                            <thead class="ant-table-thead">
                                <tr>
                                    <th class="ant-table-cell">Name</th>
                                    <th class="ant-table-cell">Path</th>
                                    <th class="ant-table-cell">Version</th>
                                    <th class="ant-table-cell">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="playbook-list" class="ant-table-tbody">
                                <!-- JavaScript will populate this area -->
                                <tr>
                                    <td colspan="4" style="text-align: center; padding: 24px;">
                                        <div class="placeholder"><div class="ant-spin ant-spin-spinning"></div><p>Loading playbooks...</p></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- The Payload Modal structure, which catalog.js will control -->
    <div class="ant-modal-root" id="payload-modal" style="display: none; position: fixed; inset: 0; z-index: 1000;">
        <div class="ant-modal-mask" style="background-color: rgba(0, 0, 0, 0.45); position: fixed; inset: 0; z-index: 1000;"></div>
        <div class="ant-modal-wrap" style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; outline: 0; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; z-index: 1001;">
            <div class="ant-modal" style="width: 800px; position: relative; top: 0; margin: 0 auto; z-index: 1001;">
                <div class="ant-modal-content" style="background-color: white; border-radius: 12px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);">
                    <div class="ant-modal-header" style="border-radius: 12px 12px 0 0; background: linear-gradient(to right, #fafafa, #f5f5f5); padding: 16px 24px;">
                        <div class="ant-modal-title" id="payloadModalLabel" style="font-size: 18px; font-weight: 600; color: rgba(0, 0, 0, 0.85);">
                            <i class="fas fa-code" style="margin-right: 10px; color: #1890ff;"></i>Add Payload
                        </div>
                    </div>
                    <button type="button" class="ant-modal-close" id="modal-close" aria-label="Close" style="position: absolute; top: 0; right: 0; z-index: 10; padding: 0; color: rgba(0, 0, 0, 0.45); font-weight: 700; line-height: 1; text-decoration: none; background: transparent; border: 0; outline: 0; cursor: pointer; transition: color 0.3s;">
                        <span class="ant-modal-close-x" style="display: block; width: 56px; height: 56px; font-size: 16px; font-style: normal; line-height: 56px; text-align: center; text-transform: none; text-rendering: auto;">
                            <span class="anticon anticon-close"><i class="fas fa-times"></i></span>
                        </span>
                    </button>
                    <div class="ant-modal-body" style="padding: 24px;">
                        <div class="ant-tabs ant-tabs-top" id="payloadTabs">
                            <div class="ant-tabs-nav" style="margin-bottom: 16px; border-bottom: 1px solid #f0f0f0;">
                                <div class="ant-tabs-nav-list" style="display: flex;">
                                    <div class="ant-tabs-tab ant-tabs-tab-active" id="json-tab" style="margin-right: 8px; padding: 8px 16px; border: 1px solid #f0f0f0; border-bottom: none; border-radius: 4px 4px 0 0; background-color: white; position: relative; bottom: -1px;">
                                        <div class="ant-tabs-tab-btn" role="tab" aria-selected="true" data-tab-id="json-content" style="font-weight: 500;">JSON Input</div>
                                    </div>
                                    <div class="ant-tabs-tab" id="file-tab" style="padding: 8px 16px; border: 1px solid #f0f0f0; border-bottom: none; border-radius: 4px 4px 0 0; background-color: #f5f5f5;">
                                        <div class="ant-tabs-tab-btn" role="tab" aria-selected="false" data-tab-id="file-upload" style="font-weight: 500;">File Upload</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-tabs-content">
                                <div class="ant-tabs-tabpane ant-tabs-tabpane-active" id="json-content" role="tabpanel" aria-labelledby="json-tab">
                                    <div class="ant-form-item" style="margin-top: 16px;">
                                        <label for="payload-json" class="ant-form-item-label" style="font-weight: 500; margin-bottom: 8px;">
                                            <i class="fas fa-code" style="margin-right: 8px; color: #1890ff;"></i>Enter JSON payload:
                                        </label>
                                        <div class="ant-form-item-control">
                                            <div class="ant-form-item-control-input">
                                                <textarea class="ant-input" id="payload-json" rows="10" placeholder='{"key": "value"}' style="resize: vertical; border-radius: 8px; padding: 12px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); border: 1px solid #1890ff;"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ant-tabs-tabpane" id="file-upload" role="tabpanel" aria-labelledby="file-tab" style="display: none;">
                                    <div class="ant-form-item" style="margin-top: 16px;">
                                        <label for="payload-file" class="ant-form-item-label" style="font-weight: 500; margin-bottom: 8px;">
                                            <i class="fas fa-upload" style="margin-right: 8px; color: #1890ff;"></i>Upload JSON file:
                                        </label>
                                        <div class="ant-form-item-control">
                                            <div class="ant-form-item-control-input">
                                                <div class="ant-upload ant-upload-select">
                                                    <div class="ant-upload ant-upload-select-text">
                                                        <input type="file" id="payload-file" accept=".json" style="display: block;">
                                                        <div id="file-name-display" style="margin-top: 8px; color: rgba(0, 0, 0, 0.65);"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ant-form-item" style="margin-top: 16px;">
                            <div class="ant-checkbox-wrapper" style="display: flex; align-items: center;">
                                <span class="ant-checkbox">
                                    <input type="checkbox" class="ant-checkbox-input" id="merge-payload">
                                    <span class="ant-checkbox-inner"></span>
                                </span>
                                <span>Merge with existing workload (instead of replacing)</span>
                            </div>
                        </div>
                    </div>
                    <div class="ant-modal-footer" style="border-top: 1px solid #f0f0f0; padding: 16px 24px; border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end;">
                        <button type="button" class="ant-btn" id="modal-cancel" style="margin-right: 12px; height: 38px; padding: 0 16px; border-radius: 6px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-times" style="margin-right: 8px;"></i>Cancel
                        </button>
                        <button type="button" class="ant-btn ant-btn-primary" id="execute-with-payload" style="height: 38px; padding: 0 16px; background: linear-gradient(to right, #1890ff, #096dd9); border: none; border-radius: 6px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-check" style="margin-right: 8px;"></i>Execute
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- This single script tag is the entry point for this page -->
</body>
</html>
