{{template "layout.html" .}}

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

{{template "admin-hero-styles" .}}
<link href="{{asset "/static/viewer/viewer.min.css"}}" rel="stylesheet">

<div class="attachments-page">
    <details class="admin-hero">
        <summary class="admin-hero-bar">
            <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-paperclip'></i></span>
            <span class="admin-hero-intro">{{T "admin_attachments_page_hint"}}</span>
            <span class="admin-hero-toggle">
                <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
                {{template "admin-hero-help-meta" .}}
            </span>
        </summary>
        <div class="admin-hero-body">
            <ul class="admin-hero-field-grid">
                <li class="admin-hero-field-item"><strong>{{T "admin_attachments_usage_filter"}}</strong>{{T "admin_attachments_usage_filter_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_attachments_usage_bulk"}}</strong>{{T "admin_attachments_usage_bulk_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_attachments_usage_delete"}}</strong>{{T "admin_attachments_usage_delete_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_attachments_usage_config"}}</strong>{{T "admin_attachments_usage_config_desc"}} <a href="/admin/upload-config">{{T "admin_imgtoc_config"}}</a></li>
            </ul>
        </div>
    </details>

    {{if not .Data.TableReady}}
    <div class="alert alert-warning" role="alert">
        <i class='bx bx-error-circle'></i> {{T "admin_attachments_table_missing"}}
    </div>
    {{else}}
    <div class="attachments-stats">
        <span class="badge bg-primary"><i class='bx bx-paperclip'></i> {{T "admin_attachments_stats_total"}}: {{.Data.StatsTotal}}</span>
        <span class="badge bg-secondary"><i class='bx bx-hdd'></i> {{T "admin_attachments_stats_size"}}: {{.Data.StatsBytesHuman}}</span>
        {{range .Data.StatsByDriver}}
        <span class="badge bg-light text-dark border attachments-driver-stat" title="{{T "admin_attachments_stats_driver_hint"}}">
            <i class='bx bx-server'></i> {{index . "label"}}: {{index . "total"}} · {{index . "bytes_human"}}
        </span>
        {{end}}
    </div>

    <div class="admin-attachments-ref-tabs">
        <ul class="nav" role="tablist" aria-label="{{T "admin_attachments_col_reference"}}">
            {{$filterQs := .Data.FilterQuerySuffix}}
            <li class="nav-item" role="presentation">
                <a class="nav-link{{if eq .Data.QRef "all"}} active{{end}}" href="/admin/attachments{{if $filterQs}}?{{$filterQs}}{{end}}" role="tab" aria-selected="{{if eq .Data.QRef "all"}}true{{else}}false{{end}}">
                    <i class='bx bx-grid-alt'></i> {{T "admin_attachments_tab_all"}}
                    <span class="badge rounded-pill bg-secondary">{{.Data.StatsTotal}}</span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link{{if eq .Data.QRef "referenced"}} active{{end}}" href="/admin/attachments?ref=referenced{{if $filterQs}}&{{$filterQs}}{{end}}" role="tab" aria-selected="{{if eq .Data.QRef "referenced"}}true{{else}}false{{end}}">
                    <i class='bx bx-link-alt'></i> {{T "admin_attachments_tab_referenced"}}
                    <span class="badge rounded-pill bg-success">{{.Data.StatsReferenced}}</span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link{{if eq .Data.QRef "unreferenced"}} active{{end}}" href="/admin/attachments?ref=unreferenced{{if $filterQs}}&{{$filterQs}}{{end}}" role="tab" aria-selected="{{if eq .Data.QRef "unreferenced"}}true{{else}}false{{end}}">
                    <i class='bx bx-unlink'></i> {{T "admin_attachments_tab_unreferenced"}}
                    <span class="badge rounded-pill bg-warning text-dark">{{.Data.StatsUnreferenced}}</span>
                </a>
            </li>
        </ul>
        {{if gt .Data.StatsUnreferenced 0}}
        <button type="button" class="btn btn-sm btn-outline-danger" id="btnAdminAttachmentsDeleteUnreferenced">
            <i class='bx bx-trash'></i> {{T "admin_attachments_delete_unreferenced"}}
        </button>
        {{end}}
    </div>

    <div class="attachments-toolbar-card">
        <div class="card-body">
            <form method="get">
                {{if ne .Data.QRef "all"}}<input type="hidden" name="ref" value="{{.Data.QRef}}">{{end}}
                <div class="row g-2 align-items-end">
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "admin_attachments_filter_document"}}</label>
                        <input type="number" name="document_id" class="form-control form-control-sm" value="{{if gt .Data.QDocumentID 0}}{{.Data.QDocumentID}}{{end}}" min="0" placeholder="ID">
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "admin_attachments_filter_project"}}</label>
                        <input type="number" name="project_id" class="form-control form-control-sm" value="{{if gt .Data.QProjectID 0}}{{.Data.QProjectID}}{{end}}" min="0" placeholder="ID">
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "admin_attachments_col_driver"}}</label>
                        <select name="driver" class="form-select form-select-sm">
                            <option value="all" {{if eq .Data.QDriver "all"}}selected{{end}}>{{T "admin_attachments_driver_all"}}</option>
                            <option value="local" {{if eq .Data.QDriver "local"}}selected{{end}}>{{T "admin_attachments_driver_local"}}</option>
                            <option value="imgtoc" {{if eq .Data.QDriver "imgtoc"}}selected{{end}}>{{T "admin_attachments_driver_imgtoc"}}</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "admin_attachments_col_kind"}}</label>
                        <select name="kind" class="form-select form-select-sm">
                            <option value="all" {{if eq .Data.QKind "all"}}selected{{end}}>{{T "admin_attachments_kind_all"}}</option>
                            <option value="doc_image" {{if eq .Data.QKind "doc_image"}}selected{{end}}>{{T "admin_attachments_kind_image"}}</option>
                            <option value="doc_attachment" {{if eq .Data.QKind "doc_attachment"}}selected{{end}}>{{T "admin_attachments_kind_file"}}</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "admin_col_status"}}</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="1" {{if eq .Data.QStatus "1"}}selected{{end}}>{{T "admin_attachments_status_active"}}</option>
                            <option value="0" {{if eq .Data.QStatus "0"}}selected{{end}}>{{T "admin_attachments_status_deleted"}}</option>
                            <option value="-1" {{if eq .Data.QStatus "-1"}}selected{{end}}>{{T "admin_attachments_status_all"}}</option>
                        </select>
                    </div>
                    <div class="col-md-4 col-12">
                        <label class="form-label">{{T "admin_btn_search"}}</label>
                        <input type="text" name="q" class="form-control form-control-sm" value="{{.Data.Q}}" placeholder="{{T "admin_btn_search"}}">
                    </div>
                    <div class="col-md-2 col-12">
                        <button type="submit" class="btn btn-primary btn-sm w-100"><i class='bx bx-filter-alt'></i> {{T "admin_btn_filter"}}</button>
                    </div>
                </div>
                <p class="small text-muted mb-0 mt-2">{{T "admin_attachments_filter_scope_hint"}}</p>
            </form>
        </div>
    </div>

    <div class="attachments-table-card">
        <div class="table-responsive">
            <table class="table align-middle mb-0" id="attachmentsTable">
                <thead>
                    <tr>
                        <th width="40">
                            <input type="checkbox" id="checkAllAttachments" title="{{T "admin_attachments_select_all"}}">
                        </th>
                        <th width="56">{{T "admin_attachments_col_preview"}}</th>
                        <th>{{T "admin_attachments_col_filename"}}</th>
                        <th width="90">{{T "admin_attachments_col_size"}}</th>
                        <th width="88">{{T "admin_attachments_col_reference"}}</th>
                        <th width="100">{{T "admin_attachments_col_user"}}</th>
                        <th width="180">{{T "admin_attachments_col_document"}}</th>
                        <th width="130">{{T "admin_attachments_col_time"}}</th>
                        <th width="60" class="text-center">{{T "admin_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{if .Data.Rows}}
                    {{range .Data.Rows}}
                    <tr class="attachments-row{{if index . "is_image_flag"}} is-image-row{{end}}{{if index . "is_video_flag"}} is-video-row{{end}}"
                        data-id="{{index . "id"}}"
                        data-is-image="{{if index . "is_image_flag"}}1{{else}}0{{end}}"
                        data-is-video="{{if index . "is_video_flag"}}1{{else}}0{{end}}"
                        data-has-preview="{{if index . "has_preview_flag"}}1{{else}}0{{end}}"
                        data-driver="{{index . "driver"}}"
                        data-remote-file-id="{{index . "remote_file_id"}}"
                        data-attach-key="{{index . "attach_key"}}"
                        data-detail-slug="{{index . "detail_slug"}}"
                        data-full-url="{{index . "open_url"}}"
                        data-thumb-url="{{index . "preview_url"}}"
                        data-raw-thumb-url="{{index . "thumb_url"}}"
                        data-filename="{{index . "filename"}}">
                        <td><input type="checkbox" class="attachments-row-check" value="{{index . "id"}}" data-filename="{{index . "filename"}}"></td>
                        <td>
                            {{if index . "has_preview_flag"}}
                            <div class="attachments-preview is-clickable{{if index . "is_video_flag"}} is-video-preview{{else if not (index . "is_image_flag")}} is-doc-preview{{end}}" title="{{if index . "is_image_flag"}}{{T "admin_attachments_preview"}}{{else if index . "is_video_flag"}}{{T "admin_attachments_preview_video"}}{{else}}{{T "admin_attachments_open_link"}}{{end}}" role="button" tabindex="0">
                                <img src="{{index . "preview_url"}}" alt="{{index . "filename"}}" loading="lazy" referrerpolicy="no-referrer" data-preview-url="{{index . "preview_url"}}" data-fallback-url="{{index . "open_url"}}">
                            </div>
                            {{else if index . "is_video_flag"}}
                            <div class="attachments-preview is-video-preview" title="{{T "admin_attachments_preview_video"}}" role="button" tabindex="0">
                                <i class="{{index . "icon_class"}}" aria-hidden="true"></i>
                            </div>
                            {{else}}
                            <div class="attachments-preview">
                                <i class="{{index . "icon_class"}}" aria-hidden="true"></i>
                            </div>
                            {{end}}
                        </td>
                        <td>
                            <div class="attachments-filename small is-detailable" title="{{T "admin_attachments_view_detail"}}" role="button" tabindex="0" data-attach-id="{{index . "id"}}">
                                {{index . "filename"}}
                            </div>
                        </td>
                        <td class="small text-muted">{{index . "size_human"}}</td>
                        <td>
                            {{if index . "is_referenced_flag"}}
                            <span class="admin-attach-ref-badge is-referenced"><i class='bx bx-link-alt'></i> {{T "admin_attachments_referenced_badge"}}</span>
                            {{else}}
                            <span class="admin-attach-ref-badge is-unreferenced"><i class='bx bx-unlink'></i> {{T "admin_attachments_unreferenced_badge"}}</span>
                            {{end}}
                        </td>
                        <td class="small">{{index . "username"}}</td>
                        <td class="attachments-doc-cell">
                            {{if index . "document_id"}}
                            {{if index . "document_url"}}
                            <a href="{{index . "document_url"}}" target="_blank" rel="noopener noreferrer" class="attachments-doc-link small">{{if index . "document_title"}}{{index . "document_title"}}{{else}}#{{index . "document_id"}}{{end}}</a>
                            {{else}}
                            <span class="small fw-semibold">{{if index . "document_title"}}{{index . "document_title"}}{{else}}#{{index . "document_id"}}{{end}}</span>
                            {{end}}
                            {{if index . "document_admin_url"}}
                            <div class="attachments-doc-actions">
                                <a href="{{index . "document_admin_url"}}" class="btn btn-outline-secondary btn-sm"><i class="bx bx-filter-alt"></i> {{T "admin_attachments_filter_by_document"}}</a>
                            </div>
                            {{end}}
                            {{else}}
                            <span class="small text-muted">{{T "admin_attachments_unbound"}}</span>
                            {{end}}
                        </td>
                        <td class="small text-muted">{{index . "created_at_str"}}</td>
                        <td class="text-center">
                            <div class="dropdown table-action-dropdown">
                                <button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item js-attach-detail" href="javascript:;" data-attach-id="{{index . "id"}}"><i class="bx bx-detail"></i> {{T "admin_attachments_view_detail"}}</a></li>
                                    {{if index . "is_image_flag"}}
                                    <li><a class="dropdown-item js-attach-preview" href="javascript:;" data-attach-id="{{index . "id"}}"><i class="bx bx-show"></i> {{T "admin_attachments_preview"}}</a></li>
                                    {{else if index . "is_video_flag"}}
                                    <li><a class="dropdown-item js-attach-video-preview" href="javascript:;" data-attach-id="{{index . "id"}}"><i class="bx bxs-videos"></i> {{T "admin_attachments_preview_video"}}</a></li>
                                    {{else}}{{if index . "open_url"}}
                                    <li><a class="dropdown-item" href="{{index . "open_url"}}" target="_blank" rel="noopener noreferrer"><i class="bx bx-link-external"></i> {{T "admin_attachments_open_link"}}</a></li>
                                    {{end}}{{end}}
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                    {{else}}
                    <tr>
                        <td colspan="9">
                                <div class="attachments-empty">
                                    <i class='bx bx-inbox'></i>
                                    <div>{{T "admin_no_data"}}</div>
                                </div>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
        </div>
    </div>

    <div id="attachmentsBatchActionBar" class="batch-action-bar" style="display: none;">
        <div class="batch-action-content">
            <div class="batch-action-info">
                {{T "admin_attachments_bulk_selected"}} <span id="attachmentsSelectedCount">0</span> {{T "admin_attachments_bulk_selected_unit"}}
            </div>
            <div class="batch-action-buttons">
                <button type="button" class="btn btn-sm btn-outline-danger" id="btnAttachmentsBatchDelete">
                    <i class='bx bx-trash'></i> {{T "admin_attachments_bulk_delete"}}
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnAttachmentsClearSelection">
                    <i class='bx bx-x'></i> {{T "admin_attachments_clear_selection"}}
                </button>
            </div>
        </div>
    </div>

    {{if gt .Data.TotalPages 1}}
    <nav aria-label="Pagination">
        <ul class="pagination justify-content-center">
            {{$currentPage := .Data.Page}}
            {{$totalPages := .Data.TotalPages}}
            {{$prevPage := sub $currentPage 1}}
            {{$nextPage := add $currentPage 1}}
            {{$qs := .Data.QuerySuffix}}
            {{if gt $currentPage 1}}
            <li class="page-item">
                <a class="page-link" href="/admin/attachments?page=1{{if $qs}}&{{$qs}}{{end}}"><i class='bx bx-first-page'></i> {{T "admin_pagination_first"}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="/admin/attachments?page={{$prevPage}}{{if $qs}}&{{$qs}}{{end}}"><i class='bx bx-chevron-left'></i> {{T "admin_pagination_prev"}}</a>
            </li>
            {{end}}
            <li class="page-item disabled">
                <span class="page-link">{{T "admin_pagination_page"}} {{$currentPage}} / {{$totalPages}}, {{.Data.Total}} {{T "admin_pagination_records_unit"}}</span>
            </li>
            {{if lt $currentPage $totalPages}}
            <li class="page-item">
                <a class="page-link" href="/admin/attachments?page={{$nextPage}}{{if $qs}}&{{$qs}}{{end}}">{{T "admin_pagination_next"}} <i class='bx bx-chevron-right'></i></a>
            </li>
            <li class="page-item">
                <a class="page-link" href="/admin/attachments?page={{$totalPages}}{{if $qs}}&{{$qs}}{{end}}">{{T "admin_pagination_last"}} <i class='bx bx-last-page'></i></a>
            </li>
            {{end}}
        </ul>
    </nav>
    {{end}}
    {{end}}

    <div id="adminAttachViewer" class="sd-image-viewer-source" aria-hidden="true"></div>

    <div class="modal fade" id="attachmentDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="attachmentDetailTitle">{{T "admin_attachments_detail_title"}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin_btn_cancel"}}"></button>
                </div>
                <div class="modal-body">
                    <div id="attachmentDetailLoading" class="text-center text-muted py-4">
                        <div class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></div>
                        <div class="mt-2">{{T "admin_attachments_detail_loading"}}</div>
                    </div>
                    <div id="attachmentDetailContent" class="d-none">
                        <div class="attach-detail-head">
                            <div class="attach-detail-preview" id="attachmentDetailPreview"></div>
                            <div class="flex-grow-1 min-w-0">
                                <h6 class="attach-detail-filename" id="attachmentDetailFilename"></h6>
                                <div class="d-flex flex-wrap gap-2" id="attachmentDetailBadges"></div>
                            </div>
                        </div>
                        <div class="attach-detail-section" id="attachmentDetailRelation"></div>
                        <div class="attach-detail-section">
                            <div class="attach-detail-section-title">{{T "admin_attachments_detail_section_basic"}}</div>
                            <dl class="attach-detail-meta" id="attachmentDetailMeta"></dl>
                        </div>
                        <div class="attach-detail-section">
                            <div class="attach-detail-section-title">{{T "admin_attachments_detail_section_links"}}</div>
                            <div id="attachmentDetailUrls"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{T "admin_btn_cancel"}}</button>
                    <a href="#" class="btn btn-primary btn-sm d-none" id="attachmentDetailOpenBtn" target="_blank" rel="noopener noreferrer">{{T "admin_attachments_open_link"}}</a>
                    <button type="button" class="btn btn-outline-primary btn-sm d-none" id="attachmentDetailPreviewBtn">{{T "admin_attachments_preview"}}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script src="{{asset "/static/viewer/viewer-jquery.min.js"}}"></script>
