{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/user-document-edit.css"}}">


<link href="{{asset "/static/viewer/viewer.min.css"}}" rel="stylesheet">

<div class="card doc-edit-page">

    <div class="card-body">

        <div class="user-page-head user-page-head--bordered">
            <div class="user-page-head-main">
                <h5 class="user-page-head__title">{{if .Data.IsNew}}{{T "user_publish_document_title"}}{{else}}{{T "user_edit_document_title"}}{{end}}</h5>
                {{if and .Data.IsNew .Data.AuditEnabled}}
                <p class="user-page-head__desc">
                    <i class='bx bx-info-circle' aria-hidden="true"></i>
                    <span>{{T "user_audit_submit_hint"}}</span>
                </p>
                {{end}}
            </div>
            <div class="user-page-head-actions">
                <a href="/user/documents" class="btn btn-outline-secondary btn-sm"><i class='bx bx-arrow-back'></i> {{T "user_back_documents"}}</a>
            </div>
        </div>

        {{if and (not .Data.IsNew) .Data.AuditEnabled}}
        <div class="user-doc-notice user-doc-notice--info mb-3"><i class='bx bx-info-circle'></i><span>{{T "user_audit_submit_hint"}}</span></div>
        {{end}}
        {{if and .Data.IsPublishedApproved .Data.AuditEnabled}}
        <div class="user-doc-notice user-doc-notice--warning mb-3"><i class='bx bx-error-circle'></i><span>{{T "user_published_edit_hint"}}</span></div>
        {{end}}

        {{if .Data.CategoryOptions}}
        <section class="doc-edit-panel" aria-labelledby="docEditMetaTitle">
            <div class="doc-edit-panel__head">
                <i class='bx bx-map-pin' aria-hidden="true"></i>
                <h2 class="doc-edit-panel__title" id="docEditMetaTitle">{{T "user_select_publish_location"}}</h2>
            </div>
            <div class="row g-3 doc-edit-meta-grid">
                <div class="col-md-6">
                    <label class="form-label" for="docPublicDirectory">{{T "user_doc_category_label"}} <span class="text-danger">*</span></label>
                    <select class="form-select" id="docPublicDirectory" required>
                        <option value="">{{T "user_move_select_target"}}</option>
                        {{range .Data.CategoryOptions}}
                        <option value="{{index . "directory_id"}}" data-site-project-id="{{index . "project_id"}}" data-path-prefix="{{index . "path_prefix"}}" {{if index . "selected"}}selected{{end}}>{{index . "name"}}</option>
                        {{end}}
                    </select>
                    <span class="doc-edit-meta-hint">{{T "user_doc_category_tree_hint"}}</span>
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="docUserProject">{{T "user_doc_project_label"}}</label>
                    <select class="form-select" id="docUserProject">
                        <option value="">{{T "user_doc_project_none"}}</option>
                        {{range .Data.ProjectOptions}}
                        <option value="{{index . "project_id"}}" {{if index . "selected"}}selected{{end}}>{{index . "name"}}</option>
                        {{end}}
                    </select>
                    <span class="doc-edit-meta-hint">{{T "user_doc_project_hint"}}</span>
                </div>
            </div>
        </section>
        {{end}}

        {{if .Data.IsNew}}

        <section class="doc-edit-panel doc-edit-panel--compose">

        <div class="publish-tabs-bar">
            <div class="publish-tabs-wrap">
                <ul class="nav publish-tabs" id="publishTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="tab-paste" data-bs-toggle="tab" data-bs-target="#pane-paste" type="button" role="tab" aria-selected="true">
                            <i class='bx bx-paste'></i>
                            <span>{{T "user_publish_tab_paste"}}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-batch" data-bs-toggle="tab" data-bs-target="#pane-batch" type="button" role="tab" aria-selected="false">
                            <i class='bx bx-upload'></i>
                            <span>{{T "user_publish_tab_batch"}}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-folder" data-bs-toggle="tab" data-bs-target="#pane-folder" type="button" role="tab" aria-selected="false">
                            <i class='bx bx-folder'></i>
                            <span>{{T "user_publish_tab_folder"}}</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-content publish-tab-content" id="publishTabContent">

            <!-- 在线粘贴 -->

            <div class="tab-pane fade show active" id="pane-paste" role="tabpanel">

                <form id="docForm" class="doc-edit-form">

                    <input type="hidden" id="docId" value="0">

                    <input type="hidden" id="projectId" value="{{index .Data.Project "id"}}">

                    <div class="mb-3">

                        <label class="form-label" for="docTitle">{{T "user_doc_title"}} <span class="text-danger">*</span></label>

                        <input type="text" class="form-control" id="docTitle" required>

                    </div>

                    {{template "doc-summary-field" ""}}

                    <div class="mb-0 doc-edit-content-area">

                        <div class="doc-edit-content-head">
                            <label class="form-label" for="docContent">{{T "user_doc_content"}} <span class="text-danger">*</span></label>
                        </div>

                        <div class="paste-toolbar">

                            <button type="button" class="btn btn-sm btn-paste-clipboard" id="btnPasteClipboard">

                                <i class='bx bx-paste'></i> {{T "user_paste_from_clipboard"}}

                            </button>

                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnDocAttachManage">
                                <i class='bx bx-paperclip'></i> {{T "user_attach_manage"}}
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnDocPreview" onclick="openDocPreview()">
                                <i class='bx bx-show'></i> {{T "user_doc_preview_new_tab"}}
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary js-doc-edit-maximize" id="btnDocEditMaximize" title="{{T "user_doc_edit_maximize"}}" aria-label="{{T "user_doc_edit_maximize"}}" aria-pressed="false">
                                <i class='bx bx-fullscreen' aria-hidden="true"></i> <span class="js-doc-edit-maximize-label">{{T "user_doc_edit_maximize"}}</span>
                            </button>

                        </div>

                        <textarea class="form-control font-monospace" id="docContent" rows="18" required placeholder="# Title&#10;&#10;Paste or write Markdown here..."></textarea>

                    </div>

                    <div class="doc-edit-actions-anchor">
                    <div class="doc-edit-actions-sentinel" aria-hidden="true"></div>
                    <div class="doc-edit-actions">

                        <button type="button" class="btn btn-outline-secondary" onclick="saveDoc('draft')">{{T "user_save_draft"}}</button>

                        <button type="button" class="btn btn-primary" onclick="saveDoc('submit')">{{T "user_submit_review"}}</button>

                        <a href="/user/documents" class="btn btn-link">{{T "user_btn_cancel"}}</a>

                    </div>
                    </div>

                </form>

            </div>

            <!-- 批量上传 -->

            <div class="tab-pane fade" id="pane-batch" role="tabpanel">

                <input type="hidden" id="uploadProjectId" value="{{index .Data.Project "id"}}">

                <div class="upload-zone mb-3" id="batchDropZone">
                    <div class="upload-zone__shell">
                        <i class='bx bx-cloud-upload upload-zone__icon'></i>
                        <div class="upload-zone__text">
                            <div class="upload-zone__title">{{T "user_upload_drop_files"}}</div>
                            <div class="upload-zone__subtitle-wrap">
                                <div class="upload-zone__subtitle">{{T "user_upload_batch_hint"}}</div>
                            </div>
                        </div>
                    </div>
                    <input type="file" id="batchFileInput" multiple class="d-none" accept=".md,.markdown,.txt,.rst,.html,.json,.yaml,.yml">
                </div>

                <div class="file-queue-panel d-none" id="batchQueuePanel">
                    <div class="file-queue-head">
                        <span class="file-queue-head__title">{{T "user_upload_queue_title"}}</span>
                        <button type="button" class="btn btn-sm btn-outline-danger d-none" id="batchClearQueueBtn" onclick="clearFileQueue('batch')">
                            <i class='bx bx-trash'></i> {{T "user_upload_clear_queue"}}
                        </button>
                    </div>
                    <div class="file-queue-hint">{{T "user_upload_queue_hint"}}</div>
                    <div id="batchFileList" class="file-queue-list"></div>
                </div>

                <div class="doc-edit-actions-anchor">
                <div class="doc-edit-actions-sentinel" aria-hidden="true"></div>
                <div class="doc-edit-actions">

                    <button type="button" class="btn btn-outline-secondary" id="batchUploadDraftBtn" disabled onclick="uploadFiles('batch', 'draft')">{{T "user_upload_confirm_draft"}}</button>

                    <button type="button" class="btn btn-primary" id="batchUploadSubmitBtn" disabled onclick="uploadFiles('batch', 'submit')">{{T "user_upload_confirm_submit"}}</button>

                    <a href="/user/documents" class="btn btn-link">{{T "user_btn_cancel"}}</a>

                </div>
                </div>

            </div>

            <!-- 目录上传 -->

            <div class="tab-pane fade" id="pane-folder" role="tabpanel">

                <div class="doc-edit-meta-hint mb-3">{{T "user_upload_folder_hint"}}</div>

                <div class="upload-zone mb-3" id="folderDropZone">
                    <div class="upload-zone__shell">
                        <i class='bx bx-folder-open upload-zone__icon'></i>
                        <div class="upload-zone__text">
                            <div class="upload-zone__title">{{T "user_upload_select_folder"}}</div>
                            <div class="upload-zone__subtitle-wrap">
                                <div class="upload-zone__subtitle">{{T "user_upload_folder_structure_hint"}}</div>
                            </div>
                        </div>
                    </div>
                    <input type="file" id="folderFileInput" webkitdirectory directory multiple class="d-none">
                </div>

                <div class="file-queue-panel d-none" id="folderQueuePanel">
                    <div class="file-queue-head">
                        <span class="file-queue-head__title">{{T "user_upload_queue_title"}}</span>
                        <button type="button" class="btn btn-sm btn-outline-danger d-none" id="folderClearQueueBtn" onclick="clearFileQueue('folder')">
                            <i class='bx bx-trash'></i> {{T "user_upload_clear_queue"}}
                        </button>
                    </div>
                    <div class="file-queue-hint">{{T "user_upload_queue_hint"}}</div>
                    <div id="folderFileList" class="file-queue-list"></div>
                </div>

                <div class="doc-edit-actions-anchor">
                <div class="doc-edit-actions-sentinel" aria-hidden="true"></div>
                <div class="doc-edit-actions">

                    <button type="button" class="btn btn-outline-secondary" id="folderUploadDraftBtn" disabled onclick="uploadFiles('folder', 'draft')">{{T "user_upload_confirm_draft"}}</button>

                    <button type="button" class="btn btn-primary" id="folderUploadSubmitBtn" disabled onclick="uploadFiles('folder', 'submit')">{{T "user_upload_confirm_submit"}}</button>

                    <a href="/user/documents" class="btn btn-link">{{T "user_btn_cancel"}}</a>

                </div>
                </div>

            </div>

        </div>

        </section>

        {{else}}

        <section class="doc-edit-panel doc-edit-panel--compose">

        <form id="docForm" class="doc-edit-form">

            <input type="hidden" id="docId" value="{{index .Data.Document "id"}}">

            <input type="hidden" id="projectId" value="{{index .Data.Project "id"}}">

            <div class="mb-3">

                <label class="form-label" for="docTitle">{{T "user_doc_title"}} <span class="text-danger">*</span></label>

                <input type="text" class="form-control" id="docTitle" value="{{if .Data.Document}}{{index .Data.Document "title"}}{{end}}" required>

            </div>

            {{if not .Data.IsNew}}
            <div class="mb-3">
                <label class="form-label" for="docSlugName">{{T "user_doc_slug_label"}} <span class="text-danger">*</span></label>
                <div class="input-group doc-edit-slug-group">
                    {{if .Data.CategoryOptions}}
                    <span class="input-group-text doc-edit-slug-dir" title="{{T "user_doc_slug_dir_readonly"}}">{{.Data.DocSlugDir}}{{if .Data.DocSlugDir}}/{{end}}</span>
                    {{else if .Data.DocSlugDir}}
                    <span class="input-group-text doc-edit-slug-dir" title="{{T "user_doc_slug_dir_readonly"}}">{{.Data.DocSlugDir}}/</span>
                    {{end}}
                    <input type="text" class="form-control font-monospace" id="docSlugName" value="{{.Data.DocSlugName}}" required autocomplete="off" spellcheck="false">
                </div>
                <span class="doc-edit-meta-hint">{{T "user_doc_slug_hint"}}</span>
            </div>
            {{end}}

            {{if .Data.Document}}{{template "doc-summary-field" (index .Data.Document "description")}}{{else}}{{template "doc-summary-field" ""}}{{end}}

            <div class="mb-3 doc-edit-content-area">

                <div class="doc-edit-content-head">
                    <label class="form-label" for="docContent">{{T "user_doc_content"}} <span class="text-danger">*</span></label>
                </div>

                <div class="paste-toolbar">
                    <button type="button" class="btn btn-sm btn-paste-clipboard" id="btnPasteClipboard">
                        <i class='bx bx-paste'></i> {{T "user_paste_from_clipboard"}}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="btnDocAttachManage">
                        <i class='bx bx-paperclip'></i> {{T "user_attach_manage"}}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btnDocPreview" onclick="openDocPreview()">
                        <i class='bx bx-show'></i> {{T "user_doc_preview_new_tab"}}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary js-doc-edit-maximize" id="btnDocEditMaximize" title="{{T "user_doc_edit_maximize"}}" aria-label="{{T "user_doc_edit_maximize"}}" aria-pressed="false">
                        <i class='bx bx-fullscreen' aria-hidden="true"></i> <span class="js-doc-edit-maximize-label">{{T "user_doc_edit_maximize"}}</span>
                    </button>
                </div>

                <textarea class="form-control font-monospace" id="docContent" rows="18" required>{{if .Data.Document}}{{index .Data.Document "content"}}{{end}}</textarea>

            </div>

            {{if not .Data.IsNew}}
            <div class="mb-3 doc-edit-comments-setting">
                <div class="doc-edit-comments-setting__main">
                    <div class="form-check form-switch doc-edit-comments-setting__switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="docCommentsEnabled" aria-labelledby="docCommentsEnabledLabel" {{if .Data.Document}}{{if ne (index .Data.Document "comments_enabled") 0}}checked{{end}}{{else}}checked{{end}}>
                        <label class="visually-hidden" id="docCommentsEnabledLabel" for="docCommentsEnabled">{{T "user_doc_comments_enabled"}}</label>
                    </div>
                    <div class="doc-edit-comments-setting__text">
                        <strong>{{T "user_doc_comments_enabled"}}</strong>
                        <div class="text-muted small">{{T "user_doc_comments_enabled_desc"}}</div>
                    </div>
                </div>
            </div>
            {{end}}

            <div class="doc-edit-actions-anchor">
            <div class="doc-edit-actions-sentinel" aria-hidden="true"></div>
            <div class="doc-edit-actions">

                <button type="button" class="btn btn-outline-secondary" onclick="saveDoc('draft')">{{T "user_save_draft"}}</button>

                <button type="button" class="btn btn-primary" onclick="saveDoc('submit')">{{T "user_submit_review"}}</button>

                <a href="/user/documents" class="btn btn-link">{{T "user_btn_cancel"}}</a>

            </div>
            </div>

        </form>

        </section>

        {{end}}

    </div>

</div>

<div id="sdDocAttachPanel" class="sd-doc-attach-panel sd-doc-imgtoc-modal is-hidden" aria-hidden="true" role="dialog" aria-labelledby="sdDocAttachPanelTitle">
    <div class="sd-doc-attach-panel__header" id="sdDocAttachPanelHandle">
        <div class="sd-doc-attach-panel__title-wrap">
            <i class='bx bx-paperclip' aria-hidden="true"></i>
            <span class="sd-doc-attach-panel__title" id="sdDocAttachPanelTitle">{{T "user_attach_modal_title"}}</span>
            <span class="sd-doc-attach-panel__count" id="sdDocAttachCount">0</span>
        </div>
        <div class="sd-doc-attach-panel__actions">
            <button type="button" class="sd-doc-attach-panel__btn" id="sdDocAttachMinimize" title="{{T "user_attach_minimize"}}" aria-label="{{T "user_attach_minimize"}}"><i class='bx bx-minus' aria-hidden="true"></i></button>
            <button type="button" class="sd-doc-attach-panel__btn sd-doc-attach-panel__btn--close" id="sdDocAttachClose" title="{{T "user_attach_close"}}" aria-label="{{T "user_attach_close"}}"><i class='bx bx-x' aria-hidden="true"></i></button>
        </div>
    </div>
    <div class="sd-doc-attach-panel__body" id="sdDocAttachPanelBody">
        {{if .Data.AttachEnabled}}
        <div class="sd-doc-attach-tabs">
            <ul class="nav sd-doc-attach-tabs__nav" id="sdDocAttachTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link active" id="sdDocAttachTabUploadBtn" data-bs-toggle="tab" data-bs-target="#sdDocAttachTabUpload" role="tab" aria-controls="sdDocAttachTabUpload" aria-selected="true">
                        <i class='bx bx-cloud-upload' aria-hidden="true"></i> {{T "user_attach_tab_upload"}}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link" id="sdDocAttachTabReferencedBtn" data-bs-toggle="tab" data-bs-target="#sdDocAttachTabList" data-list-filter="referenced" role="tab" aria-controls="sdDocAttachTabList" aria-selected="false">
                        <i class='bx bx-link-alt' aria-hidden="true"></i> {{T "user_attach_tab_referenced"}}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link" id="sdDocAttachTabAllBtn" data-bs-toggle="tab" data-bs-target="#sdDocAttachTabList" data-list-filter="all" role="tab" aria-controls="sdDocAttachTabList" aria-selected="false">
                        <i class='bx bx-folder-open' aria-hidden="true"></i> {{T "user_attach_tab_all"}}
                    </button>
                </li>
            </ul>
            <div class="tab-content sd-doc-attach-tabs__content" id="sdDocAttachTabContent">
                <div class="tab-pane fade show active" id="sdDocAttachTabUpload" role="tabpanel" aria-labelledby="sdDocAttachTabUploadBtn" tabindex="0">
                    <div class="sd-doc-attach-upload-hint" id="sdDocAttachHint">
                        <button type="button" class="sd-doc-attach-upload-hint__toggle" id="sdDocAttachHintToggle" aria-expanded="false" aria-controls="sdDocAttachHintDetail">
                            <span class="sd-doc-attach-upload-hint__icon" aria-hidden="true"><i class='bx bx-info-circle'></i></span>
                            <span class="sd-doc-attach-upload-hint__summary">{{T "user_attach_hint_summary"}} · {{T "user_attach_max_size"}} {{.Data.AttachMaxMB}} MB</span>
                            <span class="sd-doc-attach-upload-hint__chevron" aria-hidden="true"><i class='bx bx-chevron-down'></i></span>
                        </button>
                        <div class="sd-doc-attach-upload-hint__detail" id="sdDocAttachHintDetail">
                            <p class="sd-doc-attach-upload-hint__text">
                                {{if eq .Data.AttachDriver "imgtoc"}}{{T "user_attach_usage_hint"}}{{else}}{{T "user_attach_local_hint"}}{{end}}
                            </p>
                        </div>
                    </div>
                    <div class="sd-doc-attach-upload-group" id="sdDocAttachUploadGroupWrap">
                        <label class="form-label small" for="sdDocAttachUploadGroupSelect">{{T "user_attach_upload_group_label"}}</label>
                        <select id="sdDocAttachUploadGroupSelect" class="form-select form-select-sm" aria-describedby="sdDocAttachUploadGroupHint">
                            <option value="0">{{T "user_attach_group_ungrouped"}}</option>
                        </select>
                        <div id="sdDocAttachUploadGroupHint" class="form-text small">{{T "user_attach_upload_group_hint"}}</div>
                    </div>
                    <div class="sd-doc-attach-toolbar">
                        <div class="sd-doc-attach-toolbar__actions">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="sd-doc-attach-add-img"><i class='bx bx-image-add'></i> {{T "user_attach_upload_image"}}</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="sd-doc-attach-add-video"><i class='bx bxs-videos'></i> {{T "user_attach_upload_video"}}</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="sd-doc-attach-add-file"><i class='bx bx-cloud-upload'></i> {{T "user_attach_upload_file"}}</button>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-warning btn-upload-pause sd-doc-attach-toolbar__pause d-none" id="sdDocAttachUploadPause" title="{{T "user_upload_pause"}}"><i class='bx bx-pause' aria-hidden="true"></i> {{T "user_upload_pause"}}</button>
                    </div>
                    <div class="file-queue-panel d-none" id="sdDocAttachUploadQueue">
                        <div class="file-queue-head">
                            <span class="file-queue-head__title">{{T "user_attach_upload_queue_title"}}</span>
                        </div>
                        <div class="file-queue-hint">{{T "user_attach_upload_queue_hint"}}</div>
                        <div id="sdDocAttachQueueList" class="file-queue-list"></div>
                    </div>
                    <div class="sd-doc-attach-upload-status d-none" id="sd-doc-attach-upload-status" role="status" aria-live="polite" aria-atomic="true">
                        <i class='bx bx-loader-alt bx-spin' aria-hidden="true"></i>
                        <span id="sd-doc-attach-upload-status-text"></span>
                    </div>
                    <div class="sd-doc-attach-drop" id="sd-doc-attach-drop" tabindex="0" role="region" aria-label="{{T "user_attach_drop_hint"}}">
                        <i class='bx bx-cloud-upload d-block mb-1' style="font-size:1.75rem;color:#9ca3af;"></i>
                        <span class="text-muted small">{{T "user_attach_drop_hint"}}</span>
                        <div class="sd-doc-attach-drop__actions">
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="sdDocAttachPasteBtn">
                                <i class='bx bx-paste' aria-hidden="true"></i> {{T "user_attach_paste_btn"}}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade sd-doc-attach-list-pane" id="sdDocAttachTabList" role="tabpanel" aria-labelledby="sdDocAttachTabAllBtn" tabindex="0">
                    <div class="sd-doc-attach-groups-wrap">
                        <div class="sd-doc-attach-groups" id="sd-doc-attach-groups" role="toolbar" aria-label="{{T "user_attach_group_manage"}}"></div>
                    </div>
                    <div class="sd-doc-attach-search-wrap">
                        <div class="input-group input-group-sm sd-doc-attach-search" id="sdDocAttachSearchWrap">
                            <span class="input-group-text"><i class='bx bx-search' aria-hidden="true"></i></span>
                            <input type="search" class="form-control" id="sd-doc-attach-search" placeholder="{{T "user_attach_search_placeholder"}}" autocomplete="off" aria-label="{{T "user_attach_search_placeholder"}}">
                            <button type="button" class="btn btn-outline-secondary sd-doc-attach-search-clear d-none" id="sd-doc-attach-search-clear" title="{{T "user_btn_cancel"}}" aria-label="{{T "user_btn_cancel"}}"><i class='bx bx-x' aria-hidden="true"></i></button>
                        </div>
                        <div class="sd-doc-attach-search-meta d-none" id="sd-doc-attach-search-meta"></div>
                    </div>
                    <div class="sd-doc-attach-list" id="sd-doc-attach-list"></div>
                    <div class="sd-doc-attach-pagination" id="sd-doc-attach-pagination" hidden></div>
                </div>
            </div>
        </div>
        <input type="file" id="sd-doc-attach-input" class="d-none" multiple tabindex="-1" aria-hidden="true">
        {{else}}
        <div class="alert sd-doc-attach-alert small mb-0">
            <i class='bx bx-info-circle'></i>
            {{if eq .Data.AttachDriver "imgtoc"}}{{T "user_imgtoc_disabled_hint"}}{{else}}{{T "user_attach_disabled_hint"}}{{end}}
        </div>
        {{end}}
    </div>
</div>

{{if .Data.AttachEnabled}}
<div class="modal fade sd-bootstrap-modal attach-paste-confirm-modal" id="sdDocAttachPasteModal" tabindex="-1" aria-labelledby="sdDocAttachPasteModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sdDocAttachPasteModalTitle"><i class='bx bx-paste'></i> {{T "user_attach_paste_stage_title"}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user_attach_paste_cancel"}}"></button>
            </div>
            <div class="modal-body">
                <p class="small text-muted mb-3">{{T "user_attach_paste_stage_hint"}}</p>
                <div class="attach-paste-stage__list" id="sdDocAttachPasteList"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="sdDocAttachPasteClear">{{T "user_attach_paste_clear"}}</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="sdDocAttachPasteCancel">{{T "user_attach_paste_cancel"}}</button>
                <button type="button" class="btn btn-sm btn-primary" id="sdDocAttachPasteConfirm">{{T "user_attach_paste_confirm"}}</button>
            </div>
        </div>
    </div>
</div>
{{end}}

{{end}}

{{define "scripts"}}

<script>
window.sdDocAttachMsgs = {
    uploading: {{json (T "user_attach_uploading")}},
    uploadingFile: {{json (T "user_attach_uploading_file")}},
    ok: {{json (T "user_attach_upload_ok")}},
    tooBig: {{json (T "user_imgtoc_file_too_big")}},
    inserted: {{json (T "user_attach_inserted_ok")}},
    insertFail: {{json (T "user_attach_insert_fail")}},
    copyOk: {{json (T "user_attach_copy_ok")}},
    copyFail: {{json (T "user_attach_copy_fail")}},
    empty: {{json (T "user_attach_empty")}},
    emptyTitle: {{json (T "user_attach_empty_title")}},
    emptyHint: {{json (T "user_attach_empty_hint")}},
    emptyAction: {{json (T "user_attach_empty_action")}},
    tabUpload: {{json (T "user_attach_tab_upload")}},
    tabReferenced: {{json (T "user_attach_tab_referenced")}},
    tabAll: {{json (T "user_attach_tab_all")}},
    searchEmptyHint: {{json (T "user_attach_search_empty_hint")}},
    insert: {{json (T "user_attach_insert_md")}},
    insertImage: {{json (T "user_attach_insert_image")}},
    insertVideo: {{json (T "user_attach_insert_video")}},
    insertLink: {{json (T "user_attach_insert_link")}},
    copyLink: {{json (T "user_attach_copy_link")}},
    copyDownloadLink: {{json (T "user_attach_copy_download_link")}},
    copyDownloadOk: {{json (T "user_attach_copy_download_ok")}},
    delete: {{json (T "user_attach_delete")}},
    deleteConfirm: {{json (T "user_attach_delete_confirm")}},
    deleteConfirmTitle: {{json (T "user_attach_delete_confirm_title")}},
    searchEmpty: {{json (T "user_attach_search_empty")}},
    searchResult: {{json (T "user_attach_search_result")}},
    cancel: {{json (T "user_btn_cancel")}},
    disabled: {{json (T "user_attach_disabled_hint")}},
    extNotAllowed: {{json (T "user_attach_ext_not_allowed")}},
    minimize: {{json (T "user_attach_minimize")}},
    restore: {{json (T "user_attach_restore")}},
    close: {{json (T "user_attach_close")}},
    prevPage: {{json (T "user_attach_prev_page")}},
    nextPage: {{json (T "user_attach_next_page")}},
    pageInfo: {{json (T "user_attach_page_info")}},
    itemCount: {{json (T "user_attach_item_count")}},
    preview: {{json (T "user_attach_preview")}},
    previewFail: {{json (T "user_attach_preview_fail")}},
    previewVideo: {{json (T "user_attach_preview_video")}},
    previewVideoFail: {{json (T "user_attach_preview_video_fail")}},
    previewVideoTitle: {{json (T "user_attachments_preview_video")}},
    filterReferencedEmpty: {{json (T "user_attach_filter_referenced_empty")}},
    filterReferencedEmptyHint: {{json (T "user_attach_filter_referenced_empty_hint")}},
    filterReferencedBadge: {{json (T "user_attach_filter_referenced_badge")}},
    groupAll: {{json (T "user_attach_group_all")}},
    groupUngrouped: {{json (T "user_attach_group_ungrouped")}},
    groupAdd: {{json (T "user_attach_group_add")}},
    groupEdit: {{json (T "user_attach_group_edit")}},
    groupDelete: {{json (T "user_attach_group_delete")}},
    groupName: {{json (T "user_attach_group_name")}},
    groupNamePlaceholder: {{json (T "user_attach_group_name_placeholder")}},
    groupDeleteConfirm: {{json (T "user_attach_group_delete_confirm")}},
    groupAssign: {{json (T "user_attach_group_assign")}},
    groupAssignOk: {{json (T "user_attach_group_assigned_ok")}},
    groupAssignFail: {{json (T "user_attach_group_assign_failed")}},
    save: {{json (T "user_btn_save")}},
    queuePending: {{json (T "user_upload_status_pending")}},
    queueError: {{json (T "user_upload_status_error")}},
    queueCountSuffix: {{json (T "user_upload_file_count_suffix")}},
    queueRemove: {{json (T "user_upload_remove_file")}},
    cancelFile: {{json (T "user_upload_cancel_file")}},
    pause: {{json (T "user_upload_pause")}},
    resume: {{json (T "user_upload_resume")}},
    statusPaused: {{json (T "user_upload_status_paused")}},
    partialDone: {{json (T "user_upload_partial_done")}},
    uploadGroupLabel: {{json (T "user_attach_upload_group_label")}},
    uploadGroupHint: {{json (T "user_attach_upload_group_hint")}},
    pasteAdded: {{json (T "user_attach_paste_added")}},
    pasteEmpty: {{json (T "user_attach_paste_empty")}},
    pasteDenied: {{json (T "user_attach_paste_denied")}},
    pastePressShortcut: {{json (T "user_attach_paste_press_shortcut")}}
};
window.sdDocAttachPage = {
    enabled: {{if .Data.AttachEnabled}}true{{else}}false{{end}},
    driver: {{json .Data.AttachDriver}}
};
</script>
<script src="{{asset "/static/viewer/viewer-jquery.min.js"}}"></script>
<script src="{{asset "/template/default/assets/js/sd-image-viewer.js"}}"></script>
<script src="{{asset "/template/default/assets/js/sd-attach-upload-queue.js"}}"></script>
<script src="{{asset "/template/default/assets/js/sd-attach-paste-stage.js"}}"></script>
<script src="{{asset "/template/default/assets/js/document-attach-upload.js"}}"></script>
<script>

var batchFiles = [];

var folderFiles = [];

var projectId = {{index .Data.Project "id"}};

var UploadQueueI18n = {
    noFiles: {{json (T "user_upload_no_files")}},
    fileCountSuffix: {{json (T "user_upload_file_count_suffix")}},
    removeFile: {{json (T "user_upload_remove_file")}},
    clearQueueConfirm: {{json (T "user_upload_clear_queue_confirm")}},
    selectFirst: {{json (T "user_upload_select_first")}},
    statusPending: {{json (T "user_upload_status_pending")}},
    statusUploading: {{json (T "user_upload_status_uploading")}},
    statusDone: {{json (T "user_upload_status_done")}},
    statusError: {{json (T "user_upload_status_error")}},
    addMoreFiles: {{json (T "user_upload_add_more_files")}},
    addMoreFolder: {{json (T "user_upload_add_more_folder")}},
    partialDone: {{json (T "user_upload_partial_done")}},
    draftSuccess: {{json (T "user_upload_draft_success")}},
    draftPartial: {{json (T "user_upload_draft_partial")}},
    submitSuccess: {{json (T "user_upload_submit_success")}},
    submitPartial: {{json (T "user_upload_submit_partial")}},
    publishSuccess: {{json (T "user_upload_publish_success")}},
    publishPartial: {{json (T "user_upload_publish_partial")}},
    allFailed: {{json (T "user_upload_all_failed")}},
    dropFiles: {{json (T "user_upload_drop_files")}},
    selectFolder: {{json (T "user_upload_select_folder")}},
    folderConfirmTitle: {{json (T "user_upload_folder_confirm_title")}},
    folderConfirmMsg: {{json (T "user_upload_folder_confirm_msg")}},
    folderConfirmOk: {{json (T "user_upload_folder_confirm_ok")}},
    folderEmpty: {{json (T "user_upload_folder_empty")}},
    folderPickFailed: {{json (T "user_upload_folder_pick_failed")}},
    cancel: {{json (T "user_btn_cancel")}}
};

var uploadAuditEnabled = {{if .Data.AuditEnabled}}true{{else}}false{{end}};

var DocEditI18n = {
    publishSuccess: {{json (T "user_publish_success")}},
    saveFailed: {{json (T "user_save_failed")}},
    documentsUrl: {{json .Data.DocumentsManageURL}},
    previewEmpty: {{json (T "user_doc_preview_empty")}},
    previewLoadFailed: {{json (T "user_doc_preview_load_failed")}},
    previewPopupBlocked: {{json (T "user_doc_preview_popup_blocked")}},
    editMaximize: {{json (T "user_doc_edit_maximize")}},
    editRestore: {{json (T "user_doc_edit_restore")}}
};

function documentsManageUrl(res) {
    if (res && res.data && res.data.redirect_url) return res.data.redirect_url;
    return DocEditI18n.documentsUrl || '/user/documents';
}

function formatUploadCountMessage(template, values) {
    var msg = String(template || '');
    for (var i = 0; i < values.length; i++) {
        msg = msg.replace('%d', String(values[i]));
    }
    return msg;
}

function buildBatchUploadMessage(action, successCount, failCount) {
    var isDraft = action === 'draft';
    if (isDraft) {
        if (failCount > 0) {
            return formatUploadCountMessage(UploadQueueI18n.draftPartial, [successCount, failCount]);
        }
        return formatUploadCountMessage(UploadQueueI18n.draftSuccess, [successCount]);
    }
    if (uploadAuditEnabled) {
        if (failCount > 0) {
            return formatUploadCountMessage(UploadQueueI18n.submitPartial, [successCount, failCount]);
        }
        return formatUploadCountMessage(UploadQueueI18n.submitSuccess, [successCount]);
    }
    if (failCount > 0) {
        return formatUploadCountMessage(UploadQueueI18n.publishPartial, [successCount, failCount]);
    }
    return formatUploadCountMessage(UploadQueueI18n.publishSuccess, [successCount]);
}

function showDocSaveToast(message, res) {
    BootstrapModal.msg(message || DocEditI18n.publishSuccess, {
        icon: 1,
        time: 1800,
        callback: function () {
            location.href = documentsManageUrl(res);
        }
    });
}

var isNewDocument = {{if .Data.IsNew}}true{{else}}false{{end}};
var LAST_PUBLISH_LOCATION_KEY = 'sd_last_publish_location';

function hasExplicitPublishLocationInUrl() {
    try {
        var params = new URLSearchParams(window.location.search || '');
        return !!(params.get('directory_id') || params.get('project_id') || params.get('directory'));
    } catch (e) {
        return false;
    }
}

function saveLastPublishLocation() {
    if (!$('#docPublicDirectory').length) {
        return;
    }
    var dirId = getSelectedPublicDirectoryId();
    if (dirId <= 0) {
        return;
    }
    var payload = {
        directory_id: dirId,
        user_project_id: parseInt($('#docUserProject').val(), 10) || 0
    };
    try {
        localStorage.setItem(LAST_PUBLISH_LOCATION_KEY, JSON.stringify(payload));
    } catch (e) {}
}

function restoreLastPublishLocation() {
    if (!isNewDocument || hasExplicitPublishLocationInUrl()) {
        return;
    }
    if (!$('#docPublicDirectory').length) {
        return;
    }
    var data = null;
    try {
        data = JSON.parse(localStorage.getItem(LAST_PUBLISH_LOCATION_KEY) || '');
    } catch (e) {
        return;
    }
    if (!data || typeof data !== 'object') {
        return;
    }
    var dirId = parseInt(data.directory_id, 10) || 0;
    var userProj = parseInt(data.user_project_id, 10) || 0;
    if (dirId > 0 && $('#docPublicDirectory option[value="' + dirId + '"]').length) {
        $('#docPublicDirectory').val(String(dirId));
    }
    if (userProj > 0 && $('#docUserProject option[value="' + userProj + '"]').length) {
        $('#docUserProject').val(String(userProj));
    }
}

function getSelectedPublicDirectoryId() {
    return parseInt($('#docPublicDirectory').val(), 10) || 0;
}

function getSelectedProjectId() {
    var userProj = parseInt($('#docUserProject').val(), 10) || 0;
    if (userProj > 0) {
        return userProj;
    }
    var $dir = $('#docPublicDirectory option:selected');
    if ($dir.length && $dir.val()) {
        return parseInt($dir.attr('data-site-project-id'), 10) || 0;
    }
    return parseInt($('#projectId').val(), 10) || 0;
}

function updateDocSlugDirPrefix() {
    var $slugDir = $('.doc-edit-slug-dir');
    if (!$slugDir.length) {
        return;
    }
    var prefix = ($('#docPublicDirectory option:selected').attr('data-path-prefix') || '').replace(/\\/g, '/').replace(/\/+$/, '');
    $slugDir.text(prefix ? prefix + '/' : '');
}

function syncProjectFields() {
    var pid = getSelectedProjectId();
    $('#projectId').val(pid);
    $('#uploadProjectId').val(pid);
    projectId = pid;
}

function isDocEditMaximized() {
    return document.body.classList.contains('user-doc-edit-maximized');
}

function syncDocEditMaximizeButtons() {
    var on = isDocEditMaximized();
    var label = on ? (DocEditI18n.editRestore || 'Restore') : (DocEditI18n.editMaximize || 'Maximize');
    $('.js-doc-edit-maximize').each(function () {
        var $btn = $(this);
        var $icon = $btn.find('i').first();
        $btn.attr('title', label);
        $btn.attr('aria-label', label);
        $btn.attr('aria-pressed', on ? 'true' : 'false');
        $btn.toggleClass('is-on', on).removeClass('active');
        $btn.find('.js-doc-edit-maximize-label').text(label);
        if (on) {
            $icon.removeClass('bx-fullscreen').addClass('bx-exit-fullscreen');
        } else {
            $icon.removeClass('bx-exit-fullscreen').addClass('bx-fullscreen');
        }
    });
}

function setDocEditMaximized(on) {
    var enable = !!on;
    document.body.classList.toggle('user-doc-edit-maximized', enable);
    if (enable) {
        document.body.classList.remove('user-sidebar-open');
        $('#userSidebar').removeClass('is-open');
        $('#userSidebarOverlay').removeClass('is-visible').prop('hidden', true);
        $('#userSidebarToggle').attr('aria-expanded', 'false');
    }
    syncDocEditMaximizeButtons();
    if (enable) {
        var $ta = $('#docContent');
        if ($ta.length) {
            try { $ta.trigger('focus'); } catch (e) {}
        }
    }
    window.dispatchEvent(new Event('resize'));
}

function toggleDocEditMaximize() {
    setDocEditMaximized(!isDocEditMaximized());
}

function openDocPreview() {
    var content = ($('#docContent').val() || '').trim();
    if (!content) {
        BootstrapModal.msg(DocEditI18n.previewEmpty, {icon: 2});
        return;
    }
    var storageKey = 'sd_doc_preview_' + Date.now();
    var payload = {
        title: ($('#docTitle').val() || '').trim(),
        description: ($('#docDesc').val() || '').trim(),
        content: $('#docContent').val()
    };
    try {
        // localStorage 在同源各标签页间共享；sessionStorage 供刷新/同标签页回退
        var payloadJson = JSON.stringify(payload);
        localStorage.setItem(storageKey, payloadJson);
        sessionStorage.setItem(storageKey, payloadJson);
    } catch (e) {
        BootstrapModal.msg(DocEditI18n.previewLoadFailed, {icon: 2});
        return;
    }
    var url = '/user/document_preview?key=' + encodeURIComponent(storageKey);
    // 勿使用 noopener 特性字符串：多数浏览器会返回 null，导致误报失败
    var previewWin = window.open(url, '_blank');
    if (!previewWin) {
        try {
            localStorage.removeItem(storageKey);
            sessionStorage.removeItem(storageKey);
        } catch (ignore) {}
        BootstrapModal.msg(DocEditI18n.previewPopupBlocked, {icon: 2});
        return;
    }
    previewWin.opener = null;
}

function saveDoc(action) {

    if ($('#docPublicDirectory').length && !getSelectedPublicDirectoryId()) {
        BootstrapModal.msg({{json (T "user_doc_category_required")}}, {icon:2});
        return;
    }

    if (!$('#docTitle').val().trim()) { BootstrapModal.msg({{json (T "user_title_required")}}, {icon:2}); return; }

    if ($('#docSlugName').length) {
        var slugName = ($('#docSlugName').val() || '').trim();
        if (!slugName) {
            BootstrapModal.msg({{json (T "user_doc_slug_required")}}, {icon:2});
            return;
        }
        if (slugName.indexOf('/') >= 0 || slugName.indexOf('\\') >= 0 || slugName.indexOf('..') >= 0) {
            BootstrapModal.msg({{json (T "user_doc_slug_invalid")}}, {icon:2}); return;
        }
    }

    var loadIdx = BootstrapModal.load();

    $.ajax({

        url: '/user/document_save',

        method: 'POST',

        contentType: 'application/json',

        data: JSON.stringify({

            id: parseInt($('#docId').val()) || 0,

            project_id: getSelectedProjectId(),

            directory_id: getSelectedPublicDirectoryId(),

            title: $('#docTitle').val(),

            description: $('#docDesc').val(),

            content: $('#docContent').val(),

            slug: ($('#docSlugName').val() || '').trim(),

            action: action{{if not .Data.IsNew}},

            comments_enabled: $('#docCommentsEnabled').is(':checked'){{end}}

        }),

        success: function(res) {

            BootstrapModal.close(loadIdx);

            if (res.success) {
                saveLastPublishLocation();
                showDocSaveToast(res.message, res);

            } else {

                BootstrapModal.msg(res.message || DocEditI18n.saveFailed, {icon:2});

            }

        },

        error: function() {

            BootstrapModal.close(loadIdx);

            BootstrapModal.msg(DocEditI18n.saveFailed, {icon:2});

        }

    });

}

function extractTitleFromContent(content) {

    var lines = content.split('\n');

    for (var i = 0; i < lines.length; i++) {

        var line = $.trim(lines[i]);

        if (line.indexOf('# ') === 0) {

            return $.trim(line.substring(2));

        }

    }

    return '';

}

$('#btnPasteClipboard').on('click', function() {

    if (!navigator.clipboard || !navigator.clipboard.readText) {

        BootstrapModal.msg({{json (T "user_clipboard_unsupported")}}, {icon:0});

        return;

    }

    navigator.clipboard.readText().then(function(text) {

        if (!text) return;

        $('#docContent').val(text);

        if (!$('#docTitle').val().trim()) {

            var title = extractTitleFromContent(text);

            if (title) $('#docTitle').val(title);

        }

        BootstrapModal.msg({{json (T "user_paste_success")}}, {icon:1, time:1500});

    }).catch(function() {

        BootstrapModal.msg({{json (T "user_clipboard_denied")}}, {icon:2});

    });

});

$('#docContent').on('paste', function() {

    var el = this;

    setTimeout(function() {

        if (!$('#docTitle').val().trim()) {

            var title = extractTitleFromContent($(el).val());

            if (title) $('#docTitle').val(title);

        }

    }, 0);

});

function escapeHtml(text) {
    return String(text)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

function getFileStore(mode) {
    return mode === 'batch' ? batchFiles : folderFiles;
}

function getFileListSelector(mode) {
    return mode === 'batch' ? '#batchFileList' : '#folderFileList';
}

function getQueuePanelSelector(mode) {
    return mode === 'batch' ? '#batchQueuePanel' : '#folderQueuePanel';
}

function getDropZoneSelector(mode) {
    return mode === 'batch' ? '#batchDropZone' : '#folderDropZone';
}

function getModePrefix(mode) {
    return mode === 'batch' ? '#batch' : '#folder';
}

function resetFileUploadState(file) {
    file._uploadStatus = 'pending';
    file._uploadProgress = 0;
    file._uploadError = '';
}

function isQueueUploading(mode) {
    return getFileStore(mode).some(function(f) {
        return f._uploadStatus === 'uploading';
    });
}

function getUploadStatusText(file) {
    var status = file._uploadStatus || 'pending';
    var progress = file._uploadProgress || 0;
    if (status === 'uploading') {
        return UploadQueueI18n.statusUploading + ' ' + progress + '%';
    }
    if (status === 'done') {
        return UploadQueueI18n.statusDone;
    }
    if (status === 'error') {
        return file._uploadError || UploadQueueI18n.statusError;
    }
    return UploadQueueI18n.statusPending;
}

function updateDropZoneState(mode) {
    var files = getFileStore(mode);
    var hasFiles = files.length > 0;
    var uploading = isQueueUploading(mode);
    var $zone = $(getDropZoneSelector(mode));
    var $title = $zone.find('.upload-zone__title');
    var newTitle = hasFiles
        ? (mode === 'batch' ? UploadQueueI18n.addMoreFiles : UploadQueueI18n.addMoreFolder)
        : (mode === 'batch' ? UploadQueueI18n.dropFiles : UploadQueueI18n.selectFolder);
    var wasCompact = $zone.hasClass('upload-zone--compact');

    if (wasCompact === hasFiles && $title.text() === newTitle) {
        $zone.toggleClass('is-uploading', uploading);
        return;
    }

    $zone.addClass('upload-zone--animating');

    if (hasFiles && !wasCompact) {
        $title.css('opacity', 0);
        $zone.addClass('upload-zone--compact');
        window.setTimeout(function() {
            $title.text(newTitle).css('opacity', 1);
        }, 180);
    } else if (!hasFiles && wasCompact) {
        $title.css('opacity', 0);
        $zone.removeClass('upload-zone--compact');
        window.setTimeout(function() {
            $title.text(newTitle).css('opacity', 1);
        }, 220);
    } else {
        $title.text(newTitle);
    }

    $zone.toggleClass('is-uploading', uploading);

    window.clearTimeout($zone.data('uploadZoneAnimTimer'));
    $zone.data('uploadZoneAnimTimer', window.setTimeout(function() {
        $zone.removeClass('upload-zone--animating');
        $title.css('opacity', '');
    }, 450));
}

function getFilePathKey(file) {
    return file.webkitRelativePath || file.name;
}

function addFilesToQueue(mode, newFiles) {
    var fileStore = getFileStore(mode);
    var existing = {};
    fileStore.forEach(function(f) {
        existing[getFilePathKey(f)] = true;
    });
    Array.prototype.forEach.call(newFiles, function(f) {
        var key = getFilePathKey(f);
        if (!existing[key]) {
            resetFileUploadState(f);
            fileStore.push(f);
            existing[key] = true;
        }
    });
    renderFileList(mode);
}

function removeFileFromQueue(mode, index) {
    if (isQueueUploading(mode)) return;
    var fileStore = getFileStore(mode);
    if (index < 0 || index >= fileStore.length) return;
    fileStore.splice(index, 1);
    renderFileList(mode);
}

function clearFileQueue(mode) {
    if (isQueueUploading(mode)) return;
    var fileStore = getFileStore(mode);
    if (!fileStore.length) return;
    BootstrapModal.confirm(UploadQueueI18n.clearQueueConfirm, function() {
        fileStore.length = 0;
        renderFileList(mode);
    });
}

function updateUploadButtonsState(mode) {
    var files = getFileStore(mode);
    var hasFiles = files.length > 0;
    var uploading = isQueueUploading(mode);
    var prefix = getModePrefix(mode);
    $(prefix + 'UploadDraftBtn, ' + prefix + 'UploadSubmitBtn').prop('disabled', !hasFiles || uploading);
    $(prefix + 'ClearQueueBtn').toggleClass('d-none', !hasFiles).prop('disabled', uploading);
}

function setFileUploadState(mode, index, status, progress, errorMessage) {
    var files = getFileStore(mode);
    if (index < 0 || index >= files.length) return;
    var file = files[index];
    file._uploadStatus = status;
    file._uploadProgress = typeof progress === 'number' ? progress : 0;
    if (errorMessage) {
        file._uploadError = errorMessage;
    }
    updateFileQueueItem(mode, index);
    updateUploadButtonsState(mode);
    updateDropZoneState(mode);
}

function updateFileQueueItem(mode, index) {
    var files = getFileStore(mode);
    if (index < 0 || index >= files.length) return;
    var file = files[index];
    var path = getFilePathKey(file);
    var status = file._uploadStatus || 'pending';
    var progress = file._uploadProgress || 0;
    var statusText = getUploadStatusText(file);
    var showProgress = status === 'uploading' || status === 'done' || status === 'error';
    var itemClass = 'file-queue-item';
    if (status === 'uploading') itemClass += ' is-uploading';
    if (status === 'done') itemClass += ' is-done';
    if (status === 'error') itemClass += ' is-error';
    var progressClass = 'file-queue-progress';
    if (status === 'done') progressClass += ' is-done';
    if (status === 'error') progressClass += ' is-error';
    var barWidth = status === 'done' ? 100 : progress;
    var disableRemove = isQueueUploading(mode) || status === 'uploading';

    var $item = $('<div class="' + itemClass + '" data-index="' + index + '"></div>');
    $item.append('<div class="file-queue-item__icon"><i class="bx bx-file-blank"></i></div>');
    var $body = $('<div class="file-queue-item__body"></div>');
    $body.append(
        '<div class="file-queue-item__row">' +
        '<span class="file-queue-item__name" title="' + escapeHtml(path) + '">' + escapeHtml(path) + '</span>' +
        '<span class="file-queue-item__size">' + formatSize(file.size) + '</span>' +
        '</div>'
    );
    if (showProgress) {
        $body.append(
            '<div class="' + progressClass + '">' +
            '<div class="file-queue-progress__bar" style="width:' + barWidth + '%"></div>' +
            '</div>' +
            '<div class="file-queue-item__status">' + escapeHtml(statusText) + '</div>'
        );
    }
    $item.append($body);
    $item.append(
        '<button type="button" class="file-queue-item__remove js-remove-queue-file" data-mode="' + mode + '" data-index="' + index + '" title="' + escapeHtml(UploadQueueI18n.removeFile) + '"' + (disableRemove ? ' disabled' : '') + '>' +
        '<i class="bx bx-x"></i></button>'
    );

    var $list = $(getFileListSelector(mode));
    var $existing = $list.find('.file-queue-item[data-index="' + index + '"]');
    if ($existing.length) {
        $existing.replaceWith($item);
    } else {
        $list.find('.file-queue-summary').before($item);
    }
}

function renderFileList(mode) {
    var files = getFileStore(mode);
    var $list = $(getFileListSelector(mode));
    var $panel = $(getQueuePanelSelector(mode));
    $list.empty();
    updateDropZoneState(mode);

    if (!files.length) {
        $panel.addClass('d-none');
        updateUploadButtonsState(mode);
        return;
    }

    $panel.removeClass('d-none');

    files.forEach(function(f, index) {
        var path = getFilePathKey(f);
        var status = f._uploadStatus || 'pending';
        var progress = f._uploadProgress || 0;
        var statusText = getUploadStatusText(f);
        var showProgress = status === 'uploading' || status === 'done' || status === 'error';
        var itemClass = 'file-queue-item';
        if (status === 'uploading') itemClass += ' is-uploading';
        if (status === 'done') itemClass += ' is-done';
        if (status === 'error') itemClass += ' is-error';
        var progressClass = 'file-queue-progress';
        if (status === 'done') progressClass += ' is-done';
        if (status === 'error') progressClass += ' is-error';
        var barWidth = status === 'done' ? 100 : progress;
        var disableRemove = isQueueUploading(mode) || status === 'uploading';

        var $item = $('<div class="' + itemClass + '" data-index="' + index + '"></div>');
        $item.append('<div class="file-queue-item__icon"><i class="bx bx-file-blank"></i></div>');
        var $body = $('<div class="file-queue-item__body"></div>');
        $body.append(
            '<div class="file-queue-item__row">' +
            '<span class="file-queue-item__name" title="' + escapeHtml(path) + '">' + escapeHtml(path) + '</span>' +
            '<span class="file-queue-item__size">' + formatSize(f.size) + '</span>' +
            '</div>'
        );
        if (showProgress) {
            $body.append(
                '<div class="' + progressClass + '">' +
                '<div class="file-queue-progress__bar" style="width:' + barWidth + '%"></div>' +
                '</div>' +
                '<div class="file-queue-item__status">' + escapeHtml(statusText) + '</div>'
            );
        }
        $item.append($body);
        $item.append(
            '<button type="button" class="file-queue-item__remove js-remove-queue-file" data-mode="' + mode + '" data-index="' + index + '" title="' + escapeHtml(UploadQueueI18n.removeFile) + '"' + (disableRemove ? ' disabled' : '') + '>' +
            '<i class="bx bx-x"></i></button>'
        );
        $list.append($item);
    });

    $list.append(
        '<div class="file-queue-summary">' +
        '<span class="file-queue-summary__count">' + files.length + ' ' + UploadQueueI18n.fileCountSuffix + '</span>' +
        '</div>'
    );
    updateUploadButtonsState(mode);
}

function formatSize(bytes) {

    if (bytes < 1024) return bytes + ' B';

    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';

    return (bytes / 1048576).toFixed(1) + ' MB';

}

function setupDropZone(zoneId, inputId, mode) {

    var $zone = $(zoneId);

    var $input = $(inputId);

    $zone.on('click', function(e) {

        if (e.target === $input[0]) return;

        $input.trigger('click');

    });

    $input.on('change', function() {

        if (this.files && this.files.length) {
            addFilesToQueue(mode, this.files);
        }
        this.value = '';

    });

    $zone.on('dragover dragenter', function(e) {

        e.preventDefault();

        $zone.addClass('dragover');

    });

    $zone.on('dragleave dragend drop', function(e) {

        e.preventDefault();

        $zone.removeClass('dragover');

    });

    $zone.on('drop', function(e) {

        var dt = e.originalEvent.dataTransfer;

        if (!dt || !dt.files || !dt.files.length) return;

        addFilesToQueue(mode, dt.files);

    });

}

function supportsDirectoryPicker() {
    return typeof window.showDirectoryPicker === 'function';
}

function tagFileWithRelativePath(file, relPath) {
    try {
        Object.defineProperty(file, 'webkitRelativePath', { value: relPath, configurable: true });
    } catch (err) { /* ignore */ }
    return file;
}

function getFolderNameFromFiles(files) {
    if (!files || !files.length) return '';
    var path = files[0].webkitRelativePath || files[0].name || '';
    if (!path) return '';
    var parts = path.split('/');
    return parts.length > 1 ? parts[0] : '';
}

function buildFolderConfirmMessage(count, folderName) {
    return UploadQueueI18n.folderConfirmMsg
        .replace(/\{count\}/g, String(count))
        .replace(/\{folder\}/g, escapeHtml(folderName || '—'));
}

function confirmAndAddFolderFiles(files, folderName) {
    if (!files || !files.length) {
        BootstrapModal.msg(UploadQueueI18n.folderEmpty, {icon: 0});
        return;
    }
    BootstrapModal.confirm(buildFolderConfirmMessage(files.length, folderName), {
        title: UploadQueueI18n.folderConfirmTitle,
        btn: [UploadQueueI18n.folderConfirmOk, UploadQueueI18n.cancel]
    }, function() {
        addFilesToQueue('folder', files);
    });
}

function readAllDirectoryEntries(reader) {
    return new Promise(function(resolve) {
        var entries = [];
        function readBatch() {
            reader.readEntries(function(batch) {
                if (!batch.length) {
                    resolve(entries);
                    return;
                }
                entries = entries.concat(Array.prototype.slice.call(batch));
                readBatch();
            });
        }
        readBatch();
    });
}

function traverseDroppedEntry(entry, path) {
    if (entry.isFile) {
        return new Promise(function(resolve) {
            entry.file(function(file) {
                resolve([tagFileWithRelativePath(file, path + file.name)]);
            });
        });
    }
    if (entry.isDirectory) {
        return readAllDirectoryEntries(entry.createReader()).then(function(entries) {
            return Promise.all(entries.map(function(sub) {
                return traverseDroppedEntry(sub, path + entry.name + '/');
            })).then(function(groups) {
                return groups.reduce(function(acc, group) { return acc.concat(group); }, []);
            });
        });
    }
    return Promise.resolve([]);
}

function collectFilesFromDataTransfer(dt) {
    var items = dt.items;
    if (items && items.length) {
        var promises = [];
        for (var i = 0; i < items.length; i++) {
            var entry = items[i].webkitGetAsEntry && items[i].webkitGetAsEntry();
            if (entry) promises.push(traverseDroppedEntry(entry, ''));
        }
        if (promises.length) {
            return Promise.all(promises).then(function(groups) {
                return groups.reduce(function(acc, group) { return acc.concat(group); }, []);
            });
        }
    }
    if (dt.files && dt.files.length) {
        return Promise.resolve(Array.prototype.slice.call(dt.files));
    }
    return Promise.resolve([]);
}

async function collectFilesFromDirectory(dirHandle, basePath, out) {
    for await (var entry of dirHandle.values()) {
        var relPath = basePath ? (basePath + '/' + entry.name) : entry.name;
        if (entry.kind === 'file') {
            out.push(tagFileWithRelativePath(await entry.getFile(), relPath));
        } else if (entry.kind === 'directory') {
            await collectFilesFromDirectory(entry, relPath, out);
        }
    }
}

function pickFolderViaDirectoryPicker() {
    return window.showDirectoryPicker({ mode: 'read' }).then(function(dirHandle) {
        var files = [];
        return collectFilesFromDirectory(dirHandle, '', files).then(function() {
            return { folderName: dirHandle.name, files: files };
        });
    });
}

function setupFolderDropZone(zoneId, inputId) {
    var $zone = $(zoneId);
    var $input = $(inputId);

    $zone.on('click', function(e) {
        if (e.target === $input[0]) return;
        if (isQueueUploading('folder')) return;

        if (supportsDirectoryPicker()) {
            pickFolderViaDirectoryPicker().then(function(result) {
                confirmAndAddFolderFiles(result.files, result.folderName);
            }).catch(function(err) {
                if (err && err.name === 'AbortError') return;
                BootstrapModal.msg(UploadQueueI18n.folderPickFailed, {icon: 2});
            });
            return;
        }

        $input.trigger('click');
    });

    $input.on('change', function() {
        if (!this.files || !this.files.length) return;
        var files = Array.prototype.slice.call(this.files);
        confirmAndAddFolderFiles(files, getFolderNameFromFiles(files));
        this.value = '';
    });

    $zone.on('dragover dragenter', function(e) {
        e.preventDefault();
        $zone.addClass('dragover');
    });

    $zone.on('dragleave dragend drop', function(e) {
        e.preventDefault();
        $zone.removeClass('dragover');
    });

    $zone.on('drop', function(e) {
        if (isQueueUploading('folder')) return;
        var dt = e.originalEvent.dataTransfer;
        if (!dt) return;
        collectFilesFromDataTransfer(dt).then(function(files) {
            if (!files.length) return;
            confirmAndAddFolderFiles(files, getFolderNameFromFiles(files));
        });
    });
}

$(document).on('click', '.js-remove-queue-file', function(e) {
    e.preventDefault();
    e.stopPropagation();
    removeFileFromQueue($(this).data('mode'), parseInt($(this).data('index'), 10));
});

setupDropZone('#batchDropZone', '#batchFileInput', 'batch');

setupFolderDropZone('#folderDropZone', '#folderFileInput');

renderFileList('batch');

renderFileList('folder');

function uploadFiles(mode, action) {
    var files = getFileStore(mode);
    if (!files.length) {
        BootstrapModal.msg(UploadQueueI18n.selectFirst, {icon:2});
        return;
    }
    if ($('#docPublicDirectory').length && !getSelectedPublicDirectoryId()) {
        BootstrapModal.msg({{json (T "user_doc_category_required")}}, {icon:2});
        return;
    }
    if (isQueueUploading(mode)) return;

    files.forEach(function(f) {
        resetFileUploadState(f);
    });
    renderFileList(mode);

    var successCount = 0;
    var failCount = 0;
    var lastSuccessRes = null;
    var index = 0;

    function uploadNext() {
        if (index >= files.length) {
            finishUploadBatch(mode, action, successCount, failCount, lastSuccessRes);
            return;
        }

        var file = files[index];
        var currentIndex = index;
        setFileUploadState(mode, currentIndex, 'uploading', 0);

        var formData = new FormData();
        formData.append('project_id', getSelectedProjectId());
        if ($('#docPublicDirectory').length) {
            formData.append('directory_id', getSelectedPublicDirectoryId());
        }
        formData.append('action', action);
        formData.append('files', file);
        formData.append('paths', getFilePathKey(file));

        $.ajax({
            url: '/user/document_upload',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var pct = Math.round((e.loaded / e.total) * 100);
                            setFileUploadState(mode, currentIndex, 'uploading', pct);
                        }
                    });
                }
                return xhr;
            },
            success: function(res) {
                if (res.success) {
                    setFileUploadState(mode, currentIndex, 'done', 100);
                    successCount++;
                    lastSuccessRes = res;
                } else {
                    setFileUploadState(mode, currentIndex, 'error', 0, res.message || UploadQueueI18n.statusError);
                    failCount++;
                }
                index++;
                uploadNext();
            },
            error: function() {
                setFileUploadState(mode, currentIndex, 'error', 0, UploadQueueI18n.statusError);
                failCount++;
                index++;
                uploadNext();
            }
        });
    }

    uploadNext();
}

