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

{% block body %}
    {# overlay block for design-agent gen #}
    <div id="overlay" class="overlay">
        <div>
            <h3 id="overlay-text">Generating design, please wait...</h3>
            <div class="spinner-border" role="status"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 scroll-column" id="sidebar-wrapper">
            {% include 'components/sidebar.html' %}
        </div>
        <div class="col-md-9 scroll-column" id="canvas-wrapper">
            {% include 'components/canvas.html' %}
        </div>

    </div>

    {# Include all modals #}
    {% include 'components/modals.html' %}
    {% include 'components/info_modal.html' %}


    {# Include all scripts #}
    <script>
        const updateListUrl = "{{ url_for('design.design_steps.update_list') }}";
        const scriptUIStateUrl = "{{ url_for('design.update_ui_state') }}";
        const scriptMetaUrl = "{{ url_for('design.update_script_meta') }}";
        const scriptStepUrl = `{{ url_for('design.design_steps.get_step', uuid=0) }}`;
        const scriptStepDupUrl = `{{ url_for('design.design_steps.duplicate_action', uuid=0) }}`;
        const scriptDeleteUrl = "{{ url_for('design.clear_draft') }}";
        const scriptCompileUrl = "{{ url_for('design.compile_preview') }}";
        const variablesUrl = "{{ url_for('design.get_available_variables') }}";
    </script>
    <script src="{{ url_for('static', filename='js/sortable_design.js') }}"></script>
    <script src="{{ url_for('static', filename='js/action_handlers.js') }}"></script>
    <script src="{{ url_for('static', filename='js/script_metadata.js') }}"></script>
    <script src="{{ url_for('static', filename='js/ui_state.js') }}"></script>
    <script src="{{ url_for('static', filename='js/agent_overlay.js') }}"></script>
{% endblock %}