<script src="{{asset "/template/default/assets/js/sd-image-viewer.js"}}"></script>
<script>
var AttachmentsPageConfig = {
    attachDriver: {{json .Data.AttachDriver}},
    imgtocBase: {{json .Data.ImgToCBase}},
    videoExtensions: {{json .Data.VideoExtensions}}
};
var AttachmentsPageI18n = {
    selectFirst: {{json (T "admin_attachments_no_selection")}},
    batchDeleteConfirm: {{json (T "admin_attachments_batch_delete_confirm")}},
    batchDeleteWarn: {{json (T "admin_attachments_batch_delete_warn")}},
    andMore: {{json (T "admin_attachments_and_more")}},
    confirmBatchDelete: {{json (T "admin_attachments_confirm_batch_delete")}},
    deletedOk: {{json (T "admin_attachments_deleted_ok")}},
    deleteFailed: {{json (T "admin_attachments_delete_failed")}},
    requestFailed: {{json (T "admin_request_failed")}},
    btnDelete: {{json (T "admin_btn_delete")}},
    btnCancel: {{json (T "admin_btn_cancel")}},
    preview: {{json (T "admin_attachments_preview")}},
    previewFail: {{json (T "admin_attachments_preview_fail")}},
    previewVideo: {{json (T "admin_attachments_preview_video")}},
    previewVideoFail: {{json (T "admin_attachments_preview_video_fail")}},
    previewVideoTitle: {{json (T "admin_attachments_preview_video_title")}},
    openLink: {{json (T "admin_attachments_open_link")}},
    viewDetail: {{json (T "admin_attachments_view_detail")}},
    detailTitle: {{json (T "admin_attachments_detail_title")}},
    detailLoading: {{json (T "admin_attachments_detail_loading")}},
    loadFailed: {{json (T "admin_attachments_detail_load_failed")}},
    unbound: {{json (T "admin_attachments_unbound")}},
    colId: {{json (T "admin_documents_col_id")}},
    colUser: {{json (T "admin_attachments_col_user")}},
    colDocument: {{json (T "admin_attachments_col_document")}},
    colProject: {{json (T "admin_attachments_col_project")}},
    colDriver: {{json (T "admin_attachments_col_driver")}},
    colKind: {{json (T "admin_attachments_col_kind")}},
    colStatus: {{json (T "admin_col_status")}},
    colTime: {{json (T "admin_attachments_col_time")}},
    colUpdated: {{json (T "admin_col_updated")}},
    colAttachKey: {{json (T "admin_attachments_col_attach_key")}},
    colRemoteId: {{json (T "admin_attachments_col_remote_id")}},
    colDetailSlug: {{json (T "admin_attachments_col_detail_slug")}},
    colEmbedUrl: {{json (T "admin_attachments_col_embed_url")}},
    colExternalUrl: {{json (T "admin_attachments_col_external_url")}},
    colDirectUrl: {{json (T "admin_attachments_col_direct_url")}},
    colThumbUrl: {{json (T "admin_attachments_col_thumb_url")}},
    viewDocument: {{json (T "admin_attachments_view_document")}},
    filterByDocument: {{json (T "admin_attachments_filter_by_document")}},
    detailSectionRelation: {{json (T "admin_attachments_detail_section_relation")}},
    copyLink: {{json (T "admin_attachments_copy_link")}},
    copied: {{json (T "admin_attachments_copied")}},
    colSize: {{json (T "admin_attachments_col_size")}},
    colReference: {{json (T "admin_attachments_col_reference")}},
    referencedBadge: {{json (T "admin_attachments_referenced_badge")}},
    unreferencedBadge: {{json (T "admin_attachments_unreferenced_badge")}},
    deleteUnreferenced: {{json (T "admin_attachments_delete_unreferenced")}},
    deleteUnreferencedConfirm: {{json (T "admin_attachments_delete_unreferenced_confirm")}},
    deleteUnreferencedWarn: {{json (T "admin_attachments_delete_unreferenced_warn")}},
    confirmDeleteUnreferenced: {{json (T "admin_attachments_confirm_delete_unreferenced")}},
    noUnreferenced: {{json (T "admin_attachments_no_unreferenced")}}
};
function attachI18n(template, vars) {
    var s = String(template || '');
    if (!vars) return s;
    Object.keys(vars).forEach(function(key) {
        s = s.split('{' + key + '}').join(String(vars[key]));
    });
    return s;
}
function showAttachmentsFlashToast(msg, type) {
    if (!msg || typeof BootstrapModal === 'undefined') return;
    BootstrapModal.flash(msg, type, 4500);
}

