{{!
    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_unifiedgrader/comment_library_modal

    Modal body for the full comment library management interface.
    Dynamic content (comment list, tag list, shared library) is populated by JS.

    @package local_unifiedgrader
    @copyright 2026 South African Theological Seminary
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
<div data-region="clib-modal-root">

    {{! Tab navigation }}
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab"
                    data-bs-target="#clib-tab-mine" type="button" role="tab"
                    aria-controls="clib-tab-mine" aria-selected="true">
                {{#str}} clib_my_library, local_unifiedgrader {{/str}}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab"
                    data-bs-target="#clib-tab-shared" type="button" role="tab"
                    aria-controls="clib-tab-shared" aria-selected="false">
                {{#str}} clib_shared_library, local_unifiedgrader {{/str}}
            </button>
        </li>
    </ul>

    <div class="tab-content">

        {{! ── My Library tab ── }}
        <div class="tab-pane fade show active" id="clib-tab-mine" role="tabpanel">
            <div class="d-flex" style="min-height: 340px;">

                {{! Left sidebar — course codes / tag manager }}
                <div data-region="clib-sidebar" class="border-end pe-3 me-3" style="width: 220px; flex-shrink: 0; overflow-y: auto;">
                    <div class="fw-bold small mb-2">
                        {{#str}} clib_all_courses, local_unifiedgrader {{/str}}
                    </div>
                    <div data-region="clib-course-list" class="list-group list-group-flush small"></div>
                    <hr class="my-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary w-100"
                            data-action="clib-manage-tags">
                        <i class="fa fa-tags me-1"></i>
                        {{#str}} clib_manage_tags, local_unifiedgrader {{/str}}
                    </button>
                </div>

                {{! Main panel — comments }}
                <div class="flex-grow-1 d-flex flex-column" style="min-width: 0;">

                    {{! Toolbar: new comment + tag filter }}
                    <div class="d-flex justify-content-between align-items-center mb-2 gap-2">
                        <button type="button" class="btn btn-sm btn-primary"
                                data-action="clib-new-comment">
                            <i class="fa fa-plus me-1"></i>
                            {{#str}} clib_new_comment, local_unifiedgrader {{/str}}
                        </button>
                        <select class="form-select form-select-sm" style="width: auto;"
                                data-action="clib-tag-filter">
                            <option value="0">{{#str}} clib_all, local_unifiedgrader {{/str}}</option>
                        </select>
                    </div>

                    {{! Inline new comment form (hidden by default) }}
                    <div data-region="clib-new-form" class="d-none border rounded p-2 mb-2 bg-light">
                        <textarea class="form-control form-control-sm mb-2" rows="3"
                                  data-input="clib-new-content"
                                  placeholder="{{#str}} clib_new_comment, local_unifiedgrader {{/str}}"></textarea>
                        <div class="d-flex justify-content-between align-items-center gap-2">
                            <div class="d-flex gap-1 flex-wrap" data-region="clib-new-tag-chips"></div>
                            <div class="d-flex gap-1">
                                <label class="form-check form-check-inline small mb-0">
                                    <input type="checkbox" class="form-check-input" data-input="clib-new-shared">
                                    {{#str}} clib_share, local_unifiedgrader {{/str}}
                                </label>
                                <button type="button" class="btn btn-sm btn-primary"
                                        data-action="clib-save-new">
                                    {{#str}} save {{/str}}
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary"
                                        data-action="clib-cancel-new">
                                    {{#str}} cancel {{/str}}
                                </button>
                            </div>
                        </div>
                    </div>

                    {{! Comment list }}
                    <div data-region="clib-comment-list" class="flex-grow-1" style="overflow-y: auto;"></div>
                </div>

            </div>
        </div>

        {{! ── Shared Library tab ── }}
        <div class="tab-pane fade" id="clib-tab-shared" role="tabpanel">
            <div class="d-flex justify-content-end mb-2">
                <select class="form-select form-select-sm" style="width: auto;"
                        data-action="clib-shared-tag-filter">
                    <option value="0">{{#str}} clib_all, local_unifiedgrader {{/str}}</option>
                </select>
            </div>
            <div data-region="clib-shared-list" style="min-height: 280px; overflow-y: auto;"></div>
        </div>

    </div>

</div>
