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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tutor Deck">

    <title>Tutor Deck</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.png') }}">
    <!-- CSS -->
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <!-- <link rel="stylesheet" href="css/styles.css"> -->
    <link href="{{ url_for('static', filename='css/deck.css') }}" rel="stylesheet">
    <script src="{{url_for('static', filename='js/htmx.min.js')}}"></script>
    <script src="{{url_for('static', filename='js/sse.js')}}"></script>
</head>

<body>
    <main>
        <nav>
            <header>
                <a href="{{ url_for('home') }}"><img id="web-logo" src="{{ url_for('static', filename='img/tutor deck logo.svg') }}"/></a>
                <a href="{{ url_for('home') }}"><img id="mobile-logo" src="{{ url_for('static', filename='img/Mobile Logo.svg') }}"/></a>
            </header>
            <menu>
                <a href="{{ url_for('configuration') }}" id="configuration">
                    <img src="{{ url_for('static', filename='img/gear.svg') }}"/>
                    <h4>Configuration</h4>
                </a>
                <a href="{{ url_for('plugin_store') }}" id="plugin-marketplace">
                    <img src="{{ url_for('static', filename='img/shopping-bag.svg') }}"/>
                    <h4>Plugin Marketplace</h4>
                </a>
                <a href="{{ url_for('plugin_installed') }}" id="my-plugins">
                    <img src="{{ url_for('static', filename='img/stack.svg') }}"/>
                    <h4>Installed Plugins</h4>
                </a>
                <a href="{{ url_for('advanced') }}" id="advanced">
                    <img src="{{ url_for('static', filename='img/advanced-mode.svg') }}"/>
                    <h4>Developer Mode</h4>
                </a>
            </menu>
            <menu>
                <a href="{{ url_for('local_launch_view') }}" id="local-launch">
                    <img src="{{ url_for('static', filename='img/local-launch.svg') }}"/>
                    <h4>Apply changes</h4>
                </a>
                <p>Run launch platform to save all changes.</p>
            </menu>
        </nav>

        <section>
            <header>
                <div id="warning-command-running" class="show-on-command-running">
                    <img src="{{ url_for('static', filename='img/Featured icon.svg')}}" alt="">
                    <span>Command execution in progress. <a href="{{ url_for('advanced') }}">Click here</a> to view details.</span>
                </div>
                {% block workspace_header %}{% endblock %}
            </header>
            <section>
                {% block workspace_content %}
                {% endblock %}
                <div class="tutor-logs-container">
                    <pre id="tutor-logs" hx-ext="sse" sse-connect="{{ url_for('cli_logs_stream') }}" sse-swap="logs"></pre>
                </div>
            </section>
            <footer>{% block footer %}{% endblock %}</footer>
        </section>
    </main>

    <div class="modal-container" id="modal_container">
        <div class="modal-content">
            <div class="modal-header">
                <img src="{{ url_for('static', filename='img/Featured icon.svg') }}" alt="">
            </div>
            <div class="modal-body">
                <h3>Apply Changes to Your Platform?</h3>
                <p>This will run Launch Platform to apply all recent plugin changes. The process may take a few minutes to complete.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="close-modal-button">Not Now</button>
                <form method="POST" action="{{ url_for('cli_local_launch')}}">
                    <button type="submit">Apply Changes</button>
                </form>
            </div>
        </div>
    </div>

    <div class="toast-container">
        <div class="toast">
            <div class="toast-content">
                <div class="title">
                    <img src="{{ url_for('static', filename='img/Icon.svg' )}}">
                    <span class="text text-1" id="toast-title"> {{ toast }} </span>
                    <img class="close-toast-button" src="{{ url_for('static', filename='img/X.svg' )}}">
                </div>
                <div class="message">
                    <span class="text text-2" id="toast-description">
                        {{ toast_description }}
                    </span>
                </div>
            </div>
            <div class="toast-footer" id="toast-footer">
                <button type="button" class="close-toast-button">Not Now</button>
                <form method="POST" action="{{ url_for('cli_local_launch')}}">
                    <button type="submit">Apply Changes</button>
                </form>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/deck.js') }}"></script>
    {% if sidebar_active_tab %}
    <script>
        document.getElementById('{{ sidebar_active_tab }}').classList.toggle('sidebar-tab-selected');
    </script>
    {% endif %}
    <script>
        const logsElement = document.getElementById("tutor-logs");
    </script>
    {% block scripts %}{% endblock %}
    <script src="{{ url_for('static', filename='js/logs.js') }}"></script>
</body>

</html>