function resolveAdminAttachRemoteFileId($row) {
    if (!$row || !$row.length) return '';
    var id = String($row.attr('data-remote-file-id') || '').trim();
    if (id.indexOf('f_') === 0) id = id.slice(2);
    if (id) return id;
    var attachKey = String($row.attr('data-attach-key') || '').trim();
    if (attachKey.indexOf('f_') === 0) return attachKey.slice(2);
    return '';
}

function resolveAdminAttachEmbedUrl($row) {
    if (!$row || !$row.length) return '';
    var url = String($row.attr('data-full-url') || '').trim();
    var slug = String($row.attr('data-detail-slug') || '').trim();
    if ((!url || url.indexOf('/directlink/') < 0) && slug && String($row.attr('data-driver') || '') === 'imgtoc') {
        var base = String(AttachmentsPageConfig.imgtocBase || 'https://imgtoc.com').replace(/\/$/, '');
        if (base) url = base + '/directlink/' + slug;
    }
    return url;
}

function resolveAdminAttachThumbProxyUrl($row) {
    if (!$row || !$row.length) return '';
    var id = String($row.attr('data-id') || '').trim();
    if (!id) return '';
    var origin = window.location.origin || (window.location.protocol + '//' + window.location.host);
    return origin + '/admin/attachment-thumb?id=' + encodeURIComponent(id) + '&size=200';
}

