<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>{{ title }}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/fontawesome.all.css">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand mx-1" href="/">{{ title }}</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item mx-1 w-100 my-2 my-lg-0">
                        <select class="form-select w-100" id="configSelect" onchange="navigateToConfig()"
                            aria-label="Select config">
                            {% for user_config_name, user_config in user_config_store.items() %}
                            <option value="/config/{{ user_config_name }}" {% if
                                user_config_name==current_user_config_name %}selected{% endif %}>{{
                                user_config.get_friendly_name() }}</option>
                            {% endfor %}
                        </select>
                    </li>
                    <li class="nav-item mx-1 btn-group dropdown" id="action-dropdown-group">
                        <button class="btn btn-primary save-action" type="button">Save</button>
                        <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button"
                            id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item menu-primary btn-primary save-action" type="button">
                                    Save changes</button></li>
                            <li><button class="dropdown-item menu-danger btn-danger reset-action" type="button"
                                    id="menu-discard">
                                    Reset</button></li>
                            <li class="dropdown-divider"></li>
                            <li><button class="dropdown-item menu-success btn-success launch-action" type="button">
                                    Launch main program</button></li>
                            <li><button class="dropdown-item menu-danger btn-danger terminate-action" type="button">
                                    Terminate editor</button></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="mt-2" id="status-container">
        <div class="container col-md-8" id="status-info">
            <div class="alert alert-light" id="status-bar">
                <div class="spinner-border text-primary" role="status" id="status-icon"></div>
            </div>
        </div>
    </div>
    <div id="flash-container">
        <div class="container col-md-8" id="flash-messages">
            {% for category, message in get_flashed_messages(with_categories=true) %}
            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                <div>{{ message | safe }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="container col-md-8">
        <div id="editor-container"></div>

        <div class="d-flex justify-content-between justify-content-lg-end" id="action-container-group">
            <button class="btn btn-primary col-5 col-lg-2 save-action" type="button">Save</button>
            <div class="mx-1"></div>
            <button class="btn btn-danger col-5 col-lg-2 reset-action" type="button">Reset</button>
        </div>
        <div class="my-1">
            <h2>Preview json</h2>
            <textarea id="json-preview" class="form-control" title="Preview json" placeholder="" disabled></textarea>
        </div>
        <div class="my-1">
            <h2>Output of main program</h2>
            <textarea id="main-output" class="form-control" title="Output of main program"
                placeholder="After you launch the main program, the output will show here. Resets when refreshing the page."
                disabled></textarea>
        </div>
        <div class="my-1">
            <h2>Output of data-saving script</h2>
            <textarea id="save-output" class="form-control" title="Output of data-saving script"
                placeholder="After you save the current config, the output will show here. Resets when refreshing the page."
                disabled></textarea>
        </div>
        <div class="mb-5"></div>
    </div>
    <script src="/static/js/jquery.slim.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/jsoneditor.min.js"></script>
    <script src="/static/js/index.js"></script>
</body>

</html>