{# Canvas header component #}
<div class="d-flex align-items-center justify-content-between">
    <!-- Left: Script Info -->
    <div>
        <span class="fw-bold">{{ script.name or "Untitled Script" }}</span>
        <span class="badge bg-secondary">{{ script.status }}</span>
    </div>

    <!-- Center: Main Actions -->
    <div class="btn-toolbar" role="toolbar">
        <button class="btn btn-primary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#newScriptModal">New</button>
        <button class="btn btn-secondary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#jsonModal">Import</button>
        <a class="btn btn-secondary btn-sm me-1" href="{{url_for('design.design_files.download', filetype='script')}}">Export</a>
        <button class="btn btn-secondary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#saveasModal">Save as</button>
        <div class="btn-group">
            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">More</button>
            <ul class="dropdown-menu">
                <li>
                    <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#renameModal">Rename</button>
                </li>
                <li>
                    <a class="dropdown-item {% if not script.name or script.status == 'finalized' %}disabled{% endif %}" href="{% if script.name and script.status != 'finalized' %}{{url_for('library.publish')}}{% else %}#{% endif %}">Save</a>
                </li>
                {% if not script.status == 'finalized' %}
                <li>
                    <a class="dropdown-item" href="{{url_for('library.finalize')}}">Disable editing</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>

<!-- Tabs for Info/Prep/Experiment/Cleanup below header -->
<div class="d-flex align-items-center mt-2 justify-content-between">
    <ul class="nav nav-tabs mb-0">
        <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='prep' else 'nav-link'}}" href="{{url_for('design.toggle_script_type', stype='prep') }}">Prep</a></li>
        <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='script' else 'nav-link'}}" href="{{url_for('design.toggle_script_type', stype='script') }}">Experiment</a></li>
        <li class="nav-item"><a class="{{'nav-link active' if script.editing_type=='cleanup' else 'nav-link'}}" href="{{url_for('design.toggle_script_type', stype='cleanup') }}">Clean up</a></li>
    </ul>
    <div class="d-flex align-items-center ms-auto">
        <form method="POST" action="{{ url_for('design.toggle_show_code') }}" class="mb-0 me-3">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="showPythonCodeSwitch" name="show_code"
                       onchange="this.form.submit()" {% if session.get('show_code') %}checked{% endif %}>
                <label class="form-check-label" for="showPythonCodeSwitch">Show Code</label>
            </div>
        </form>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="toggleLineNumbers" onchange="toggleLineNumbers()">
            <label class="form-check-label" for="toggleLineNumbers">Show Line Numbers</label>
        </div>
    </div>
</div>