<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    {#bootstrap#}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    {#static#}
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    {#for python code displaying#}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
    <script>hljs.highlightAll();</script>
    {#drag design#}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    {#drag card#}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class= "container">
{#            {{ module_config }}#}

            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                {% if current_user.is_authenticated %}
                    {% if current_user.settings.logo_mode == 'replace' and current_user.settings.logo_filename %}
                        <img src="{{ url_for('static', filename='user_logos/' ~ current_user.settings.logo_filename) }}" alt="User Logo" height="50">
                    {% else %}

                        {% if current_user.settings.logo_mode == 'add' and current_user.settings.logo_filename %}
                            <img src="{{ url_for('static', filename='user_logos/' ~ current_user.settings.logo_filename) }}" alt="User Logo" height="50" class="ms-2">
                        {% endif %}
                        <img src="{{ url_for('static', filename='ivoryos_logo.png') }}" alt="IvoryOS" height="50">
                    {% endif %}
                {% else %}
                    <img src="{{ url_for('static', filename='ivoryos_logo.png') }}" alt="IvoryOS" height="50">
                {% endif %}
            </a>



            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.index') }}" aria-current="page">Home</a>
                    </li>
                    {% if enable_design %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('library.load_from_database') }}" aria-current="page">Library</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('design.experiment_builder') }}">Design</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('execute.experiment_run') }}">Compile/Run</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('data.list_workflows') }}">Data</a>
                        </li>
                    {% endif %}

                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('control.deck_controllers') }}">Devices</a></li>
                    </li>
{#                    <li class="nav-item">#}
{#                        <a class="nav-link" href="{{ url_for('control.controllers_home') }}">Temp Devices</a></li>#}
{#                    </li>#}
{#                    <li class="nav-item">#}
{#                        <a class="nav-link" href="{{ url_for('main.help_info') }}">About</a>#}
{#                    </li>#}
                    {% if plugins %}
                        {% for plugin in plugins %}
                            <li class="nav-item">
                                <a class="nav-link" href="{{ url_for(plugin+'.main') }}">{{ plugin.capitalize() }}</a></li>
                            </li>
                        {% endfor %}
                    {% endif %}
                </ul>
                <ul class="navbar-nav ms-auto">
                    {% if current_user.is_authenticated %}
                        <div class="dropdown">
                            <li class="nav-item " aria-expanded="false"><i class="bi bi-person-circle"></i> {{ current_user.get_id() }}</li>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for("auth.change_password") }}" role="button" aria-expanded="false">Change Password</a></li>
                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#logoModal" role="button" aria-expanded="false">Customize Logo</a></li>
                                <li><a class="dropdown-item" href="{{ url_for("auth.logout") }}" role="button" aria-expanded="false">Logout</a></li>
                            </ul>

                        </div>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for("auth.login") }}">Login</a>
                        </li>
                    {% endif %}
{#                    <li class="nav-item">#}
{#                        <a class="nav-link"href="{{ url_for("signup") }}">Signup</a>#}
{#                    </li>#}
                </ul>
            </div>
        </div>
    </nav>

    <div class= "container">
        <div class="flash">
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                <div class="alert alert-warning">
                    Message:
                    {% for message in messages %}
                        <div >
                            {{ message|safe }}
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
            {% endwith %}
        </div>
        {% block body %}{% endblock %}
    </div>

    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModal" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="importModal">Import deck by file path</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('control.temp.import_deck') }}" enctype="multipart/form-data">
                    <div class="modal-body">
                        <h5>from connection history</h5>
                        <div class="form-group">
                            <select class="form-select" name="filepath">
                            <option disabled selected value> -- select an option -- </option>
                            {% for connection in history %}
                                <option style="overflow-wrap: break-word;" name="filepath" id="filepath" value="{{connection}}">{{connection}}</option>
                            {% endfor %}
{#                            <option>clear history</option>#}
                            </select>
                        </div>
                        <h5>input manually</h5>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="filepath">File Path:</label>
                            <input type="text" class="form-control" name="filepath" id="filepath">
                        </div>
                        <div class="input-group mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="update" name="update" value="update">
                                <label class="form-check-label" for="update">Update editor config</label>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="dismiss" name="dismiss" value="dismiss">
                                <label class="form-check-label" for="dismiss">Don't remind me</label>
                            </div>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button>
                            <button type="submit"  class="btn btn-primary"> Save </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Logo Customization Modal -->
    <div class="modal fade" id="logoModal" tabindex="-1" aria-labelledby="logoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow-lg">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoModalLabel">Customize Navbar Logo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST"
                    action="{{ url_for('main.customize_logo') }}"
                    enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Upload your logo</label>
                            <input type="file" name="logo" accept="image/*" class="form-control" required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold">Display mode</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="mode" id="add" value="add" checked>
                                <label class="form-check-label" for="add">
                                Add next to IvoryOS logo
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="mode" id="replace" value="replace">
                                <label class="form-check-label" for="replace">
                                Replace IvoryOS logo
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Apply</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>
</html>