function finishUploadBatch(mode, action, successCount, failCount, lastSuccessRes) {
    var fileStore = getFileStore(mode);
    var batchMessage = buildBatchUploadMessage(action, successCount, failCount);

    function afterBatchCacheSync() {
        if (successCount > 0 && failCount === 0) {
            fileStore.length = 0;
            renderFileList(mode);
            saveLastPublishLocation();
            showDocSaveToast(batchMessage, lastSuccessRes);
            return;
        }

        for (var i = fileStore.length - 1; i >= 0; i--) {
            if (fileStore[i]._uploadStatus === 'done') {
                fileStore.splice(i, 1);
            }
        }
        renderFileList(mode);

        if (successCount > 0 && failCount > 0) {
            saveLastPublishLocation();
            BootstrapModal.msg(batchMessage, {icon: 0, time: 4000});
            return;
        }

        BootstrapModal.msg(UploadQueueI18n.allFailed, {icon: 2, time: 4000});
    }

    if (successCount <= 0) {
        afterBatchCacheSync();
        return;
    }

    $.ajax({
        url: '/user/document_upload_cache_sync',
        method: 'POST',
        data: {project_id: getSelectedProjectId()},
        complete: function() {
            afterBatchCacheSync();
        }
    });
}

function initDocSummaryField() {
    var $field = $('#docSummaryField');
    if (!$field.length) {
        return;
    }
    var $shell = $('#docSummaryShell');
    var $trigger = $('#docDescTrigger');
    var $textarea = $('#docDesc');
    var $placeholder = $trigger.find('.doc-summary-trigger__placeholder');
    var $text = $trigger.find('.doc-summary-trigger__text');
    var animMs = 280;

    $textarea.attr('tabindex', '-1');

    function syncTriggerFromTextarea() {
        var val = ($textarea.val() || '').trim();
        if (val) {
            $placeholder.addClass('d-none');
            $text.text(val).removeClass('d-none');
            $trigger.removeClass('is-empty');
        } else {
            $placeholder.removeClass('d-none');
            $text.addClass('d-none').text('');
            $trigger.addClass('is-empty');
        }
    }

    function expandEditor() {
        if ($shell.hasClass('is-editing')) {
            return;
        }
        $shell.addClass('is-editing');
        $textarea.removeAttr('tabindex');
        window.setTimeout(function() {
            $textarea.trigger('focus');
        }, animMs);
    }

    function collapseEditor() {
        if (!$shell.hasClass('is-editing')) {
            return;
        }
        $shell.removeClass('is-editing');
        window.setTimeout(function() {
            syncTriggerFromTextarea();
            $textarea.attr('tabindex', '-1');
        }, animMs);
    }

    $trigger.on('click', expandEditor);
    $trigger.on('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            expandEditor();
        }
    });

    $textarea.on('blur', collapseEditor);

    syncTriggerFromTextarea();
}