function isAdminAttachThumbProxyUrl(url) {
    return /\/(?:user|admin)\/attachment-thumb\?/i.test(String(url || ''));
}

function resolveAdminAttachThumbUrl($row) {
    if (!$row || !$row.length) return '';
    if (String($row.attr('data-is-image') || '') !== '1') return '';
    var thumb = String($row.attr('data-raw-thumb-url') || $row.attr('data-thumb-url') || '').trim();
    if (thumb && /^https?:\/\//i.test(thumb) && !isAdminAttachThumbProxyUrl(thumb)) return thumb;
    if (String($row.attr('data-driver') || '') === 'imgtoc') {
        var base = String(AttachmentsPageConfig.imgtocBase || 'https://imgtoc.com').replace(/\/$/, '');
        var fileId = resolveAdminAttachRemoteFileId($row);
        if (fileId && base) {
            return base + '/api.html?act=file-thumbnail&id=' + encodeURIComponent(fileId) + '&size=200';
        }
    }
    thumb = thumb || resolveAdminAttachEmbedUrl($row);
    if (thumb && !isAdminAttachThumbProxyUrl(thumb)) return thumb;
    return resolveAdminAttachThumbProxyUrl($row);
}

function bindAdminAttachThumbFallback($img, $row) {
    if (!$img || !$img.length || !$row || !$row.length) return;
    var full = resolveAdminAttachEmbedUrl($row);
    $img.off('error.adminAttachThumb').one('error.adminAttachThumb', function() {
        var $el = $(this);
        var current = String($el.attr('src') || '').trim();
        var rebuilt = resolveAdminAttachThumbUrl($row);
        if (rebuilt && current !== rebuilt && !$el.data('rebuilt-tried')) {
            $el.data('rebuilt-tried', 1);
            $el.attr('src', rebuilt);
            return;
        }
        var fallback = String($el.attr('data-fallback-url') || full || '').trim();
        if (fallback && current !== fallback && !$el.data('fallback-tried')) {
            $el.data('fallback-tried', 1);
            $el.attr('src', fallback);
            return;
        }
        var proxy = resolveAdminAttachThumbProxyUrl($row);
        if (proxy && current !== proxy && !$el.data('proxy-tried')) {
            $el.data('proxy-tried', 1);
            $el.attr('src', proxy);
            return;
        }
        var $cell = $el.closest('.attachments-preview');
        if ($cell.find('i').length) return;
        $el.remove();
        $cell.removeClass('is-clickable is-doc-preview').append('<i class="bx bx-image text-secondary" aria-hidden="true"></i>');
    });
}

function applyAdminAttachmentThumbUrls() {
    $('#attachmentsTable .attachments-row[data-has-preview="1"] .attachments-preview img[data-preview-url]').each(function() {
        var $img = $(this);
        var $row = $img.closest('.attachments-row');
        var thumb = resolveAdminAttachThumbUrl($row);
        var full = resolveAdminAttachEmbedUrl($row);
        if (!thumb) return;
        $img.attr('src', thumb).attr('data-preview-url', thumb);
        if (full) {
            $img.attr('data-fallback-url', full);
            $row.attr('data-full-url', full).attr('data-thumb-url', thumb);
        }
        bindAdminAttachThumbFallback($img, $row);
    });
}

function ensureAdminAttachViewerRoot() {
    var $viewer = $('#adminAttachViewer');
    if (!$viewer.length) {
        $viewer = $('<div id="adminAttachViewer" class="sd-image-viewer-source" aria-hidden="true"/>').appendTo('body');
    }
    return $viewer;
}

function syncAdminAttachViewerImages() {
    var $viewer = ensureAdminAttachViewerRoot();
    $viewer.empty();
    $('.attachments-row[data-is-image="1"]').each(function() {
        var $row = $(this);
        var full = resolveAdminAttachEmbedUrl($row);
        var thumb = resolveAdminAttachThumbUrl($row) || full;
        var id = String($row.attr('data-id') || '');
        if (!full) return;
        $('<img alt=""/>')
            .attr('src', thumb)
            .attr('data-original', full)
            .attr('data-attach-id', id)
            .attr('title', $row.attr('data-filename') || '')
            .appendTo($viewer);
    });
    if (window.SdImageViewer && SdImageViewer.canUse && SdImageViewer.canUse()) {
        SdImageViewer.destroy($viewer);
        if ($viewer.find('img').length) {
            SdImageViewer.init($viewer, { skipNodeCheck: true });
        }
    }
}

function previewAdminAttachImage($row) {
    if (!$row || !$row.length) return;
    var full = resolveAdminAttachEmbedUrl($row);
    var attachId = String($row.attr('data-id') || '');
    if (!full) {
        BootstrapModal.msg(AttachmentsPageI18n.previewFail, {icon: 2});
        return;
    }
    if (!window.SdImageViewer || !SdImageViewer.canUse || !SdImageViewer.canUse()) {
        BootstrapModal.msg(AttachmentsPageI18n.previewFail, {icon: 2});
        return;
    }
    syncAdminAttachViewerImages();
    var $viewer = $('#adminAttachViewer');
    SdImageViewer.viewImageWithLoading($viewer, {
        attachId: attachId,
        src: full,
        onFail: function() {
            BootstrapModal.msg(AttachmentsPageI18n.previewFail, {icon: 2});
        }
    });
}

function isAdminAttachVideoRow($row) {
    if (!$row || !$row.length) return false;
    if (String($row.attr('data-is-video') || '') === '1') return true;
    return isAdminAttachVideoFilename(String($row.attr('data-filename') || ''));
}

function isAdminAttachVideoFilename(name) {
    var n = String(name || '').trim();
    if (!n) return false;
    var i = n.lastIndexOf('.');
    if (i < 0) return false;
    var ext = n.slice(i + 1).toLowerCase();
    var list = AttachmentsPageConfig.videoExtensions || [];
    if (list.length) {
        for (var j = 0; j < list.length; j++) {
            if (String(list[j]).replace(/^\./, '').toLowerCase() === ext) return true;
        }
        return false;
    }
    return /\.(mp4|webm|mov|mkv|avi|m4v|ogv|wmv|flv|mpeg|mpg|3gp|3g2|ts|m2ts|f4v)$/i.test(n);
}

function resolveAdminAttachPlayUrl($row) {
    if (!$row || !$row.length) return '';
    var url = String($row.attr('data-full-url') || '').trim();
    var driver = String($row.attr('data-driver') || '');
    var attachKey = String($row.attr('data-attach-key') || '').trim();
    if (url.indexOf('/attach/dl/') >= 0) return url;
    if (driver === 'local' && attachKey) {
        var origin = window.location.origin || (window.location.protocol + '//' + window.location.host);
        return origin + '/attach/dl/' + encodeURIComponent(attachKey);
    }
    return url;
}

function buildAdminAttachVideoModalContent(filename, playUrl) {
    var safeName = escHtml(filename || 'video');
    var safeUrl = escHtml(playUrl);
    return '<div class="sd-attach-modal sd-attach-modal--video">' +
        '<div class="sd-attach-modal__name"><i class="bx bxs-videos" aria-hidden="true"></i><span>' + safeName + '</span></div>' +
        '<div class="sd-doc-video-wrap sd-doc-video-wrap--modal">' +
        '<video class="sd-doc-video" controls preload="metadata" playsinline src="' + safeUrl + '" title="' + safeName + '"></video>' +
        '</div></div>';
}

function pauseAdminAttachVideos() {
    $('video.sd-doc-video').each(function() {
        try { this.pause(); } catch (e) {}
    });
}

function previewAdminAttachVideo($row) {
    if (!$row || !$row.length) return;
    if (!window.BootstrapModal || !BootstrapModal.open) {
        BootstrapModal.msg(AttachmentsPageI18n.previewVideoFail, {icon: 2});
        return;
    }
    var playUrl = resolveAdminAttachPlayUrl($row);
    if (!playUrl) {
        BootstrapModal.msg(AttachmentsPageI18n.previewVideoFail, {icon: 2});
        return;
    }
    var filename = String($row.attr('data-filename') || 'video');
    BootstrapModal.open({
        skin: 'user-project',
        icon: 'bx bxs-videos',
        title: escHtml(AttachmentsPageI18n.previewVideoTitle),
        area: ['720px', 'auto'],
        content: buildAdminAttachVideoModalContent(filename, playUrl),
        end: pauseAdminAttachVideos
    });
}

function escHtml(s) {
    return String(s == null ? '' : s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

var attachmentDetailModal;
var attachmentDetailCache = {};

function initAttachmentDetailModal() {
    var el = document.getElementById('attachmentDetailModal');
    if (el && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
        attachmentDetailModal = bootstrap.Modal.getOrCreateInstance(el);
    }
}

function metaItem(label, value) {
    var text = String(value == null ? '' : value).trim();
    if (!text) text = '—';
    return '<div><dt>' + escHtml(label) + '</dt><dd>' + escHtml(text) + '</dd></div>';
}

function urlBlock(label, value) {
    var text = String(value || '').trim();
    if (!text) return '';
    return '<div class="attach-detail-url-row">' +
        '<div class="attach-detail-url-label">' + escHtml(label) + '</div>' +
        '<div class="attach-detail-url">' +
        '<a href="' + escHtml(text) + '" target="_blank" rel="noopener noreferrer">' + escHtml(text) + '</a>' +
        '<button type="button" class="btn btn-outline-secondary btn-copy-url" data-copy-text="' + escHtml(text) + '">' + escHtml(AttachmentsPageI18n.copyLink) + '</button>' +
        '</div></div>';
}

function renderAttachmentRelation(data) {
    var docID = parseInt(data.document_id, 10) || 0;
    var projectID = parseInt(data.project_id, 10) || 0;
    var projectName = String(data.project_name || '').trim();
    var documentURL = String(data.document_url || '').trim();
    var documentAdminURL = String(data.document_admin_url || '').trim();
    var documentTitle = String(data.document_title || '').trim();
    var html = '<div class="attach-detail-section-title">' + escHtml(AttachmentsPageI18n.detailSectionRelation) + '</div>';

    if (docID > 0) {
        var titleText = documentTitle || ('#' + docID);
        html += '<div class="attach-detail-doc-card mb-2">' +
            '<div class="min-w-0">';
        if (documentURL) {
            html += '<p class="attach-detail-doc-card__title"><a href="' + escHtml(documentURL) + '" target="_blank" rel="noopener noreferrer">' + escHtml(titleText) + '</a></p>';
        } else {
            html += '<p class="attach-detail-doc-card__title">' + escHtml(titleText) + '</p>';
        }
        html += '</div>' +
            '<div class="attach-detail-doc-card__actions">';
        if (documentAdminURL) {
            html += '<a class="btn btn-outline-secondary btn-sm" href="' + escHtml(documentAdminURL) + '"><i class="bx bx-filter-alt"></i> ' + escHtml(AttachmentsPageI18n.filterByDocument) + '</a>';
        }
        html += '</div></div>';
    } else {
        html += '<div class="attach-detail-doc-card"><div class="attach-detail-doc-card__title text-muted">' + escHtml(AttachmentsPageI18n.unbound) + '</div></div>';
    }

    if (projectID > 0) {
        var projectText = projectName || ('#' + projectID);
        html += '<div class="small text-muted mt-2">' + escHtml(AttachmentsPageI18n.colProject) + ': ' + escHtml(projectText) + ' (ID ' + escHtml(projectID) + ')</div>';
    }
    return html;
}

function renderAttachmentDetail(data) {
    $('#attachmentDetailTitle').text(data.filename || AttachmentsPageI18n.detailTitle);
    $('#attachmentDetailFilename').text(data.filename || '—');
    var badges = [];
    badges.push('<span class="badge bg-light text-dark border">' + escHtml(data.driver || '') + '</span>');
    badges.push('<span class="badge bg-secondary">' + escHtml(data.kind_label || '') + '</span>');
    badges.push('<span class="badge ' + (data.status === 1 ? 'bg-success' : 'bg-secondary') + '">' + escHtml(data.status_label || '') + '</span>');
    if (data.size_human) {
        badges.push('<span class="badge bg-light text-dark border">' + escHtml(data.size_human) + '</span>');
    }
    if (data.is_referenced_flag) {
        badges.push('<span class="badge bg-success-subtle text-success border">' + escHtml(AttachmentsPageI18n.referencedBadge) + '</span>');
    } else {
        badges.push('<span class="badge bg-warning-subtle text-warning-emphasis border">' + escHtml(AttachmentsPageI18n.unreferencedBadge) + '</span>');
    }
    $('#attachmentDetailBadges').html(badges.join(' '));

    var previewHtml = '';
    var previewUrl = resolveAdminAttachThumbUrl($('<div/>').attr({
        'data-is-image': data.is_image_flag ? '1' : '0',
        'data-id': data.id || '',
        'data-driver': data.driver || '',
        'data-remote-file-id': data.remote_file_id || '',
        'data-attach-key': data.attach_key || '',
        'data-detail-slug': data.detail_slug || '',
        'data-thumb-url': data.preview_url || data.thumb_url || '',
        'data-raw-thumb-url': data.thumb_url || data.preview_url || '',
        'data-full-url': data.open_url || ''
    })) || String(data.preview_url || data.thumb_url || '').trim();
    if ((data.has_preview_flag || data.is_image_flag) && previewUrl) {
        previewHtml = '<img src="' + escHtml(previewUrl) + '" alt="' + escHtml(data.filename || '') + '" referrerpolicy="no-referrer" data-preview-url="' + escHtml(previewUrl) + '" data-fallback-url="' + escHtml(data.open_url || '') + '">';
    } else {
        previewHtml = '<i class="' + escHtml(data.icon_class || 'bx bx-file') + '" aria-hidden="true"></i>';
    }
    $('#attachmentDetailPreview').html(previewHtml);
    $('#attachmentDetailPreview').find('img[data-preview-url]').each(function() {
        var $img = $(this);
        var pseudoRow = $('<div/>').attr({
            'data-is-image': data.is_image_flag ? '1' : '0',
            'data-id': data.id || '',
            'data-driver': data.driver || '',
            'data-remote-file-id': data.remote_file_id || '',
            'data-attach-key': data.attach_key || '',
            'data-detail-slug': data.detail_slug || '',
            'data-thumb-url': data.preview_url || data.thumb_url || '',
            'data-raw-thumb-url': data.thumb_url || data.preview_url || '',
            'data-full-url': data.open_url || ''
        });
        bindAdminAttachThumbFallback($img, pseudoRow);
    });

    $('#attachmentDetailRelation').html(renderAttachmentRelation(data));

    $('#attachmentDetailMeta').html(
        metaItem(AttachmentsPageI18n.colId, data.id) +
        metaItem(AttachmentsPageI18n.colAttachKey, data.attach_key) +
        metaItem(AttachmentsPageI18n.colUser, data.username) +
        metaItem(AttachmentsPageI18n.colDriver, data.driver) +
        metaItem(AttachmentsPageI18n.colKind, data.kind_label) +
        metaItem(AttachmentsPageI18n.colStatus, data.status_label) +
        metaItem(AttachmentsPageI18n.colTime, data.created_at_str) +
        metaItem(AttachmentsPageI18n.colUpdated, data.updated_at_str) +
        metaItem(AttachmentsPageI18n.colRemoteId, data.remote_file_id) +
        metaItem(AttachmentsPageI18n.colDetailSlug, data.detail_slug) +
        metaItem(AttachmentsPageI18n.colSize, data.size_human)
    );

    $('#attachmentDetailUrls').html(
        urlBlock(AttachmentsPageI18n.colEmbedUrl, data.embed_url) +
        urlBlock(AttachmentsPageI18n.colExternalUrl, data.external_link) +
        urlBlock(AttachmentsPageI18n.colDirectUrl, data.direct_link) +
        urlBlock(AttachmentsPageI18n.colThumbUrl, data.thumb_url || data.preview_url)
    );

    var openUrl = String(data.open_url || '').trim();
    if (openUrl) {
        $('#attachmentDetailOpenBtn').removeClass('d-none').attr('href', openUrl);
    } else {
        $('#attachmentDetailOpenBtn').addClass('d-none').attr('href', '#');
    }

    if (data.is_image_flag && data.open_url) {
        $('#attachmentDetailPreviewBtn').removeClass('d-none').data('attachId', data.id).data('previewKind', 'image').text(AttachmentsPageI18n.preview);
    } else if (data.is_video_flag && (data.open_url || data.attach_key)) {
        $('#attachmentDetailPreviewBtn')
            .removeClass('d-none')
            .data('attachId', data.id)
            .data('previewKind', 'video')
            .text(AttachmentsPageI18n.previewVideo);
    } else {
        $('#attachmentDetailPreviewBtn').addClass('d-none').removeData('attachId').removeData('previewKind').text(AttachmentsPageI18n.preview);
    }

    $('#attachmentDetailLoading').addClass('d-none');
    $('#attachmentDetailContent').removeClass('d-none');
}

function showAttachmentDetail(id) {
    id = parseInt(id, 10) || 0;
    if (id <= 0) return;
    initAttachmentDetailModal();
    if (!attachmentDetailModal) {
        BootstrapModal.msg(AttachmentsPageI18n.loadFailed, {icon: 2});
        return;
    }
    $('#attachmentDetailLoading').removeClass('d-none');
    $('#attachmentDetailContent').addClass('d-none');
    $('#attachmentDetailOpenBtn').addClass('d-none');
    $('#attachmentDetailPreviewBtn').addClass('d-none');
    attachmentDetailModal.show();

    if (attachmentDetailCache[id]) {
        renderAttachmentDetail(attachmentDetailCache[id]);
        return;
    }

    $.ajax({
        url: '/admin/attachment-get?id=' + encodeURIComponent(id),
        type: 'GET',
        dataType: 'json',
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        success: function(res) {
            if (res.success && res.data) {
                attachmentDetailCache[id] = res.data;
                renderAttachmentDetail(res.data);
            } else if (res.require_login) {
                window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
            } else {
                attachmentDetailModal.hide();
                BootstrapModal.msg(res.message || AttachmentsPageI18n.loadFailed, {icon: 2});
            }
        },
        error: function(xhr) {
            attachmentDetailModal.hide();
            if (xhr.status === 401 || xhr.status === 403) {
                window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
            } else {
                BootstrapModal.msg(AttachmentsPageI18n.loadFailed, {icon: 2});
            }
        }
    });
}

$(function() {
    {{if .Data.Flash}}
    showAttachmentsFlashToast({{json .Data.Flash}}, {{json .Data.FlashType}});
    {{end}}

    var $selAll = $('#checkAllAttachments');
    var $rowChecks = $('.attachments-row-check');
    var $selectedCount = $('#attachmentsSelectedCount');
    var $batchBar = $('#attachmentsBatchActionBar');

    function updateBulkState() {
        var total = $rowChecks.length;
        var checked = $rowChecks.filter(':checked').length;
        $selectedCount.text(checked);
        if (checked > 0) {
            $batchBar.stop(true, true).slideDown(200);
        } else {
            $batchBar.stop(true, true).slideUp(200);
        }
        if ($selAll.length) {
            $selAll.prop('checked', total > 0 && checked === total);
            $selAll.prop('indeterminate', checked > 0 && checked < total);
        }
        $rowChecks.each(function() {
            $(this).closest('tr').toggleClass('is-selected', this.checked);
        });
    }

    function clearSelection() {
        $rowChecks.prop('checked', false);
        $selAll.prop('checked', false).prop('indeterminate', false);
        updateBulkState();
    }

    function getSelectedIds() {
        var ids = [];
        $rowChecks.filter(':checked').each(function() {
            var id = parseInt($(this).val(), 10);
            if (id > 0) ids.push(id);
        });
        return ids;
    }

    $selAll.on('change', function() {
        $rowChecks.prop('checked', this.checked);
        updateBulkState();
    });
    $(document).on('change', '.attachments-row-check', updateBulkState);

    $('#btnAttachmentsClearSelection').on('click', clearSelection);

    $('#btnAdminAttachmentsDeleteUnreferenced').on('click', function() {
        var count = parseInt('{{.Data.StatsUnreferenced}}', 10) || 0;
        if (count <= 0) {
            BootstrapModal.msg(AttachmentsPageI18n.noUnreferenced, {icon: 0});
            return;
        }
        BootstrapModal.confirm(
            attachI18n(AttachmentsPageI18n.deleteUnreferencedConfirm, {count: count}) +
            '<br><span class="text-danger">' + AttachmentsPageI18n.deleteUnreferencedWarn + '</span>',
            {
                icon: 3,
                title: AttachmentsPageI18n.confirmDeleteUnreferenced,
                btn: [AttachmentsPageI18n.btnDelete, AttachmentsPageI18n.btnCancel]
            },
            function(index) {
                BootstrapModal.close(index);
                $.ajax({
                    url: '/admin/attachment-delete-unreferenced',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({}),
                    dataType: 'json',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    success: function(res) {
                        if (res.success) {
                            BootstrapModal.msg(res.message || AttachmentsPageI18n.deletedOk, {icon: 1, time: 1000});
                            setTimeout(function() { location.reload(); }, 1200);
                        } else if (res.require_login) {
                            window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                        } else {
                            BootstrapModal.msg(res.message || AttachmentsPageI18n.deleteFailed, {icon: 2});
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 401 || xhr.status === 403) {
                            window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                        } else {
                            BootstrapModal.msg(AttachmentsPageI18n.requestFailed, {icon: 2});
                        }
                    }
                });
            }
        );
    });

    $('#btnAttachmentsBatchDelete').on('click', function() {
        var ids = getSelectedIds();
        if (ids.length === 0) {
            BootstrapModal.msg(AttachmentsPageI18n.selectFirst, {icon: 2});
            return;
        }

        var names = [];
        $rowChecks.filter(':checked').each(function() {
            names.push($(this).data('filename') || $(this).val());
        });
        var nameList = names.slice(0, 3).join(', ');
        var moreText = names.length > 3 ? attachI18n(AttachmentsPageI18n.andMore, {count: names.length}) : '';

        BootstrapModal.confirm(
            attachI18n(AttachmentsPageI18n.batchDeleteConfirm, {count: ids.length}) +
            '<br><span class="text-danger">' + AttachmentsPageI18n.batchDeleteWarn + '</span>' +
            '<br><small class="text-muted">' + nameList + moreText + '</small>',
            {
                icon: 3,
                title: AttachmentsPageI18n.confirmBatchDelete,
                btn: [AttachmentsPageI18n.btnDelete, AttachmentsPageI18n.btnCancel]
            },
            function(index) {
                BootstrapModal.close(index);
                $.ajax({
                    url: '/admin/attachment-batch-delete',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ids: ids}),
                    dataType: 'json',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    success: function(res) {
                        if (res.success) {
                            BootstrapModal.msg(res.message || AttachmentsPageI18n.deletedOk, {icon: 1, time: 1000});
                            clearSelection();
                            setTimeout(function() { location.reload(); }, 1200);
                        } else if (res.require_login) {
                            window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                        } else {
                            BootstrapModal.msg(res.message || AttachmentsPageI18n.deleteFailed, {icon: 2});
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 401 || xhr.status === 403) {
                            window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                        } else {
                            BootstrapModal.msg(AttachmentsPageI18n.requestFailed, {icon: 2});
                        }
                    }
                });
            }
        );
    });

    syncAdminAttachViewerImages();

    applyAdminAttachmentThumbUrls();

    $(document).on('click', '.btn-copy-url', function() {
        var text = String($(this).attr('data-copy-text') || '').trim();
        if (!text) return;
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showAttachmentsFlashToast(AttachmentsPageI18n.copied, 'success');
            });
            return;
        }
        var $tmp = $('<textarea readonly/>').val(text).appendTo('body').select();
        try {
            document.execCommand('copy');
            showAttachmentsFlashToast(AttachmentsPageI18n.copied, 'success');
        } catch (e) {}
        $tmp.remove();
    });

    initAttachmentDetailModal();

    $(document).on('click', '.attachments-filename.is-detailable, .js-attach-detail', function(e) {
        e.preventDefault();
        var id = $(this).data('attachId') || $(this).attr('data-attach-id') || $(this).closest('.attachments-row').data('id');
        showAttachmentDetail(id);
    });

    $(document).on('keydown', '.attachments-filename.is-detailable', function(e) {
        if (e.key !== 'Enter' && e.key !== ' ') return;
        e.preventDefault();
        showAttachmentDetail($(this).data('attachId') || $(this).attr('data-attach-id'));
    });

    $(document).on('click', '.js-attach-preview', function(e) {
        e.preventDefault();
        previewAdminAttachImage($('.attachments-row[data-id="' + $(this).data('attachId') + '"]'));
    });

    $(document).on('click', '.js-attach-video-preview', function(e) {
        e.preventDefault();
        previewAdminAttachVideo($('.attachments-row[data-id="' + $(this).data('attachId') + '"]'));
    });

    $(document).on('click', '.attachments-row.is-image-row .attachments-preview.is-clickable', function(e) {
        if ($(e.target).closest('input, a, button, label, .dropdown-menu').length) return;
        e.preventDefault();
        e.stopPropagation();
        previewAdminAttachImage($(this).closest('.attachments-row'));
    });

    $(document).on('click', '.attachments-row.is-video-row .attachments-preview.is-video-preview', function(e) {
        if ($(e.target).closest('input, a, button, label, .dropdown-menu').length) return;
        e.preventDefault();
        e.stopPropagation();
        previewAdminAttachVideo($(this).closest('.attachments-row'));
    });

    $(document).on('click', '.attachments-row .attachments-preview.is-doc-preview', function(e) {
        if ($(e.target).closest('input, a, button, label, .dropdown-menu').length) return;
        e.preventDefault();
        e.stopPropagation();
        var openUrl = String($(this).closest('.attachments-row').attr('data-full-url') || '').trim();
        if (openUrl) window.open(openUrl, '_blank', 'noopener,noreferrer');
    });

    $('#attachmentDetailPreviewBtn').on('click', function() {
        var id = $(this).data('attachId');
        var kind = String($(this).data('previewKind') || 'image');
        var $row = $('.attachments-row[data-id="' + id + '"]');
        if (!$row.length) return;
        if (kind === 'video') {
            previewAdminAttachVideo($row);
            return;
        }
        previewAdminAttachImage($row);
    });

    updateBulkState();
});
</script>
{{end}}