{{< mod_minilesson/questionheader}}
{{$slashscreen}}
<div class="ml_audiochat_startscreen startmodule_splashscreen" data-region="splashscreen">
    <div class="startmodule_image_container audiochat_image_container">
        <img class="audiochat_image startmodule_image" src="{{{itemimageurl}}}" alt="{{#str}}audiochat, mod_minilesson{{/str}}">
    </div>
    <div class="startmodule_title audiochat_title">{{#str}}audiochat, mod_minilesson{{/str}}</div>
    <div class="startmodule_description audiochat_description">{{iteminstructions}}</div>
    <div class="start_mainmenu audiochat_mainmenu">
        <button class="btn audiochat_start_btn startmodule_btn" data-action="startmodule">
            {{#str}}start, mod_minilesson{{/str}} <i class="fa fa-play ml-1"></i>
        </button>
    </div>
</div>
{{/slashscreen}}
{{/ mod_minilesson/questionheader}}
{{> mod_minilesson/progresstimer}}
<div class="minilesson_audiochat_box item-container ml_unique_root">
    <div class="  py-0 px-0 ml_unique_mainwrapper">
        <div class=" mx-auto ml_unique_container">

            <!-- Main Content Area -->
            <div class=" ml_unique_maincontent">
                <!-- Session Controls -->
                <div class="text-center ml_unique_sessioncontrols" id="session-controls">
                    <!-- AI Avatar Section - Prominent when no conversation -->
                    <div class="ml_unique_avatarcontainer">
                        <div class="d-flex ml_unique_avatarbanner">
                            <div id="ai-avatar-section" class="ml_ac_ai-avatar-section mb-2 ml_unique_avatarblock">
                                <img src="{{{avatarimage}}}?height=80&width=80&themerev={{{config.themerev}}}" alt="AI Assistant" width="125" height="125" class="ml_unique_avatar">
                                <audio class="ml_ac_hiddenaudio" autoplay></audio>
                            </div>
                            <div class="aiimage-item-text">
                                {{{itemtext}}}
                            </div>
                        </div>
                    </div>
                    <div class="  ml_unique_startsessioncontrols">
                        <div class="ml_ac_cantchat alert-warning mb-2">{{#str}}cantchat, mod_minilesson{{/str}}</div>
                        <div class="w-100 text-center hidden ml_unique_micselectbox">
                            <label for="micselect" class="block mb-1 ml_unique_miclabel">Select microphone:</label>
                            <select id="micselect" class="ml_ac_micselect px-4 py-2 ml_unique_micselect"></select>
                        </div>
                        <div class="text-center">
                            <button id="start-session-btn" class="ml_ac_start-session-btn  text-white ml_unique_startbtn">
                                {{#str}}audiochatsessionstart, mod_minilesson{{/str}}
                            </button>
                        </div>
                        <div id="loading-indicator" class="ml_ac_loading-indicator hidden ml_unique_loading">
                            <div class="animate-bounce-custom ml_unique_loadingdots">
                                <div class="bg-blue-500 ml_unique_loadingdot"></div>
                                <div class="bg-blue-500 ml_unique_loadingdot"></div>
                                <div class="bg-blue-500 ml_unique_loadingdot"></div>
                                <div class="bg-blue-500 ml_unique_loadingdot"></div>
                                <div class="bg-blue-500 ml_unique_loadingdot"></div>
                            </div>
                            <p class="ml_unique_loadingtext">{{#str}}audiochatsessionconnecting, mod_minilesson{{/str}}</p>
                            <div class="text-center">
                                <button id="cancel-start-session-btn" class="ml_ac_cancel-start-session-btn hidden  text-white         ml_unique_cancelstartbtn">
                                    {{#str}}audiochatcancelconnecting, mod_minilesson{{/str}}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="itemtext_afterchatactive">
                    {{{itemtext}}}
                </div>
                <!--<div id="chat-active-message" class="ml_ac_chat-active-message ml_audiochat_resultsbox1">
                    <p class="ml_unique_readymsg">{{#str}}audiochatsessionactive, mod_minilesson{{/str}}</p>
                </div>-->

                <!-- Conversation Transcript - Takes center stage when active -->
                <div id="conversation-section" class="mb-4 ml_ac_conversation-section hidden mx-auto ml_unique_conversationsection">
                    <div class="bg-white ml_unique_transcriptbox">
                        <div id="messages-container" class="ml_ac_messages-container p-4 ml_unique_messagescontainer">
                            <!-- Messages will be appended here -->
                        </div>
                        <div id="finished-message" class="ml_ac_finished-message hidden text-center bold  ml_unique_finishmessage">
                            {{#str}}audiochatsessionfinished, mod_minilesson{{/str}}
                        </div>
                    </div>
                </div>

                <!-- Mic and buttons related to session and mic -->
                <div class="ml_unique_buttoncontainer ml_ac_flex-row-container pl-4">
                    <div class="ml_ac_flex-spacer1"></div>
                    <!-- Toggle button for autosend -->
                    <div class="ml_ac_btn-container">
                        <div class="ml_ac_autoresponse-toggle">
                            <label class="clickable">
                                <input type="checkbox"
                                    id="autoresponse-toggle"
                                    class="ml_ac_autoresponse-checkbox   rounded "
                                    {{#audiochat_autoresponse}}checked{{/audiochat_autoresponse}}>
                                <span class="ml-2  ">
                                    {{#str}}audiochat_autosend, mod_minilesson{{/str}}
                                </span>
                            </label>
                        </div>
                        <div class="ml_ac_mic-column hidden">
                            <div class="mic-wrapper m-1" style="position: relative; width: 48px; height: 48px;">
                                <div id="mic-button-container"
                                    class="mic-button-container hidden bg-gray-200 text-gray-800 ml_unique_micbtnwrapper">
                                    <canvas id="mic-waveform-canvas" width="48" height="48"
                                            class="mic-waveform-canvas ml_unique_waveformcanvas"></canvas>
                                    <button id="toggle-mic-btn" class="toggle-mic-btn ml_unique_togglemic">
                                        <svg id="mic-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="mic-icon mic-icon-svg ml_unique_micsvg">
                                            <line x1="2" x2="22" y1="2" y2="22" />
                                            <path d="M10 9v3a4 4 0 0 0 8 0V9" />
                                            <path d="M16 16a4 4 0 0 1-8 0" />
                                            <path d="M12 12V2" />
                                            <path d="M12 22v-4" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div class="ml_ac_clicktosend hidden small text-muted">
                                {{#str}}clicktosend , mod_minilesson{{/str}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right buttons column -->
                <div class="ml_ac_flex-spacer ml_ac_flex-right mb-4">
                    <button id="stop-session-btn" class="ml_ac_stop-session-btn hidden stop-btn ml_unique_stopbtn">
                        {{#str}}audiochatsessionend, mod_minilesson{{/str}}
                    </button>
                </div>
                <!-- Session Results and Feedback -->
                <div id="session-results" class="text-center hidden ml_ac_results_container">
                    <div id="results-content" class="ml_ac_results_content text-center">
                        <!-- Results will be dynamically inserted here -->
                    </div>
                    <button id="retry-session-btn" class="hidden retry-btn ml_ac_retrybtn btn">
                        {{#pix}}redo-icon, mod_minilesson{{/pix}}
                        {{#str}}audiochatsessiontryagain, mod_minilesson{{/str}}
                    </button>
                </div>
        </div>
        <div class="ml_audiochat_actionbox ml_unique_actionbox">
            <div class="ml_audiochat_speakbtncontainer ml_unique_speakbtncontainer">
                {{> mod_minilesson/ttrecorder}}
            </div>
            <div class="timerstatus_{{uniqueid}} ml_audiochat_timerdisplay ml_recsession ml_unique_timerdisplay"></div>
        </div>
    </div>
    </div>
</div>
{{> mod_minilesson/questionfooter}}