function initDocEditFloatingActions() {
    var anchors = document.querySelectorAll('.doc-edit-actions-anchor');
    if (!anchors.length || !('IntersectionObserver' in window)) return;

    function isAnchorVisible(anchor) {
        return !!(anchor && anchor.offsetParent);
    }

    function syncFloatingBar(anchor, bar, floating) {
        if (!anchor || !bar) return;
        if (!floating || !isAnchorVisible(anchor)) {
            bar.classList.remove('is-floating');
            bar.style.left = '';
            bar.style.width = '';
            anchor.style.minHeight = '';
            return;
        }
        var rect = anchor.getBoundingClientRect();
        bar.classList.add('is-floating');
        bar.style.left = rect.left + 'px';
        bar.style.width = rect.width + 'px';
        anchor.style.minHeight = bar.offsetHeight + 'px';
    }

    anchors.forEach(function (anchor) {
        var sentinel = anchor.querySelector('.doc-edit-actions-sentinel');
        var bar = anchor.querySelector('.doc-edit-actions');
        if (!sentinel || !bar) return;

        var floating = false;
        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                floating = !entry.isIntersecting && isAnchorVisible(anchor);
                syncFloatingBar(anchor, bar, floating);
            });
        }, { threshold: 0 });

        observer.observe(sentinel);

        function refreshFloating() {
            if (floating) syncFloatingBar(anchor, bar, true);
        }

        window.addEventListener('resize', refreshFloating);
        window.addEventListener('scroll', refreshFloating, { passive: true });
    });

    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function (tab) {
        tab.addEventListener('shown.bs.tab', function () {
            anchors.forEach(function (anchor) {
                var bar = anchor.querySelector('.doc-edit-actions');
                if (bar) bar.classList.remove('is-floating');
                anchor.style.minHeight = '';
                if (bar) {
                    bar.style.left = '';
                    bar.style.width = '';
                }
            });
            window.dispatchEvent(new Event('resize'));
        });
    });
}

