{{!
    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 tiny_mediacms/iframe_embed_modal

    Iframe embed modal template.

    Example context (json):
    {
        "elementid": "editor1",
        "isupdating": false
    }
}}
{{< core/modal }}

    {{$body}}
        <form class="tiny_iframecms_form" id="{{elementid}}_tiny_iframecms_form">
            <!-- Tab Navigation -->
            <ul class="nav nav-tabs mb-3 tiny_iframecms_tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active tiny_iframecms_tab_url_btn" id="{{elementid}}_tab_url"
                            data-bs-toggle="tab" data-bs-target="#{{elementid}}_pane_url"
                            type="button" role="tab" aria-controls="{{elementid}}_pane_url" aria-selected="true">
                        {{#str}} tabembedurl, tiny_mediacms {{/str}}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link tiny_iframecms_tab_iframe_library_btn" id="{{elementid}}_tab_iframe_library"
                            data-bs-toggle="tab" data-bs-target="#{{elementid}}_pane_iframe_library"
                            type="button" role="tab" aria-controls="{{elementid}}_pane_iframe_library" aria-selected="false">
                        {{#str}} tabvideolibraryiframe, tiny_mediacms {{/str}}
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content">
                <!-- Tab 1: Embed URL (existing content) -->
                <div class="tab-pane fade show active tiny_iframecms_pane_url" id="{{elementid}}_pane_url" role="tabpanel" aria-labelledby="{{elementid}}_tab_url">
                    <div class="container-fluid p-0">
                        <div class="row">
                            <!-- Left column: URL and Options -->
                            <div class="col-md-6">
                                <!-- URL Input -->
                                <div class="mb-3">
                                    <label for="{{elementid}}_iframe_url" class="form-label font-weight-bold">
                                        {{#str}} iframeurl, tiny_mediacms {{/str}}
                                    </label>
                                    <textarea
                                        class="form-control tiny_iframecms_url"
                                        id="{{elementid}}_iframe_url"
                                        rows="3"
                                        placeholder="{{#str}} iframeurlplaceholder, tiny_mediacms {{/str}}"
                                    >{{url}}</textarea>
                                    <div class="tiny_iframecms_url_warning text-danger small mt-1 d-none">
                                        {{#str}} iframeurlinvalid, tiny_mediacms {{/str}}
                                    </div>
                                </div>

                                {{> tiny_mediacms/iframe_embed_options }}
                            </div>

                            <!-- Right column: Preview -->
                            <div class="col-md-6">
                                <label class="form-label font-weight-bold">
                                    {{#str}} preview, tiny_mediacms {{/str}}
                                </label>
                                <div class="tiny_iframecms_preview_container border rounded p-2 bg-light" style="min-height: 300px;">
                                    <div class="tiny_iframecms_preview d-flex align-items-center justify-content-center text-muted" style="min-height: 280px;">
                                        <span>{{#str}} iframeurlplaceholder, tiny_mediacms {{/str}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 2: Media Library -->
                <div class="tab-pane fade tiny_iframecms_pane_iframe_library" id="{{elementid}}_pane_iframe_library" role="tabpanel" aria-labelledby="{{elementid}}_tab_iframe_library">
                    <div class="tiny_iframecms_iframe_library_container" style="min-height: 500px;">
                        <div class="tiny_iframecms_iframe_library_placeholder text-center py-5">
                            <p class="text-muted">{{#str}} libraryloading, tiny_mediacms {{/str}}</p>
                        </div>
                        <div class="tiny_iframecms_iframe_library_loading text-center py-5 d-none">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only visually-hidden">{{#str}} libraryloading, tiny_mediacms {{/str}}</span>
                            </div>
                            <p class="mt-2 text-muted">{{#str}} libraryloading, tiny_mediacms {{/str}}</p>
                        </div>
                        <iframe
                            class="tiny_iframecms_iframe_library_frame d-none"
                            src=""
                            style="width: 100%; height: 500px; border: 1px solid #dee2e6; border-radius: 0.25rem;"
                            frameborder="0"
                            allowfullscreen>
                        </iframe>
                    </div>
                </div>
            </div>
        </form>
    {{/body}}

    {{$footer}}
        <button type="button" class="btn btn-primary" data-action="save">
            {{#isupdating}}
                {{#str}} updateiframe, tiny_mediacms {{/str}}
            {{/isupdating}}
            {{^isupdating}}
                {{#str}} insertiframe, tiny_mediacms {{/str}}
            {{/isupdating}}
        </button>
        {{#isupdating}}
        <button type="button" class="btn btn-danger tiny_iframecms_remove_btn" data-action="remove">
            {{#str}} removeiframe, tiny_mediacms {{/str}}
        </button>
        {{/isupdating}}
        <button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel, moodle {{/str}}</button>
    {{/footer}}

{{/ core/modal }}