{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template local_coursegen/courseai_page

    AI Course Creation Wizard - Step 1: Context

    Example context (json):
    {
        "logourl": "https://example.com/local/coursegen/pix/logo.png",
        "guidelines": "[{\"id\":\"si_1\",\"name\":\"Example\",\"category\":\"General\",\"description\":\"...\"}]",
        "languages": "[{\"code\":\"es\",\"name\":\"Español (es)\"}]",
        "defaultlang": "es"
    }
}}

{{! Wizard CSS will be loaded via PHP $PAGE->requires->css() }}

<!-- ══════════════════════ SIDEBAR ════════════════════════════════════ -->
{{> local_coursegen/sidebar }}
<div class="courseai-sidebar-backdrop" id="courseaiSidebarBackdrop"></div>

<!-- ══════════════════════ MAIN ════════════════════════════════════════ -->
<main class="app-main aicoursecreation-main">
  <div class="container">
    <div class="courseai-workspace{{#isresuming}} is-planning{{/isresuming}}" id="courseaiWorkspace">

    <!-- Context step form (in planning mode the editor is hidden by CSS and the
         left chat column shows instead — so on reload the real chrome renders and
         only the service-driven content areas show skeletons). -->
    <div class="context-wrap" id="contextView">

      <div class="courseai-context-editor" id="courseaiContextEditor">

      <div class="context-head">
        <h2>{{#str}}courseai_context_title, local_coursegen{{/str}}</h2>
        <p>{{#str}}courseai_context_subtitle, local_coursegen{{/str}}</p>
      </div>

      <!-- Card -->
      <div class="card" id="mainCard">

        <!-- Prompt textarea -->
        <textarea
          id="promptInput"
          class="prompt-textarea"
          placeholder="{{#str}}courseai_prompt_placeholder, local_coursegen{{/str}}"
          rows="5"
          aria-label="{{#str}}courseai_prompt_arialabel, local_coursegen{{/str}}"
        ></textarea>

        <!-- Selected chips (syllabus + guideline) -->
        <div class="chips-row" id="chipsRow" style="display:none">

          <!-- Syllabus chip (shown after file attach) -->
          <span class="chip chip-syllabus hidden" id="chipSyllabus">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/>
              <polyline points="14 2 14 8 20 8"/>
              <line x1="16" y1="13" x2="8" y2="13"/>
              <line x1="16" y1="17" x2="8" y2="17"/>
            </svg>
            <span class="chip-name" id="chipSyllabusName"></span>
            <button class="chip-btn" onclick="clearSyllabus()" aria-label="{{#str}}courseai_chip_remove_syllabus, local_coursegen{{/str}}">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" aria-hidden="true">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </span>

          <!-- Guideline chip (shown after selecting a guideline) -->
          <span class="chip chip-guideline hidden" id="chipGuideline">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              <polyline points="9 12 11 14 15 10"/>
            </svg>
            <span class="chip-name" id="chipGuidelineName"></span>
            <button class="chip-btn" id="chipGuidelineEyeBtn" aria-label="{{#str}}courseai_chip_view_guideline, local_coursegen{{/str}}">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>
              </svg>
            </button>
            <button class="chip-btn" onclick="clearGuideline()" aria-label="{{#str}}courseai_chip_remove_guideline, local_coursegen{{/str}}">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" aria-hidden="true">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </span>

        </div>

        <!-- Bottom toolbar -->
        <div class="card-toolbar">
          <div class="tbar-left">

            <!-- "+" options menu (ChatGPT-style): every creation setting lives inside -->
            <div class="plus-menu-wrap popover-wrap">
              <button class="plus-menu-btn" id="btnPlusMenu" type="button"
                      title="{{#str}}courseai_options_menu, local_coursegen{{/str}}"
                      aria-label="{{#str}}courseai_options_menu, local_coursegen{{/str}}"
                      aria-haspopup="true" aria-expanded="false">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
                  <path d="M12 5v14M5 12h14"/>
                </svg>
              </button>

              <div class="plus-menu-panel" id="plusMenuPanel" role="menu" aria-label="{{#str}}courseai_options_menu, local_coursegen{{/str}}">

                <!-- Sílabo (original button, restyled as menu item) -->
                <button class="plus-menu-item" id="btnSyllabus" title="{{#str}}courseai_btn_syllabus_title, local_coursegen{{/str}}" type="button" role="menuitem">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
                  </svg>
                  <span class="plus-menu-item__label">{{#str}}courseai_btn_syllabus, local_coursegen{{/str}}</span>
                </button>

                <!-- Directrices (original button, restyled as menu item) -->
                <button class="plus-menu-item" id="btnDirectrices" title="{{#str}}courseai_btn_guidelines_title, local_coursegen{{/str}}" type="button" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="guidelinesPopover">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    <polyline points="9 12 11 14 15 10"/>
                  </svg>
                  <span class="plus-menu-item__label">{{#str}}courseai_btn_guidelines, local_coursegen{{/str}}</span>
                  <span class="guideline-badge hidden" id="guidelineBadge"></span>
                </button>

                <!-- Idioma: opens a searchable popover (same pattern as guidelines) -->
                <button class="plus-menu-item" id="pmLangItem" type="button" role="menuitem"
                        aria-haspopup="dialog" aria-controls="langPopover"
                        title="{{#str}}courseai_lang_title, local_coursegen{{/str}}">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                  </svg>
                  <span class="plus-menu-item__label">{{#str}}courseai_lang_menu_label, local_coursegen{{/str}}</span>
                  <span class="plus-menu-item__value" id="pmLangValue"></span>
                  <svg class="plus-menu-item__chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <polyline points="9 18 15 12 9 6"/>
                  </svg>
                </button>

                <!-- With images toggle switch -->
                <div class="tbar-toggle-wrap plus-menu-item plus-menu-item--toggle" title="{{#str}}courseai_images_title, local_coursegen{{/str}}" role="menuitemcheckbox" aria-checked="false" tabindex="0">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0">
                    <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
                    <polyline points="21 15 16 10 5 21"/>
                  </svg>
                  <span class="plus-menu-item__label tbar-toggle-label">{{#str}}courseai_images_label, local_coursegen{{/str}}</span>
                  <div class="toggle-track" id="imgToggleTrack">
                    <div class="toggle-thumb"></div>
                  </div>
                  <input type="checkbox" id="btnWithImages" class="hidden" aria-label="{{#str}}courseai_images_arialabel, local_coursegen{{/str}}">
                </div>

                {{#subsectionsenabled}}
                <!-- With subsections toggle switch -->
                <div class="tbar-toggle-wrap plus-menu-item plus-menu-item--toggle" title="{{#str}}courseai_subsections_title, local_coursegen{{/str}}" role="menuitemcheckbox" aria-checked="false" tabindex="0">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0">
                    <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
                    <line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/>
                    <line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                  </svg>
                  <span class="plus-menu-item__label tbar-toggle-label">{{#str}}courseai_subsections_label, local_coursegen{{/str}}</span>
                  <div class="toggle-track" id="subToggleTrack">
                    <div class="toggle-thumb"></div>
                  </div>
                  <input type="checkbox" id="btnWithSubsections" class="hidden" aria-label="{{#str}}courseai_subsections_arialabel, local_coursegen{{/str}}">
                </div>
                {{/subsectionsenabled}}

              </div>

              <!-- Language popover: searchable list, same pattern as guidelines -->
              <div class="popover-panel popover-panel--down" id="langPopover" role="dialog" aria-label="{{#str}}courseai_lang_arialabel, local_coursegen{{/str}}">
                <button class="pop-close-btn" id="langPopoverClose" type="button" aria-label="{{#str}}closebuttontitle, core{{/str}}">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                </button>
                <div class="pop-search-row">
                  <div class="pop-search-inner">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <circle cx="11" cy="11" r="8"/>
                      <path d="m21 21-4.35-4.35"/>
                    </svg>
                    <input type="text" id="langSearch" placeholder="{{#str}}courseai_lang_search_placeholder, local_coursegen{{/str}}" autocomplete="off" />
                  </div>
                </div>
                <ul class="pop-list" id="langList" role="listbox" aria-label="{{#str}}courseai_lang_arialabel, local_coursegen{{/str}}"></ul>
              </div>

              <!-- Guidelines popover: anchored to the "+" area so it opens next to the menu -->
              <div class="popover-panel popover-panel--down" id="guidelinesPopover" role="dialog" aria-label="{{#str}}courseai_guidelines_dialog_label, local_coursegen{{/str}}">
                <button class="pop-close-btn" id="guidelinesPopoverClose" type="button" aria-label="{{#str}}closebuttontitle, core{{/str}}">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                </button>
                <div class="pop-search-row">
                  <div class="pop-search-inner">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <circle cx="11" cy="11" r="8"/>
                      <path d="m21 21-4.35-4.35"/>
                    </svg>
                    <input type="text" id="guidelineSearch" placeholder="{{#str}}courseai_guidelines_search_placeholder, local_coursegen{{/str}}" autocomplete="off" />
                  </div>
                  <p class="pop-note">{{#str}}courseai_guidelines_note_one, local_coursegen{{/str}}</p>
                </div>
                <ul class="pop-list" id="guidelineList" role="listbox" aria-label="{{#str}}courseai_guidelines_list_label, local_coursegen{{/str}}"></ul>
              </div>
            </div>

            <!-- Hidden file manager container for Moodle file picker -->
            <div class="hidden" id="syllabusFilemanager"></div>

            <!-- Hidden language select: still the single source of truth for state/lang -->
            <select class="tbar-select hidden" id="langSelect" title="{{#str}}courseai_lang_title, local_coursegen{{/str}}" aria-label="{{#str}}courseai_lang_arialabel, local_coursegen{{/str}}">
              <option value="es">🌐 ES</option>
              <option value="en">🌐 EN</option>
            </select>

          </div>

          <div class="tbar-right">
            <span class="kbd-hint">{{#str}}courseai_hint_enter, local_coursegen{{/str}}</span>
            <button class="btn-generate" id="btnGenerate" type="button">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/>
              </svg>
              {{#str}}courseai_btn_generate, local_coursegen{{/str}}
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M12 19V5M5 12l7-7 7 7"/>
              </svg>
            </button>
          </div>
        </div>

      </div><!-- .card -->

      <p class="form-tip">{{#str}}courseai_form_tip, local_coursegen{{/str}}</p>

      </div>

      <div class="courseai-context-chat" id="courseaiContextChat">

        <!-- Decision card (WU4): on review_needed it takes the composer's slot at the
             bottom of the chat column — the message thread above stays visible. CSS
             order:10 pins it last; decision-overlay.js toggles display. -->
        <div class="cg-decision-overlay" id="cgDecisionOverlay" style="display:none" role="group"
             aria-label="{{#str}}courseai_decision_title, local_coursegen{{/str}}">
          <div class="cg-decision-card">
            <p class="cg-decision-title">{{#str}}courseai_decision_title, local_coursegen{{/str}}</p>
            <p class="cg-decision-subtitle">{{#str}}courseai_decision_subtitle, local_coursegen{{/str}}</p>
            <div class="cg-decision-body" id="cgDecisionBody"></div>
            <div class="cg-decision-actions">
              <button class="cg-decision-btn cg-decision-btn--accept" id="cgDecisionAccept" type="button">
                {{#str}}courseai_decision_accept, local_coursegen{{/str}}
              </button>
              <button class="cg-decision-btn cg-decision-btn--adjust" id="cgDecisionAdjust" type="button">
                {{#str}}courseai_decision_adjust, local_coursegen{{/str}}
              </button>
            </div>
          </div>
        </div>

        <div class="courseai-chat-scroll cg-thread" id="courseaiChatScroll">
          <div class="courseai-round" data-round="0">
            <!-- Conversation thread (§7.1): one continuous chronological feed.
                 The initial prompt is the FIRST user turn (emitted via emitLog),
                 followed by AI planning turns. No rigid "INITIAL MESSAGE" block
                 and no uppercase section labels — it reads top-to-bottom. -->
            <div class="cg-log cg-thread-feed" id="cgLog" aria-live="polite"
                 aria-label="{{#str}}courseai_log_label, local_coursegen{{/str}}"></div>

            <!-- Left loading skeleton: previews the checklist shape while the
                 first instruction streams (hidden once a section arrives). -->
            <div class="cg-sk-checks-wrap" id="cgLeftSkeleton" style="display:none">{{> local_coursegen/courseai_skeleton_checks }}</div>

            <!-- Section checklist: a compact result card inside the AI planning
                 turn. The data hooks (data-section-id/data-round/data-remaining on
                 each <li>) are consumed by the streaming handlers — do not remove. -->
            <div class="courseai-checklist cg-thread-checklist hidden" id="courseaiChecklist">
              <div class="cg-group-head" role="button" tabindex="0" aria-expanded="true">
                <span class="cg-group-chevron" aria-hidden="true">⌄</span>
                <span class="cg-group-avatar" aria-hidden="true"></span>
                <span class="cg-group-title">{{#str}}courseai_log_ai_planned_structure, local_coursegen{{/str}}</span>
                <span class="cg-group-count"></span>
              </div>
              <ul class="courseai-checklist-list" id="courseaiChecklistList"></ul>
            </div>

            <!-- Continuation of the thread (§7.1): once the plan settles, user
                 actions and their results flow chronologically below the checklist. -->
            <div class="cg-log cg-thread-feed" id="cgLogAfter" aria-live="polite"></div>
          </div>

          <!-- Adjustment message history (shown after user sends adjustments) -->
          <div class="courseai-adjustment-history hidden" id="courseaiAdjustmentHistory"></div>
        </div>

        <!-- After "Adjust", the decision card is replaced by the composer; this slim
             bar (a SEPARATE element above the composer, with a gap) keeps Accept
             reachable so the user can always change their mind. -->
        <div class="cg-accept-bar" id="cgAcceptBar" style="display:none">
          <span class="cg-accept-bar-text">{{#str}}courseai_decision_still_accept, local_coursegen{{/str}}</span>
          <button class="cg-accept-bar-btn" id="cgAcceptInline" type="button">{{#str}}courseai_decision_accept, local_coursegen{{/str}}</button>
        </div>

        <!-- Pinned working-status slot: during an ACTION re-stream (reorder, replan,
             add, delete, adjust) the composer is hidden, so the "assistant is working"
             feedback is shown HERE — in the bottom slot where the composer/decision
             card sit — instead of as a chat turn floating over the empty composer void
             ("the message goes way down"). Empty (display:none via :empty) otherwise. -->
        <div class="cg-working-slot" id="cgWorkingSlot" aria-live="polite"></div>

        <!-- Compact chat for regeneration -->
        <div class="compact-chat-card" id="compactChatCard"{{^isresuming}} style="display:none"{{/isresuming}}>
          <textarea
            id="compactPromptInput"
            class="compact-prompt-textarea"
            placeholder="{{#str}}courseai_compact_prompt_placeholder, local_coursegen{{/str}}"
            rows="3"
            aria-label="{{#str}}courseai_prompt_arialabel, local_coursegen{{/str}}"
          ></textarea>

          <!-- Chips row (same as main card) -->
          <div class="chips-row" id="compactChipsRow" style="display:none">
            <span class="chip chip-syllabus hidden" id="compactChipSyllabus">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/>
                <polyline points="14 2 14 8 20 8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
              </svg>
              <span class="chip-name" id="compactChipSyllabusName"></span>
              <button class="chip-btn" onclick="clearSyllabus()" aria-label="{{#str}}courseai_chip_remove_syllabus, local_coursegen{{/str}}">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" aria-hidden="true">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </span>

            <span class="chip chip-guideline hidden" id="compactChipGuideline">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                <polyline points="9 12 11 14 15 10"/>
              </svg>
              <span class="chip-name" id="compactChipGuidelineName"></span>
              <button class="chip-btn" id="compactChipGuidelineEyeBtn" aria-label="{{#str}}courseai_chip_view_guideline, local_coursegen{{/str}}">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>
                </svg>
              </button>
              <button class="chip-btn" onclick="clearGuideline()" aria-label="{{#str}}courseai_chip_remove_guideline, local_coursegen{{/str}}">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" aria-hidden="true">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </span>
          </div>

          <!-- Compact toolbar: same "+" options menu as the main card -->
          <div class="compact-chat-toolbar">
            <div class="compact-toolbar-left" id="compactToolbarLeft">

              <div class="plus-menu-wrap popover-wrap" style="position:relative">
                <button class="plus-menu-btn" id="btnCompactPlusMenu" type="button"
                        title="{{#str}}courseai_options_menu, local_coursegen{{/str}}"
                        aria-label="{{#str}}courseai_options_menu, local_coursegen{{/str}}"
                        aria-haspopup="true" aria-expanded="false">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
                    <path d="M12 5v14M5 12h14"/>
                  </svg>
                </button>

                <div class="plus-menu-panel plus-menu-panel--up" id="compactPlusMenuPanel" role="menu" aria-label="{{#str}}courseai_options_menu, local_coursegen{{/str}}">

                  <button class="plus-menu-item" id="btnCompactSyllabus" title="{{#str}}courseai_btn_syllabus_title, local_coursegen{{/str}}" type="button" role="menuitem">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
                    </svg>
                    <span class="plus-menu-item__label">{{#str}}courseai_btn_syllabus, local_coursegen{{/str}}</span>
                  </button>

                  <button class="plus-menu-item" id="btnCompactDirectrices" title="{{#str}}courseai_btn_guidelines_title, local_coursegen{{/str}}" type="button" role="menuitem" aria-haspopup="dialog" aria-expanded="false" aria-controls="guidelinesPopoverCompact">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                      <polyline points="9 12 11 14 15 10"/>
                    </svg>
                    <span class="plus-menu-item__label">{{#str}}courseai_btn_guidelines, local_coursegen{{/str}}</span>
                    <span class="guideline-badge hidden" id="compactGuidelineBadge"></span>
                  </button>

                  <button class="plus-menu-item" id="pmCompactLangItem" type="button" role="menuitem"
                          aria-haspopup="dialog" aria-controls="langPopoverCompact"
                          title="{{#str}}courseai_lang_title, local_coursegen{{/str}}">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
                      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                    </svg>
                    <span class="plus-menu-item__label">{{#str}}courseai_lang_menu_label, local_coursegen{{/str}}</span>
                    <span class="plus-menu-item__value" id="pmCompactLangValue"></span>
                    <svg class="plus-menu-item__chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <polyline points="9 18 15 12 9 6"/>
                    </svg>
                  </button>

                  <div class="tbar-toggle-wrap plus-menu-item plus-menu-item--toggle" title="{{#str}}courseai_images_title, local_coursegen{{/str}}" role="menuitemcheckbox" aria-checked="false" tabindex="0">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0">
                      <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
                      <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <span class="plus-menu-item__label tbar-toggle-label">{{#str}}courseai_images_label, local_coursegen{{/str}}</span>
                    <div class="toggle-track" id="compactImgToggleTrack">
                      <div class="toggle-thumb"></div>
                    </div>
                    <input type="checkbox" id="btnCompactWithImages" class="hidden" aria-label="{{#str}}courseai_images_arialabel, local_coursegen{{/str}}">
                  </div>

                  {{#subsectionsenabled}}
                  <div class="tbar-toggle-wrap plus-menu-item plus-menu-item--toggle" title="{{#str}}courseai_subsections_title, local_coursegen{{/str}}" role="menuitemcheckbox" aria-checked="false" tabindex="0">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0">
                      <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
                      <line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/>
                      <line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                    </svg>
                    <span class="plus-menu-item__label tbar-toggle-label">{{#str}}courseai_subsections_label, local_coursegen{{/str}}</span>
                    <div class="toggle-track" id="compactSubToggleTrack">
                      <div class="toggle-thumb"></div>
                    </div>
                    <input type="checkbox" id="btnCompactWithSubsections" class="hidden" aria-label="{{#str}}courseai_subsections_arialabel, local_coursegen{{/str}}">
                  </div>
                  {{/subsectionsenabled}}

                </div>

                <div class="popover-panel" id="langPopoverCompact" role="dialog" aria-label="{{#str}}courseai_lang_arialabel, local_coursegen{{/str}}">
                  <button class="pop-close-btn" id="langPopoverCompactClose" type="button" aria-label="{{#str}}closebuttontitle, core{{/str}}">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
                      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                  </button>
                  <div class="pop-search-row">
                    <div class="pop-search-inner">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="m21 21-4.35-4.35"/>
                      </svg>
                      <input type="text" id="langSearchCompact" placeholder="{{#str}}courseai_lang_search_placeholder, local_coursegen{{/str}}" autocomplete="off" />
                    </div>
                  </div>
                  <ul class="pop-list" id="langListCompact" role="listbox" aria-label="{{#str}}courseai_lang_arialabel, local_coursegen{{/str}}"></ul>
                </div>

                <div class="popover-panel" id="guidelinesPopoverCompact" role="dialog" aria-label="{{#str}}courseai_guidelines_dialog_label, local_coursegen{{/str}}">
                  <button class="pop-close-btn" id="guidelinesPopoverCompactClose" type="button" aria-label="{{#str}}closebuttontitle, core{{/str}}">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
                      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                  </button>
                  <div class="pop-search-row">
                    <div class="pop-search-inner">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="m21 21-4.35-4.35"/>
                      </svg>
                      <input type="text" id="guidelineSearchCompact" placeholder="{{#str}}courseai_guidelines_search_placeholder, local_coursegen{{/str}}" autocomplete="off" />
                    </div>
                    <p class="pop-note">{{#str}}courseai_guidelines_note_one, local_coursegen{{/str}}</p>
                  </div>
                  <ul class="pop-list" id="guidelineListCompact" role="listbox" aria-label="{{#str}}courseai_guidelines_list_label, local_coursegen{{/str}}"></ul>
                </div>
              </div>

              <!-- Hidden compact language select: mirrored source of truth -->
              <select class="tbar-select hidden" id="compactLangSelect" title="{{#str}}courseai_lang_title, local_coursegen{{/str}}" aria-label="{{#str}}courseai_lang_arialabel, local_coursegen{{/str}}">
                <option value="es">🌐 ES</option>
                <option value="en">🌐 EN</option>
              </select>
            </div>

            <div class="compact-toolbar-right">
              <button class="btn-compact-regenerate" id="btnCompactRegenerate" type="button" aria-label="{{#str}}courseai_btn_regenerate, local_coursegen{{/str}}" title="{{#str}}courseai_btn_regenerate, local_coursegen{{/str}}">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M12 19V5M5 12l7-7 7 7"/>
                </svg>
              </button>
              <button class="btn-stop-resume btn-stop" id="btnStopExec" type="button"
                      style="display:none"
                      aria-label="{{#str}}courseai_btn_stop, local_coursegen{{/str}}"
                      title="{{#str}}courseai_btn_stop, local_coursegen{{/str}}">
                {{#str}}courseai_btn_stop, local_coursegen{{/str}}
              </button>
              <button class="btn-stop-resume btn-resume" id="btnResumeExec" type="button"
                      style="display:none"
                      aria-label="{{#str}}courseai_btn_resume, local_coursegen{{/str}}"
                      title="{{#str}}courseai_btn_resume, local_coursegen{{/str}}">
                {{#str}}courseai_btn_resume, local_coursegen{{/str}}
              </button>
            </div>
          </div>
        </div>
      </div>

    </div><!-- .context-wrap -->

    <!-- Resizable divider (§2.1) — visible only in .is-planning (3-column grid) -->
    {{! aria-valuemin/max/now are set by the splitter AMD at init: the HTML
        validator rejects them as static attributes on role="separator". }}
    <div class="cg-splitter" id="cgSplitter" role="separator" aria-orientation="vertical" tabindex="0"
         aria-label="{{#str}}courseai_resize_panels, local_coursegen{{/str}}"></div>

    <!-- Step 2: Planning view -->
    <div class="planning-wrap" id="planningView" style="display:{{#isresuming}}flex{{/isresuming}}{{^isresuming}}none{{/isresuming}}">
      <div class="pc-card" id="planningProgressCard" style="display:none">
        <div class="pc-card-main">
          <span class="pc-icon-wrap" id="pcIconWrap" aria-hidden="true">
            <svg id="planningSpinner" class="pc-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
              <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
            </svg>
            <svg id="planningCheckIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" style="display:none">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </span>
          <div class="pc-info">
            <span class="pc-step" id="pcStep">{{#str}}courseai_state_planning, local_coursegen{{/str}}</span>
            <h3 class="pc-title" id="pcTitle">{{#str}}courseai_state_structuring, local_coursegen{{/str}}</h3>
            <p class="pc-subtitle" id="pcSubtitle"></p>
          </div>
        </div>

        <div class="pc-progress-wrap">
          <div class="pc-progress-row">
            <span class="pc-progress-label">{{#str}}courseai_progress_label, local_coursegen{{/str}}</span>
            <span class="pc-progress-pct" id="pcPct">0{{#str}}courseai_progress_percent, local_coursegen{{/str}}</span>
          </div>
          <div class="pc-bar-track">
            <div class="pc-bar-fill" id="pcBarFill" style="width:0%"></div>
          </div>
        </div>

        <div class="pc-toggle-row" id="pcToggleRow" style="display:none">
          <button class="pc-toggle-btn" id="pcToggleBtn" type="button" aria-expanded="false">
            <svg class="pc-chevron" id="pcChevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polyline points="9 18 15 12 9 6"/>
            </svg>
            {{#str}}courseai_toggle_details, local_coursegen{{/str}}
          </button>
        </div>

        <div class="pc-details-panel" id="pcDetailsPanel" style="display:none"></div>
      </div>

      <!-- Legacy loader element kept for compatibility (toggled by stream code);
           the visible loader is the in-place skeleton below. -->
      <div class="planning-loading" id="planningLoading" style="display:none"></div>

      <!-- Initial-streaming loader: an in-place skeleton that previews the
           detailed-plan card shape (no full-screen spinner). Shown while the
           first instruction streams, hidden once the first section arrives. -->
      <div class="cg-center-skeleton" id="cgCenterSkeleton" style="display:{{#isresuming}}block{{/isresuming}}{{^isresuming}}none{{/isresuming}}">{{> local_coursegen/courseai_skeleton_cards }}</div>

      <!-- Streaming content containers (hidden initially, shown as content arrives) -->
      <div class="planning-stream-content" id="planningStreamContent" style="display:none">
        <div id="planSectionsView" style="display:none">
          <div id="planSectionsList"></div>
        </div>
        <div id="planDetailedView" style="display:none">
          <div id="planDetailedList"></div>
        </div>
        <div id="planMarkdownView" style="display:none">
          <div class="plan-markdown" id="planMarkdown"></div>
          <span class="typing-cursor hidden" id="typingCursor"></span>
        </div>
      </div>

      <div class="pc-completion-card" id="completionView" style="display:none">
        <span class="pc-completion-icon" aria-hidden="true">
          <span class="pc-completion-emoji">🎉</span>
          <span class="pc-confetti" id="pcConfetti"></span>
        </span>
        <h3 class="pc-completion-title">{{#str}}courseai_completion_title, local_coursegen{{/str}}</h3>
        <p class="pc-completion-summary" id="completionSummary">{{#str}}courseai_completion_summary_default, local_coursegen{{/str}}</p>
        <div class="pc-completion-actions">
          <button class="btn-completion-primary" id="btnOpenMoodleCourse" type="button">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"></path>
            </svg>
            {{#str}}courseai_completion_btn_open_course, local_coursegen{{/str}}
          </button>
          <button class="btn-completion-secondary" id="btnCreateAnotherCourse" type="button">{{#str}}courseai_completion_btn_create_another, local_coursegen{{/str}}</button>
        </div>
      </div>

        <div class="prv-card" id="planReviewCard" style="display:none">
        <div class="prv-header prv-header--stream" id="prvHeader">
          <span class="prv-icon-wrap" id="prvIconWrap">
            <svg id="prvSpinnerIcon" class="prv-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
              <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
            </svg>
            <svg id="prvCheckIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </span>
          <div class="prv-header-text">
            <h2 class="prv-header-title" id="prvHeaderTitle">{{#str}}courseai_state_structuring, local_coursegen{{/str}}</h2>
            <p class="prv-header-sub" id="prvHeaderSub">{{#str}}courseai_state_starting, local_coursegen{{/str}}</p>
            <p class="prv-header-sub" id="prvLiveNote" style="display:none">{{#str}}courseai_live_note_detailed, local_coursegen{{/str}}</p>
          </div>
        </div>
        <div class="prv-sections" id="prvSections"></div>
      </div>

      <div class="plan-proposals" id="planProposalsBlock" style="display:none"></div>

      <div class="plan-actions" id="planActions" style="display:none">
        <p class="plan-action-hint" id="planActionsHint">{{#str}}courseai_plan_actions_hint, local_coursegen{{/str}}</p>
        <div class="plan-action-btns">
          <button class="btn-plan-approve" id="btnApprove" type="button">{{#str}}courseai_btn_approve, local_coursegen{{/str}}</button>
        </div>
      </div>

      {{! Review step — Bootstrap card shown inline before course creation }}
      <div class="card" id="courseReviewPanel" style="display:none">
        <div class="card-body">
          <div class="d-flex align-items-start mb-3">
            <span class="d-flex align-items-center justify-content-center mr-3"
                  style="width:40px;height:40px;border-radius:8px;background:var(--primary-soft, #fef2f0);color:var(--primary, #c2412e);flex-shrink:0">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M12 20h9"/>
                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
              </svg>
            </span>
            <div>
              <h5 class="mb-1">{{#str}}courseai_review_title, local_coursegen{{/str}}</h5>
              <p class="mb-0 text-muted" style="font-size:.875rem">{{#str}}courseai_review_subtitle, local_coursegen{{/str}}</p>
            </div>
          </div>

          <div class="form-group">
            <label for="reviewFullname">{{#str}}courseai_review_fullname_label, local_coursegen{{/str}}</label>
            <input type="text" id="reviewFullname" class="form-control" maxlength="255"
                   placeholder="{{#str}}courseai_review_fullname_placeholder, local_coursegen{{/str}}">
          </div>

          <div class="form-group">
            <label for="reviewShortname">{{#str}}courseai_review_shortname_label, local_coursegen{{/str}}</label>
            <input type="text" id="reviewShortname" class="form-control" maxlength="100"
                   placeholder="{{#str}}courseai_review_shortname_placeholder, local_coursegen{{/str}}">
            <small class="form-text text-muted">{{#str}}courseai_review_shortname_note, local_coursegen{{/str}}</small>
          </div>

          <div class="form-group mb-0">
            <label for="reviewCategory">{{#str}}courseai_review_category_label, local_coursegen{{/str}}</label>
            <select id="reviewCategory" class="form-control"></select>
          </div>

          <hr class="my-3">

          <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-outline-secondary mr-2" id="reviewCancelBtn">
              {{#str}}courseai_review_cancel, local_coursegen{{/str}}
            </button>
            <button type="button" class="btn btn-primary" id="reviewConfirmBtn">
              {{#str}}courseai_review_confirm, local_coursegen{{/str}}
            </button>
          </div>
        </div>
      </div>

    </div>

    </div><!-- .courseai-workspace -->

  </div><!-- .container -->

  <!-- Sessions list view (hidden by default) -->
  <div class="courseai-sessions-view" id="courseaiSessionsView" style="display:none">
    <div class="courseai-sessions-header">
      <button class="courseai-sessions-back-btn" id="courseaiSessionsBackBtn" type="button">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
      </button>
      <h2>{{#str}}courseai_sessions_title, local_coursegen{{/str}}</h2>
    </div>

    {{#hassessions}}
    <div class="courseai-sessions-grid" id="courseaiSessionsGrid">
      {{#allsessions}}
      <div class="courseai-session-card" data-sessionid="{{id}}">
        <div class="courseai-session-card-icon">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
          </svg>
        </div>
        <div class="courseai-session-card-body">
          <h3 class="courseai-session-card-title">{{title}}</h3>
          <span class="courseai-session-card-status">{{statuslabel}}</span>
          <span class="courseai-session-card-date">{{timecreated}}</span>
        </div>
        <a class="courseai-session-card-btn" href="aicoursecreation.php?sessionid={{id}}">{{#str}}courseai_sessions_continuebtn, local_coursegen{{/str}} &rarr;</a>
      </div>
      {{/allsessions}}
    </div>

    <div class="courseai-sessions-pagination" id="courseaiSessionsPagination" style="display:none">
      <button class="courseai-pagination-btn courseai-pagination-prev" id="courseaiPaginationPrev" type="button">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
      </button>
      <span class="courseai-pagination-info" id="courseaiPaginationInfo"></span>
      <button class="courseai-pagination-btn courseai-pagination-next" id="courseaiPaginationNext" type="button">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </button>
    </div>
    {{/hassessions}}

    {{^hassessions}}
    <div class="courseai-sessions-empty">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
      </svg>
      <p>{{#str}}courseai_sessions_empty, local_coursegen{{/str}}</p>
      <a href="aicoursecreation.php">{{#str}}courseai_sessions_newbtn, local_coursegen{{/str}}</a>
    </div>
    {{/hassessions}}
  </div>

</main>

<!-- Guideline preview modal (Bootstrap 4) -->
<div class="modal fade" id="guidelinePreviewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered preview-dialog" role="document">
    <div class="modal-content preview-modal-content">

      <!-- Circle-X close button (top right) -->
      <button type="button" class="preview-close" data-dismiss="modal" aria-label="{{#str}}courseai_modal_close, local_coursegen{{/str}}">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10"/>
          <line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
        </svg>
      </button>

      <!-- Header -->
      <div class="preview-header">
        <div class="preview-title">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--primary);flex-shrink:0" aria-hidden="true">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/>
          </svg>
          <span id="previewModalLabel"></span>
        </div>
        <div class="preview-subtitle">
          <span class="preview-cat-badge" id="previewModalCategory"></span>
          <span class="preview-subtitle-text">{{#str}}courseai_modal_fullcontext, local_coursegen{{/str}}</span>
        </div>
      </div>

      <!-- Description box -->
      <div class="preview-body">
        <div class="preview-desc-box">
          <p id="previewModalBody"></p>
        </div>
      </div>

    </div>
  </div>
</div>

{{! Data passed to JavaScript }}
<div id="courseai-data" style="display:none" 
     data-guidelines="{{guidelines}}" 
     data-languages="{{languages}}" 
     data-defaultlang="{{defaultlang}}">
</div>