$(function() {
    initDocSummaryField();
    initDocEditFloatingActions();
    restoreLastPublishLocation();
    updateDocSlugDirPrefix();
    syncProjectFields();
    $('#docPublicDirectory').on('change', function() {
        updateDocSlugDirPrefix();
        syncProjectFields();
        saveLastPublishLocation();
    });
    $('#docUserProject').on('change', function() {
        syncProjectFields();
        saveLastPublishLocation();
    });
    $(document).on('click', '.js-doc-edit-maximize', function (e) {
        e.preventDefault();
        toggleDocEditMaximize();
    });
    $(document).on('keydown.docEditMaximize', function (e) {
        if (e.key === 'Escape' && isDocEditMaximized()) {
            setDocEditMaximized(false);
        }
    });
    syncDocEditMaximizeButtons();
});

</script>

{{end}}

{{define "doc-summary-field"}}
<div class="mb-3 doc-summary-field" id="docSummaryField">
    <label class="form-label" for="docDesc">{{T "user_doc_description"}}</label>
    <div class="doc-summary-shell" id="docSummaryShell">
        <div class="doc-summary-trigger form-control is-empty" id="docDescTrigger" tabindex="0" role="button" aria-controls="docDesc">
            <span class="doc-summary-trigger__placeholder">{{T "user_doc_summary_click_hint"}}</span>
            <span class="doc-summary-trigger__text d-none"></span>
        </div>
        <textarea class="form-control doc-summary-editor" id="docDesc" rows="4">{{.}}</textarea>
    </div>
</div>
{{end}}