<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ texts["WINDOW_TITLE"] }}</title>
    <link rel="icon" href="{{ url_for('static', filename='../logo.png') }}" type="image/png">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <!-- Left Panel: Controls -->
        <div class="panel left-panel">
            <div class="control-group">
                <h2>{{ texts["INPUT_TITLE"] }}</h2>
                <div class="input-button-row">
                    <button id="browse-input-file-btn" class="browse-btn">{{ texts["SELECT_INPUT_FILE_BUTTON"] }}</button>
                    <span class="or-text">or</span>
                    <button id="browse-input-folder-btn" class="browse-btn">{{ texts["SELECT_INPUT_FOLDER_BUTTON"] }}</button>
                    
                    
                </div>
                <input type="text" id="input-dir" placeholder="{{ texts['INPUT_PLACEHOLDER'] }}">
            </div>

            <hr>

            <div class="control-group">
                <h2>{{ texts["OUTPUT_TITLE"] }}</h2>
                <div class="file-input-group">
                    <button id="browse-output-btn" class="browse-btn">{{ texts["BROWSE_BUTTON"] }}</button>
                </div>
                <input type="text" id="output-dir" placeholder="{{ texts['OUTPUT_PLACEHOLDER'] }}">
            </div>

            <hr>

            <div class="control-group horizontal-group">
                <div class="sub-group">
                    <label for="data-source">{{ texts["DATA_SOURCE_TITLE"] }}</label>
                    <select id="data-source">
                        <option value="{{ texts['DATA_SOURCE_FEE'] }}" selected>{{ texts["DATA_SOURCE_FEE"] }}</option>
                        <option value="{{ texts['DATA_SOURCE_PSG'] }}">{{ texts["DATA_SOURCE_PSG"] }}</option>
                    </select>
                </div>
                <div class="sub-group">
                    <label for="model-name">{{ texts["MODEL_TITLE"] }}</label>
                    <select id="model-name">
                        <option value="ez6" selected>ez6</option>
                        <option value="ez6moe">ez6moe</option>
                    </select>
                </div>
            </div>

            <div id="zmax-options" class="control-group" style="display: none;"></div>

            <hr>

            <div class="control-group">
                <h2>{{ texts["OPTIONS_TITLE"] }}</h2>
                <div class="options-group">
                    <div class="options-left">
                        <button id="select-channels-btn" class="browse-btn">Select channels (optional)</button>
                        <div class="checkbox-group">
                            <label><input type="checkbox" id="gen-plot"> {{ texts["OPTIONS_PLOT"] }}</label>
                            <label><input type="checkbox" id="gen-probs"> {{ texts["OPTIONS_PROBS"] }}</label>
                            <label><input type="checkbox" id="gen-stats"> {{ texts["OPTIONS_STATS"] }}</label>
                        </div>
                    </div>
                    <div class="help-button-stack">
                        <button id="help-btn" class="help-btn">Open help & manual</button>
                        <button id="show-example-btn" class="help-btn">Run demo</button>
                        <button id="open-recent-btn" class="help-btn">Open recent results</button>
                    </div>
                </div>
            </div>

            <button id="run-btn" class="run-btn">{{ texts["RUN_BUTTON"] }}</button>
        </div>

        <!-- Right Panel: Console -->
        <div class="panel right-panel">
            <div id="console" class="console-output">
                <pre>{{ texts["CONSOLE_INIT_MESSAGE"] }}</pre>
            </div>
        </div>
    </div>

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