{{!
    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/aicoursecreation_page

    Legacy AI course creation page.

    Example context (json):
    {
        "recordid": 1,
        "contexttype": "general",
        "pdffilename": "",
        "isresuming": false
    }
}}

<div class="container py-4" data-region="local_coursegen/aicoursecreation/root" data-recordid="{{recordid}}">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-3">
                <h2 class="h3 mb-0 text-primary">
                    <i class="fa fa-magic mr-2"></i> Datacurso course creator AI
                </h2>
                <div class="text-right">
                    <span class="badge badge-info p-2 text-uppercase mb-1">{{contexttype}}</span>
                    {{#pdffilename}}
                    <br><span class="badge badge-secondary p-2"><i class="fa fa-file-pdf-o mr-1"></i> {{pdffilename}}</span>
                    {{/pdffilename}}
                </div>
            </div>

            <div data-region="local_coursegen/aicoursecreation/output" 
                 class="mb-4 text-dark" 
                 style="font-size: 1.05rem; line-height: 1.7;">
            </div>

            <div data-region="local_coursegen/aicoursecreation/feedbackpanel" class="d-none mt-4 mb-5">
                
                <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-primary mr-2 shadow-sm" data-region="local_coursegen/aicoursecreation/btnaccept">
                        Aceptar y crear curso
                    </button>
                    <button type="button" class="btn btn-outline-secondary shadow-sm" id="btn-show-adjust">
                        Ajustar planificación
                    </button>
                </div>

                <div id="adjust-input-container" class="d-none mt-3">
                    <div class="ai-prompt-container shadow-sm d-flex flex-column" style="background-color: var(--body-bg); border: 1px solid var(--border-color, #d1d5db); border-radius: 24px; padding: 12px 16px; max-width: 800px;">
                        
                        <textarea 
                            id="local-coursegen-feedback-text" 
                            class="form-control ai-prompt-textarea" 
                            data-region="local_coursegen/aicoursecreation/feedbacktext" 
                            placeholder="Ej. Cambia el último quiz de cada unidad por una tarea..." 
                            rows="1"
                            style="resize: none; border: none; box-shadow: none; padding: 0; margin: 0; background: transparent; min-height: 24px; max-height: 150px; overflow-y: auto; line-height: 1.5; color: inherit; width: 100%;"></textarea>
                        
                        <div class="d-flex justify-content-end align-items-center mt-2">
                            <button type="button" class="btn btn-light p-0 d-flex align-items-center justify-content-center text-primary ai-btn-send" data-region="local_coursegen/aicoursecreation/btnrevise">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                                    <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

            </div>

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