{% extends 'base.html' %}
{% block title %}IvoryOS | Design execution{% endblock %}

{% block body %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>

{% if no_deck_warning and not dismiss %}
{# auto pop import when there is no deck#}
<script type="text/javascript">
    function OpenBootstrapPopup() {
        $("#importModal").modal('show');
    }
    window.onload = function () {
        OpenBootstrapPopup();
    };
</script>
{% endif %}
<style>
    #config-container {
        height: 70vh;
        /* Initial height */
        overflow-y: auto;
        min-height: 50px;
        transition: height 0.1s ease-out;
        /* Smooth resizing mostly */
    }



    #resizer {
        height: 12px;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        cursor: row-resize;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    #resizer:hover {
        background: #e9ecef;
    }

    #resizer i {
        color: #adb5bd;
        font-size: 1.2rem;
    }
</style>

<div class="d-flex flex-column" style="height: calc(100vh - 100px);">
    <div id="config-container" class="d-flex flex-column flex-shrink-0">
        <div class="row h-100 m-0">
            {% include 'components/run_panel.html' %}
        </div>
    </div>

    <div id="resizer" title="Drag to resize">
        <i class="bi bi-three-dots"></i>
    </div>

    <div id="monitor-container" class="d-flex flex-column flex-grow-1"
        style="overflow: hidden; min-height: 20px; padding-top: 10px;">
        <div class="row h-100">
            {% include 'components/progress_panel.html' %}
            {% include 'components/logging_panel.html' %}
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const resizer = document.getElementById('resizer');
        const configContainer = document.getElementById('config-container');
        let isResizing = false;

        resizer.addEventListener('mousedown', function (e) {
            isResizing = true;
            document.body.style.cursor = 'row-resize';
            document.body.style.userSelect = 'none';
            configContainer.style.transition = 'none'; // Disable transition during drag
        });

        document.addEventListener('mousemove', function (e) {
            if (!isResizing) return;

            const rect = configContainer.getBoundingClientRect();
            const offset = rect.top + window.scrollY; // Position relative to document
            const newHeight = e.pageY - offset; // Use pageY for robust drag

            if (newHeight > 50 && newHeight < window.innerHeight - 200) {
                configContainer.style.height = newHeight + 'px';
            }
        });

        document.addEventListener('mouseup', function (e) {
            if (isResizing) {
                isResizing = false;
                document.body.style.cursor = '';
                document.body.style.userSelect = '';
                // configContainer.style.transition = 'height 0.1s ease-out'; // Re-enable if desired
            }
        });
    });
</script>

{# Include error modal #}
{% include 'components/error_modal.html' %}

<!-- Task Name Modal -->
<div class="modal fade" id="taskNameModal" tabindex="-1" aria-labelledby="taskNameModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="taskNameModalLabel">System Busy - Queue Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="queueTaskName" class="form-label">Display Name</label>
                    <input type="text" class="form-control" id="queueTaskName" placeholder="Name (optional)">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmQueueBtn">Add to Queue</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Select submit buttons for relevant forms
        // We target buttons directly to preserve their name/value in submission
        const runButtons = document.querySelectorAll(
            'form[name="run"] button[type="submit"], ' +
            'form[name="bo"] button[type="submit"], ' +
            'button[type="submit"][form="online-config"]'
        );

        // Helper to check system busy status
        async function isSystemBusy() {
            try {
                const response = await fetch("{{ url_for('execute.runner_status') }}");
                const data = await response.json();
                return data.busy;
            } catch (error) {
                console.error('Error checking system status:', error);
                return false;
            }
        }

        runButtons.forEach(btn => {
            btn.addEventListener('click', async function (e) {
                // If we already processed this click, let it propagate naturally
                if (btn.dataset.processed === "true") {
                    return;
                }

                e.preventDefault(); // Stop immediate submission
                e.stopPropagation();

                const busy = await isSystemBusy();
                const form = btn.form;

                if (busy) {
                    // Check if Bootstrap is available
                    if (typeof bootstrap !== 'undefined') {
                        try {
                            const modalElement = document.getElementById('taskNameModal');
                            const modal = new bootstrap.Modal(modalElement);
                            const taskNameInput = document.getElementById('queueTaskName');

                            // Initialize input
                            taskNameInput.value = "";

                            modal.show();

                            // Handle confirm click
                            const confirmBtn = document.getElementById('confirmQueueBtn');
                            // Remove old listener to avoid duplicates if multiple clicks
                            const newConfirmBtn = confirmBtn.cloneNode(true);
                            confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

                            newConfirmBtn.addEventListener('click', function () {
                                const customName = taskNameInput.value;
                                if (customName) {
                                    // Append custom name to form
                                    let displayInput = form.querySelector('input[name="display_name"]');
                                    if (!displayInput) {
                                        displayInput = document.createElement('input');
                                        displayInput.type = 'hidden';
                                        displayInput.name = 'display_name';
                                        form.appendChild(displayInput);
                                    }
                                    displayInput.value = customName;
                                }

                                modal.hide();
                                btn.dataset.processed = "true";
                                btn.click();
                            });
                        } catch (err) {
                            console.error("Error showing modal:", err);
                            // Fallback if modal fails
                            if (confirm("System is busy. Add to queue?")) {
                                btn.dataset.processed = "true";
                                btn.click();
                            }
                        }
                    } else {
                        // Fallback if bootstrap missing
                        if (confirm("System is busy. Add to queue? (Display name unavailable)")) {
                            btn.dataset.processed = "true";
                            btn.click();
                        }
                    }

                } else {
                    // System not busy, proceed normally
                    btn.dataset.processed = "true";
                    btn.click();
                }
            });
        });
    });
</script>

<script src="{{ url_for('static', filename='js/socket_handler.js') }}"></script>

{% endblock %}