{{template "layout.html" .}}

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

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

<div class="user-list-page user-attachments-page">
    <div class="card mb-3">
        <div class="card-body">
            <div class="user-page-head">
                <div class="user-page-head-main">
                    <h5>{{T "user_attach_manage"}}</h5>
                    <p class="text-muted">{{T "user_attachments_page_hint"}}</p>
                </div>
                <div class="user-page-head-actions">
                    {{if and .Data.TableReady .Data.AttachEnabled}}
                    <button type="button" class="btn btn-primary btn-sm" id="btnUserAttachmentsUpload"><i class='bx bx-cloud-upload'></i> {{T "user_attach_upload_btn"}}</button>
                    {{end}}
                    <a href="/user/document_edit" class="btn btn-outline-primary btn-sm"><i class='bx bx-edit'></i> {{T "user_publish_document"}}</a>
                </div>
            </div>
        </div>
    </div>

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

    {{if .Data.GroupTableReady}}
    <div class="card user-attachments-groups-card">
        <div class="card-body">
            <div class="user-attachments-groups-head">
                <div>
                    <h6><i class='bx bx-folder'></i> {{T "user_attach_group_manage"}}</h6>
                    <p class="small text-muted mb-0">{{T "user_attach_group_manage_hint"}}</p>
                </div>
                <button type="button" class="btn btn-sm btn-outline-primary" id="btnUserAttachGroupAdd">
                    <i class='bx bx-plus'></i> {{T "user_attach_group_add"}}
                </button>
            </div>
            <div class="user-attachments-groups-bar" id="userAttachmentsGroupsBar">
                {{$groupQs := .Data.GroupQuerySuffix}}
                <a href="/user/attachments{{if $groupQs}}?{{$groupQs}}{{end}}" class="user-attachments-group-chip user-attachments-group-chip--all{{if eq .Data.QGroupID 0}} is-active{{end}}">
                    {{T "user_attach_group_all"}}
                </a>
                <a href="/user/attachments?group_id=-1{{if $groupQs}}&{{$groupQs}}{{end}}" class="user-attachments-group-chip user-attachments-group-chip--all{{if eq .Data.QGroupID .Data.GroupIDUngrouped}} is-active{{end}}">
                    {{T "user_attach_group_ungrouped"}} <span class="opacity-75">({{.Data.StatsUngrouped}})</span>
                </a>
                {{range .Data.Groups}}
                {{$groupLinkQs := $.Data.GroupQuerySuffix}}
                <div class="user-attachments-group-chip{{if eq $.Data.QGroupID (index . "id")}} is-active{{end}}" data-group-id="{{index . "id"}}" data-group-name="{{index . "name"}}">
                    <a href="/user/attachments?group_id={{index . "id"}}{{if $groupLinkQs}}&{{$groupLinkQs}}{{end}}" class="user-attachments-group-chip__link">
                        {{index . "name"}} <span class="opacity-75">({{index . "attach_count"}})</span>
                    </a>
                    <button type="button" class="user-attachments-group-chip__menu" title="{{T "user_attach_group_manage"}}" aria-label="{{T "user_attach_group_manage"}}">
                        <i class='bx bx-dots-horizontal-rounded' aria-hidden="true"></i>
                    </button>
                </div>
                {{end}}
            </div>
        </div>
    </div>
    {{end}}

    <div class="user-attachments-ref-tabs">
        <ul class="nav" role="tablist" aria-label="{{T "user_attachments_col_reference"}}">
            {{$filterQs := .Data.FilterQuerySuffix}}
            <li class="nav-item" role="presentation">
                <a class="nav-link{{if eq .Data.QRef "all"}} active{{end}}" href="/user/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 "user_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="/user/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 "user_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="/user/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 "user_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="btnUserAttachmentsDeleteUnreferenced">
            <i class='bx bx-trash'></i> {{T "user_attachments_delete_unreferenced"}}
        </button>
        {{end}}
    </div>

    <div class="user-attachments-toolbar card">
        <div class="card-body">
            <form method="get" action="/user/attachments">
                {{if ne .Data.QRef "all"}}<input type="hidden" name="ref" value="{{.Data.QRef}}">{{end}}
                {{if eq .Data.Sort "filename"}}
                <input type="hidden" name="sort" value="filename">
                <input type="hidden" name="order" value="{{.Data.Order}}">
                {{end}}
                <div class="row g-2 align-items-end">
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "user_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 "user_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 "user_attachments_filter_group"}}</label>
                        <select name="group_id" class="form-select form-select-sm">
                            <option value="0" {{if eq .Data.QGroupID 0}}selected{{end}}>{{T "user_attachments_group_all"}}</option>
                            <option value="-1" {{if eq .Data.QGroupID .Data.GroupIDUngrouped}}selected{{end}}>{{T "user_attach_group_ungrouped"}} ({{.Data.StatsUngrouped}})</option>
                            {{range .Data.Groups}}
                            <option value="{{index . "id"}}" {{if eq $.Data.QGroupID (index . "id")}}selected{{end}}>{{index . "name"}} ({{index . "attach_count"}})</option>
                            {{end}}
                        </select>
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "user_attachments_col_driver"}}</label>
                        <select name="driver" class="form-select form-select-sm">
                            <option value="all" {{if eq .Data.QDriver "all"}}selected{{end}}>{{T "user_attachments_driver_all"}}</option>
                            <option value="local" {{if eq .Data.QDriver "local"}}selected{{end}}>{{T "user_attachments_driver_local"}}</option>
                            <option value="imgtoc" {{if eq .Data.QDriver "imgtoc"}}selected{{end}}>{{T "user_attachments_driver_imgtoc"}}</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "user_attachments_col_kind"}}</label>
                        <select name="kind" class="form-select form-select-sm">
                            <option value="all" {{if eq .Data.QKind "all"}}selected{{end}}>{{T "user_attachments_kind_all"}}</option>
                            <option value="doc_image" {{if eq .Data.QKind "doc_image"}}selected{{end}}>{{T "user_attachments_kind_image"}}</option>
                            <option value="doc_attachment" {{if eq .Data.QKind "doc_attachment"}}selected{{end}}>{{T "user_attachments_kind_file"}}</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-6">
                        <label class="form-label">{{T "user_col_status"}}</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="1" {{if eq .Data.QStatus "1"}}selected{{end}}>{{T "user_attachments_status_active"}}</option>
                            <option value="0" {{if eq .Data.QStatus "0"}}selected{{end}}>{{T "user_attachments_status_deleted"}}</option>
                            <option value="-1" {{if eq .Data.QStatus "-1"}}selected{{end}}>{{T "user_attachments_status_all"}}</option>
                        </select>
                    </div>
                    <div class="col-md-4 col-12">
                        <label class="form-label">{{T "user_btn_search"}}</label>
                        <input type="text" name="q" class="form-control form-control-sm" value="{{.Data.Q}}" placeholder="{{T "user_attachments_search_placeholder"}}">
                    </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 "user_btn_filter"}}</button>
                    </div>
                </div>
                <p class="small text-muted mb-0 mt-2">{{T "user_attachments_filter_scope_hint"}}</p>
            </form>
        </div>
    </div>

    <div class="card user-table-card user-attachments-table-card">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="userAttachmentsTable">
                <thead>
                    <tr>
                        <th width="40" class="col-check">
                            <input type="checkbox" id="checkAllUserAttachments" title="{{T "user_attachments_select_all"}}">
                        </th>
                        <th width="56">{{T "user_attachments_col_preview"}}</th>
                        <th>{{if .Data.SortFilenameURL}}<a href="{{.Data.SortFilenameURL}}" class="user-table-sort{{if eq .Data.Sort "filename"}} is-active{{end}}" title="{{T "user_attachments_col_filename"}}">{{T "user_attachments_col_filename"}}{{if eq .Data.Sort "filename"}} <i class='bx {{if eq .Data.Order "asc"}}bx-sort-up{{else}}bx-sort-down{{end}}' aria-hidden="true"></i>{{end}}</a>{{else}}{{T "user_attachments_col_filename"}}{{end}}</th>
                        <th width="120">{{T "user_attachments_col_group"}}</th>
                        <th width="88">{{T "user_attachments_col_reference"}}</th>
                        <th width="90">{{T "user_attachments_col_size"}}</th>
                        <th width="200">{{T "user_attachments_col_document"}}</th>
                        <th width="130">{{T "user_attachments_col_time"}}</th>
                        <th width="60" class="text-center">{{T "user_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{if .Data.Rows}}
                    {{range .Data.Rows}}
                    <tr class="user-attach-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 class="col-check"><input type="checkbox" class="user-attach-row-check" value="{{index . "id"}}" data-filename="{{index . "filename"}}"></td>
                        <td>
                            {{if index . "has_preview_flag"}}
                            <div class="user-attach-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 "user_attach_preview"}}{{else if index . "is_video_flag"}}{{T "user_attach_preview_video"}}{{else}}{{T "user_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="user-attach-preview is-video-preview" title="{{T "user_attach_preview_video"}}" role="button" tabindex="0">
                                <i class="{{index . "icon_class"}}" aria-hidden="true"></i>
                            </div>
                            {{else}}
                            <div class="user-attach-preview">
                                <i class="{{index . "icon_class"}}" aria-hidden="true"></i>
                            </div>
                            {{end}}
                        </td>
                        <td>
                            <div class="user-attach-filename small is-detailable" title="{{T "user_attachments_view_detail"}}" role="button" tabindex="0" data-attach-id="{{index . "id"}}">
                                {{index . "filename"}}
                            </div>
                        </td>
                        <td>
                            {{if index . "group_name"}}
                            {{if index . "group_filter_url"}}
                            <a href="{{index . "group_filter_url"}}" class="user-attach-group-badge text-decoration-none"><i class='bx bx-folder'></i> {{index . "group_name"}}</a>
                            {{else}}
                            <span class="user-attach-group-badge"><i class='bx bx-folder'></i> {{index . "group_name"}}</span>
                            {{end}}
                            {{else}}
                            <span class="small text-muted">—</span>
                            {{end}}
                        </td>
                        <td>
                            {{if index . "is_referenced_flag"}}
                            <span class="user-attach-ref-badge is-referenced"><i class='bx bx-link-alt'></i> {{T "user_attachments_referenced_badge"}}</span>
                            {{else}}
                            <span class="user-attach-ref-badge is-unreferenced"><i class='bx bx-unlink'></i> {{T "user_attachments_unreferenced_badge"}}</span>
                            {{end}}
                        </td>
                        <td class="small text-muted">{{index . "size_human"}}</td>
                        <td class="user-attach-doc-cell">
                            {{if index . "document_id"}}
                            {{if index . "document_url"}}
                            <a href="{{index . "document_url"}}" target="_blank" rel="noopener noreferrer" class="user-attach-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_filter_url"}}
                            <div class="user-attach-doc-actions">
                                <a href="{{index . "document_filter_url"}}" class="btn btn-outline-secondary btn-sm"><i class="bx bx-filter-alt"></i> {{T "user_attachments_filter_by_document"}}</a>
                            </div>
                            {{end}}
                            {{else}}
                            <span class="small text-muted">{{T "user_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-user-attach-detail" href="javascript:;" data-attach-id="{{index . "id"}}"><i class="bx bx-detail"></i> {{T "user_attachments_view_detail"}}</a></li>
                                    {{if index . "is_image_flag"}}
                                    <li><a class="dropdown-item js-user-attach-preview" href="javascript:;" data-attach-id="{{index . "id"}}"><i class="bx bx-show"></i> {{T "user_attach_preview"}}</a></li>
                                    {{else if index . "is_video_flag"}}
                                    <li><a class="dropdown-item js-user-attach-video-preview" href="javascript:;" data-attach-id="{{index . "id"}}"><i class="bx bxs-videos"></i> {{T "user_attach_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 "user_attachments_open_link"}}</a></li>
                                    {{end}}{{end}}
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                    {{else}}
                    <tr>
                        <td colspan="8">
                            <div class="user-attach-empty">
                                <i class='bx bx-inbox'></i>
                                <div>{{T "user_attach_empty"}}</div>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>

    <div id="userAttachmentsBatchBar" class="user-batch-bar" style="display: none;">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span class="small text-secondary">{{T "user_attachments_bulk_selected"}} <span id="userAttachmentsSelectedCount">0</span> {{T "user_attachments_bulk_selected_unit"}}</span>
            <div class="d-flex gap-2 flex-wrap">
                {{if .Data.GroupTableReady}}
                <button type="button" class="btn btn-sm btn-outline-primary" id="btnUserAttachmentsBatchMoveGroup">
                    <i class='bx bx-folder'></i> {{T "user_attachments_bulk_move_group"}}
                </button>
                {{end}}
                <button type="button" class="btn btn-sm btn-outline-danger" id="btnUserAttachmentsBatchDelete">
                    <i class='bx bx-trash'></i> {{T "user_attachments_bulk_delete"}}
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnUserAttachmentsClearSelection">
                    <i class='bx bx-x'></i> {{T "user_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="/user/attachments?page=1{{if $qs}}&{{$qs}}{{end}}"><i class='bx bx-first-page'></i> {{T "user_pagination_first"}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="/user/attachments?page={{$prevPage}}{{if $qs}}&{{$qs}}{{end}}"><i class='bx bx-chevron-left'></i> {{T "user_pagination_prev"}}</a>
            </li>
            {{end}}
            <li class="page-item disabled">
                <span class="page-link">{{T "user_pagination_page"}} {{$currentPage}} / {{$totalPages}}, {{.Data.Total}} {{T "user_pagination_records_unit"}}</span>
            </li>
            {{if lt $currentPage $totalPages}}
            <li class="page-item">
                <a class="page-link" href="/user/attachments?page={{$nextPage}}{{if $qs}}&{{$qs}}{{end}}">{{T "user_pagination_next"}} <i class='bx bx-chevron-right'></i></a>
            </li>
            <li class="page-item">
                <a class="page-link" href="/user/attachments?page={{$totalPages}}{{if $qs}}&{{$qs}}{{end}}">{{T "user_pagination_last"}} <i class='bx bx-last-page'></i></a>
            </li>
            {{end}}
        </ul>
    </nav>
    {{end}}
    {{end}}

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

    {{if and .Data.TableReady .Data.AttachEnabled}}
    <div class="modal fade" id="userAttachmentUploadModal" tabindex="-1" aria-labelledby="userAttachmentUploadModalTitle" 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="userAttachmentUploadModalTitle"><i class='bx bx-cloud-upload'></i> {{T "user_attach_upload_modal_title"}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "btn_cancel"}}"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted mb-3">{{T "user_attach_upload_queue_hint"}} · {{T "user_attach_max_size"}} {{.Data.AttachMaxMB}} MB</p>
                    {{if .Data.GroupTableReady}}
                    <div class="user-attach-upload-group mb-3">
                        <label class="form-label small mb-1" for="userAttachUploadGroupSelect">{{T "user_attach_upload_group_label"}}</label>
                        <select id="userAttachUploadGroupSelect" class="form-select form-select-sm" aria-describedby="userAttachUploadGroupHint">
                            <option value="0">{{T "user_attach_group_ungrouped"}}</option>
                            {{range .Data.Groups}}
                            <option value="{{index . "id"}}" {{if eq $.Data.QGroupID (index . "id")}}selected{{end}}>{{index . "name"}}</option>
                            {{end}}
                        </select>
                        <div id="userAttachUploadGroupHint" class="form-text">{{T "user_attach_upload_group_hint"}}</div>
                    </div>
                    {{end}}
                    <div class="user-attach-upload-toolbar">
                        <div class="user-attach-upload-toolbar__actions">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="userAttachUploadAddImg"><i class='bx bx-image-add'></i> {{T "user_attach_upload_image"}}</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="userAttachUploadAddVideo"><i class='bx bxs-videos'></i> {{T "user_attach_upload_video"}}</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="userAttachUploadAddFile"><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 user-attach-upload-toolbar__pause d-none" id="userAttachUploadPause" 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="userAttachUploadQueue">
                        <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="userAttachUploadQueueList" class="file-queue-list"></div>
                    </div>
                    <div class="user-attach-upload-drop" id="userAttachUploadDrop" 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="user-attach-upload-drop__actions">
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="userAttachPasteBtn">
                                <i class='bx bx-paste' aria-hidden="true"></i> {{T "user_attach_paste_btn"}}
                            </button>
                        </div>
                    </div>
                    <input type="file" id="userAttachUploadInput" class="d-none" multiple tabindex="-1" aria-hidden="true">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade sd-bootstrap-modal attach-paste-confirm-modal" id="userAttachPasteModal" tabindex="-1" aria-labelledby="userAttachPasteModalTitle" 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="userAttachPasteModalTitle"><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="userAttachPasteList"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="userAttachPasteClear">{{T "user_attach_paste_clear"}}</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="userAttachPasteCancel">{{T "user_attach_paste_cancel"}}</button>
                    <button type="button" class="btn btn-sm btn-primary" id="userAttachPasteConfirm">{{T "user_attach_paste_confirm"}}</button>
                </div>
            </div>
        </div>
    </div>
    {{end}}

    <div class="modal fade" id="userAttachmentDetailModal" 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="userAttachmentDetailTitle">{{T "user_attachments_detail_title"}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "btn_cancel"}}"></button>
                </div>
                <div class="modal-body">
                    <div id="userAttachmentDetailLoading" 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 "user_attachments_detail_loading"}}</div>
                    </div>
                    <div id="userAttachmentDetailContent" class="d-none">
                        <div class="user-attach-detail-head">
                            <div class="user-attach-detail-preview" id="userAttachmentDetailPreview"></div>
                            <div class="flex-grow-1 min-w-0">
                                <h6 class="user-attach-detail-filename" id="userAttachmentDetailFilename"></h6>
                                <div class="d-flex flex-wrap gap-2" id="userAttachmentDetailBadges"></div>
                            </div>
                        </div>
                        <div class="user-attach-detail-section" id="userAttachmentDetailRelation"></div>
                        <div class="user-attach-detail-section">
                            <div class="user-attach-detail-section-title">{{T "user_attachments_detail_section_basic"}}</div>
                            <dl class="user-attach-detail-meta" id="userAttachmentDetailMeta"></dl>
                        </div>
                        <div class="user-attach-detail-section">
                            <div class="user-attach-detail-section-title">{{T "user_attachments_detail_section_links"}}</div>
                            <div id="userAttachmentDetailUrls"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{T "btn_cancel"}}</button>
                    <a href="#" class="btn btn-primary btn-sm d-none" id="userAttachmentDetailOpenBtn" target="_blank" rel="noopener noreferrer">{{T "user_attachments_open_link"}}</a>
                    <button type="button" class="btn btn-outline-primary btn-sm d-none" id="userAttachmentDetailPreviewBtn">{{T "user_attach_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>
{{if and .Data.TableReady .Data.AttachEnabled}}
<script>
window.UserAttachmentsUploadPage = {
    enabled: true,
    driver: {{json .Data.AttachDriver}},
    project_id: {{if gt .Data.QProjectID 0}}{{.Data.QProjectID}}{{else}}0{{end}},
    group_id: {{if gt .Data.QGroupID 0}}{{.Data.QGroupID}}{{else}}0{{end}}
};
window.UserAttachmentsAttachConfig = {{json .Data.AttachConfig}};
window.UserAttachmentsUploadMsgs = {
    uploading: {{json (T "user_attach_uploading")}},
    ok: {{json (T "user_attach_upload_ok")}},
    tooBig: {{json (T "user_imgtoc_file_too_big")}},
    extNotAllowed: {{json (T "user_attach_ext_not_allowed")}},
    disabled: {{json (T "user_attach_disabled_hint")}},
    requestFailed: {{json (T "user_api_system_busy")}},
    statusPending: {{json (T "user_upload_status_pending")}},
    statusError: {{json (T "user_upload_status_error")}},
    fileCountSuffix: {{json (T "user_upload_file_count_suffix")}},
    removeFile: {{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")}},
    groupUngrouped: {{json (T "user_attach_group_ungrouped")}},
    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")}}
};
</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/user-attachments-upload.js"}}"></script>
{{end}}
<script>
var UserAttachmentsPageConfig = {
    attachDriver: {{json .Data.AttachDriver}},
    imgtocBase: {{json .Data.ImgToCBase}},
    videoExtensions: {{json .Data.VideoExtensions}},
    groupTableReady: {{if .Data.GroupTableReady}}true{{else}}false{{end}},
    groups: {{json .Data.Groups}}
};
var UserAttachmentsPageI18n = {
    selectFirst: {{json (T "user_attachments_no_selection")}},
    batchDeleteConfirm: {{json (T "user_attachments_batch_delete_confirm")}},
    batchDeleteWarn: {{json (T "user_attachments_batch_delete_warn")}},
    andMore: {{json (T "user_attachments_and_more")}},
    confirmBatchDelete: {{json (T "user_attachments_confirm_batch_delete")}},
    deletedOk: {{json (T "user_attachments_deleted_ok")}},
    deleteFailed: {{json (T "user_attachments_delete_failed")}},
    requestFailed: {{json (T "user_api_system_busy")}},
    btnDelete: {{json (T "user_btn_delete")}},
    btnCancel: {{json (T "btn_cancel")}},
    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")}},
    openLink: {{json (T "user_attachments_open_link")}},
    viewDetail: {{json (T "user_attachments_view_detail")}},
    detailTitle: {{json (T "user_attachments_detail_title")}},
    loadFailed: {{json (T "user_attachments_detail_load_failed")}},
    unbound: {{json (T "user_attachments_unbound")}},
    colId: {{json (T "user_col_id")}},
    colDocument: {{json (T "user_attachments_col_document")}},
    colProject: {{json (T "user_attachments_col_project")}},
    colDriver: {{json (T "user_attachments_col_driver")}},
    colKind: {{json (T "user_attachments_col_kind")}},
    colStatus: {{json (T "user_col_status")}},
    colTime: {{json (T "user_attachments_col_time")}},
    colUpdated: {{json (T "user_col_updated")}},
    colAttachKey: {{json (T "user_attachments_col_attach_key")}},
    colRemoteId: {{json (T "user_attachments_col_remote_id")}},
    colDetailSlug: {{json (T "user_attachments_col_detail_slug")}},
    colEmbedUrl: {{json (T "user_attachments_col_embed_url")}},
    colExternalUrl: {{json (T "user_attachments_col_external_url")}},
    colDirectUrl: {{json (T "user_attachments_col_direct_url")}},
    colThumbUrl: {{json (T "user_attachments_col_thumb_url")}},
    filterByDocument: {{json (T "user_attachments_filter_by_document")}},
    detailSectionRelation: {{json (T "user_attachments_detail_section_relation")}},
    copyLink: {{json (T "user_attach_copy_link")}},
    copied: {{json (T "user_attach_copy_ok")}},
    colSize: {{json (T "user_attachments_col_size")}},
    colReference: {{json (T "user_attachments_col_reference")}},
    referencedBadge: {{json (T "user_attachments_referenced_badge")}},
    unreferencedBadge: {{json (T "user_attachments_unreferenced_badge")}},
    deleteUnreferenced: {{json (T "user_attachments_delete_unreferenced")}},
    deleteUnreferencedConfirm: {{json (T "user_attachments_delete_unreferenced_confirm")}},
    deleteUnreferencedWarn: {{json (T "user_attachments_delete_unreferenced_warn")}},
    confirmDeleteUnreferenced: {{json (T "user_attachments_confirm_delete_unreferenced")}},
    noUnreferenced: {{json (T "user_attachments_no_unreferenced")}},
    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")}},
    colGroup: {{json (T "user_attachments_col_group")}},
    btnSave: {{json (T "user_btn_save")}},
    groupAssign: {{json (T "user_attach_group_assign")}},
    groupUngrouped: {{json (T "user_attach_group_ungrouped")}},
    groupAssignOk: {{json (T "user_attach_group_assigned_ok")}},
    groupAssignFail: {{json (T "user_attach_group_assign_failed")}},
    bulkMoveGroupTitle: {{json (T "user_attachments_bulk_move_group_title")}},
    bulkMoveGroupLabel: {{json (T "user_attachments_bulk_move_group_label")}}
};

function userAttachI18n(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 resolveUserAttachRemoteFileId($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 resolveUserAttachEmbedUrl($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(UserAttachmentsPageConfig.imgtocBase || 'https://imgtoc.com').replace(/\/$/, '');
        if (base) url = base + '/directlink/' + slug;
    }
    return url;
}

function resolveUserAttachThumbProxyUrl($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 + '/user/attachment-thumb?id=' + encodeURIComponent(id) + '&size=200';
}

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

function resolveUserAttachThumbUrl($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) && !isUserAttachThumbProxyUrl(thumb)) return thumb;
    if (String($row.attr('data-driver') || '') === 'imgtoc') {
        var base = String(UserAttachmentsPageConfig.imgtocBase || 'https://imgtoc.com').replace(/\/$/, '');
        var fileId = resolveUserAttachRemoteFileId($row);
        if (fileId && base) {
            return base + '/api.html?act=file-thumbnail&id=' + encodeURIComponent(fileId) + '&size=200';
        }
    }
    thumb = thumb || resolveUserAttachEmbedUrl($row);
    if (thumb && !isUserAttachThumbProxyUrl(thumb)) return thumb;
    return resolveUserAttachThumbProxyUrl($row);
}

function bindUserAttachThumbFallback($img, $row) {
    if (!$img || !$img.length || !$row || !$row.length) return;
    var full = resolveUserAttachEmbedUrl($row);
    $img.off('error.userAttachThumb').one('error.userAttachThumb', function() {
        var $el = $(this);
        var current = String($el.attr('src') || '').trim();
        var rebuilt = resolveUserAttachThumbUrl($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 = resolveUserAttachThumbProxyUrl($row);
        if (proxy && current !== proxy && !$el.data('proxy-tried')) {
            $el.data('proxy-tried', 1);
            $el.attr('src', proxy);
            return;
        }
        var $cell = $el.closest('.user-attach-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 applyUserAttachmentThumbUrls() {
    $('#userAttachmentsTable .user-attach-row[data-has-preview="1"] .user-attach-preview img[data-preview-url]').each(function() {
        var $img = $(this);
        var $row = $img.closest('.user-attach-row');
        var thumb = resolveUserAttachThumbUrl($row);
        var full = resolveUserAttachEmbedUrl($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);
        }
        bindUserAttachThumbFallback($img, $row);
    });
}

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

function syncUserAttachViewerImages() {
    var $viewer = ensureUserAttachViewerRoot();
    $viewer.empty();
    $('.user-attach-row[data-is-image="1"]').each(function() {
        var $row = $(this);
        var full = resolveUserAttachEmbedUrl($row);
        var thumb = resolveUserAttachThumbUrl($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 previewUserAttachImage($row) {
    if (!$row || !$row.length) return;
    var full = resolveUserAttachEmbedUrl($row);
    var attachId = String($row.attr('data-id') || '');
    if (!full) {
        BootstrapModal.msg(UserAttachmentsPageI18n.previewFail, {icon: 2});
        return;
    }
    if (!window.SdImageViewer || !SdImageViewer.canUse || !SdImageViewer.canUse()) {
        BootstrapModal.msg(UserAttachmentsPageI18n.previewFail, {icon: 2});
        return;
    }
    syncUserAttachViewerImages();
    var $viewer = $('#userAttachViewer');
    SdImageViewer.viewImageWithLoading($viewer, {
        attachId: attachId,
        src: full,
        onFail: function() {
            BootstrapModal.msg(UserAttachmentsPageI18n.previewFail, {icon: 2});
        }
    });
}

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

function isUserAttachVideoFilename(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 = UserAttachmentsPageConfig.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 resolveUserAttachPlayUrl($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 buildUserAttachVideoModalContent(filename, playUrl) {
    var safeName = escUserAttachHtml(filename || 'video');
    var safeUrl = escUserAttachHtml(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 pauseUserAttachVideos() {
    $('video.sd-doc-video').each(function() {
        try { this.pause(); } catch (e) {}
    });
}

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

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

var userAttachmentDetailModal;
var userAttachmentDetailCache = {};

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

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

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

function renderUserAttachmentRelation(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 documentFilterURL = String(data.document_filter_url || '').trim();
    var documentTitle = String(data.document_title || '').trim();
    var html = '<div class="user-attach-detail-section-title">' + escUserAttachHtml(UserAttachmentsPageI18n.detailSectionRelation) + '</div>';
    if (docID > 0) {
        var titleText = documentTitle || ('#' + docID);
        html += '<div class="user-attach-detail-doc-card mb-2"><div class="min-w-0">';
        if (documentURL) {
            html += '<p class="user-attach-detail-doc-card__title"><a href="' + escUserAttachHtml(documentURL) + '" target="_blank" rel="noopener noreferrer">' + escUserAttachHtml(titleText) + '</a></p>';
        } else {
            html += '<p class="user-attach-detail-doc-card__title">' + escUserAttachHtml(titleText) + '</p>';
        }
        html += '</div><div class="d-flex flex-wrap gap-1">';
        if (documentFilterURL) {
            html += '<a class="btn btn-outline-secondary btn-sm" href="' + escUserAttachHtml(documentFilterURL) + '"><i class="bx bx-filter-alt"></i> ' + escUserAttachHtml(UserAttachmentsPageI18n.filterByDocument) + '</a>';
        }
        html += '</div></div>';
    } else {
        html += '<div class="user-attach-detail-doc-card"><div class="user-attach-detail-doc-card__title text-muted">' + escUserAttachHtml(UserAttachmentsPageI18n.unbound) + '</div></div>';
    }
    if (projectID > 0) {
        var projectText = projectName || ('#' + projectID);
        html += '<div class="small text-muted mt-2">' + escUserAttachHtml(UserAttachmentsPageI18n.colProject) + ': ' + escUserAttachHtml(projectText) + ' (ID ' + escUserAttachHtml(projectID) + ')</div>';
    }
    return html;
}

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

    var previewUrl = resolveUserAttachThumbUrl($('<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();
    var previewHtml = '';
    if ((data.has_preview_flag || data.is_image_flag) && previewUrl) {
        previewHtml = '<img src="' + escUserAttachHtml(previewUrl) + '" alt="' + escUserAttachHtml(data.filename || '') + '" referrerpolicy="no-referrer" data-preview-url="' + escUserAttachHtml(previewUrl) + '" data-fallback-url="' + escUserAttachHtml(data.open_url || '') + '">';
    } else {
        previewHtml = '<i class="' + escUserAttachHtml(data.icon_class || 'bx bx-file') + '" aria-hidden="true"></i>';
    }
    $('#userAttachmentDetailPreview').html(previewHtml);
    $('#userAttachmentDetailPreview').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 || ''
        });
        bindUserAttachThumbFallback($img, pseudoRow);
    });
    $('#userAttachmentDetailRelation').html(renderUserAttachmentRelation(data));
    $('#userAttachmentDetailMeta').html(
        userAttachMetaItem(UserAttachmentsPageI18n.colId, data.id) +
        userAttachMetaItem(UserAttachmentsPageI18n.colAttachKey, data.attach_key) +
        userAttachMetaItem(UserAttachmentsPageI18n.colDriver, data.driver) +
        userAttachMetaItem(UserAttachmentsPageI18n.colKind, data.kind_label) +
        userAttachMetaItem(UserAttachmentsPageI18n.colStatus, data.status_label) +
        userAttachMetaItem(UserAttachmentsPageI18n.colTime, data.created_at_str) +
        userAttachMetaItem(UserAttachmentsPageI18n.colUpdated, data.updated_at_str) +
        userAttachMetaItem(UserAttachmentsPageI18n.colRemoteId, data.remote_file_id) +
        userAttachMetaItem(UserAttachmentsPageI18n.colDetailSlug, data.detail_slug) +
        userAttachMetaItem(UserAttachmentsPageI18n.colSize, data.size_human) +
        userAttachMetaItem(UserAttachmentsPageI18n.colGroup, data.group_name || '—')
    );
    $('#userAttachmentDetailUrls').html(
        userAttachUrlBlock(UserAttachmentsPageI18n.colEmbedUrl, data.embed_url) +
        userAttachUrlBlock(UserAttachmentsPageI18n.colExternalUrl, data.external_link) +
        userAttachUrlBlock(UserAttachmentsPageI18n.colDirectUrl, data.direct_link) +
        userAttachUrlBlock(UserAttachmentsPageI18n.colThumbUrl, data.thumb_url || data.preview_url)
    );

    var openUrl = String(data.open_url || '').trim();
    if (openUrl) {
        $('#userAttachmentDetailOpenBtn').removeClass('d-none').attr('href', openUrl);
    } else {
        $('#userAttachmentDetailOpenBtn').addClass('d-none').attr('href', '#');
    }
    if (data.is_image_flag && data.open_url) {
        $('#userAttachmentDetailPreviewBtn').removeClass('d-none').data('attachId', data.id).data('previewKind', 'image');
    } else if (data.is_video_flag && (data.open_url || data.attach_key)) {
        $('#userAttachmentDetailPreviewBtn')
            .removeClass('d-none')
            .data('attachId', data.id)
            .data('previewKind', 'video')
            .text(UserAttachmentsPageI18n.previewVideo);
    } else {
        $('#userAttachmentDetailPreviewBtn').addClass('d-none').removeData('attachId').removeData('previewKind').text(UserAttachmentsPageI18n.preview);
    }
    $('#userAttachmentDetailLoading').addClass('d-none');
    $('#userAttachmentDetailContent').removeClass('d-none');
}

function showUserAttachmentDetail(id) {
    id = parseInt(id, 10) || 0;
    if (id <= 0) return;
    initUserAttachmentDetailModal();
    if (!userAttachmentDetailModal) {
        BootstrapModal.msg(UserAttachmentsPageI18n.loadFailed, {icon: 2});
        return;
    }
    $('#userAttachmentDetailLoading').removeClass('d-none');
    $('#userAttachmentDetailContent').addClass('d-none');
    $('#userAttachmentDetailOpenBtn').addClass('d-none');
    $('#userAttachmentDetailPreviewBtn').addClass('d-none');
    userAttachmentDetailModal.show();

    if (userAttachmentDetailCache[id]) {
        renderUserAttachmentDetail(userAttachmentDetailCache[id]);
        return;
    }

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

$(function() {
    var $selAll = $('#checkAllUserAttachments');
    var $rowChecks = $('.user-attach-row-check');
    var $selectedCount = $('#userAttachmentsSelectedCount');
    var $batchBar = $('#userAttachmentsBatchBar');

    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;
    }

    function getSelectedAttachKeys() {
        var keys = [];
        $rowChecks.filter(':checked').each(function() {
            var key = String($(this).closest('tr').attr('data-attach-key') || '').trim();
            if (key) keys.push(key);
        });
        return keys;
    }

    function buildUserAttachGroupOptions() {
        var options = [{value: '0', label: UserAttachmentsPageI18n.groupUngrouped}];
        (UserAttachmentsPageConfig.groups || []).forEach(function(g) {
            var id = parseInt(g.id, 10) || 0;
            if (!id) return;
            options.push({value: String(id), label: String(g.name || '')});
        });
        return options;
    }

    $('#btnUserAttachmentsBatchMoveGroup').on('click', function() {
        if (!UserAttachmentsPageConfig.groupTableReady) return;
        var keys = getSelectedAttachKeys();
        if (keys.length === 0) {
            BootstrapModal.msg(UserAttachmentsPageI18n.selectFirst, {icon: 2});
            return;
        }
        if (!window.BootstrapModal || !BootstrapModal.openForm) return;
        BootstrapModal.openForm({
            title: UserAttachmentsPageI18n.bulkMoveGroupTitle,
            icon: 'bx bx-folder',
            okText: UserAttachmentsPageI18n.groupAssign,
            cancelText: UserAttachmentsPageI18n.btnCancel,
            fields: [{
                name: 'group_id',
                label: UserAttachmentsPageI18n.bulkMoveGroupLabel,
                type: 'select',
                value: '0',
                options: buildUserAttachGroupOptions()
            }]
        }).then(function(data) {
            if (!data) return;
            var groupId = parseInt(data.group_id, 10);
            if (isNaN(groupId)) groupId = 0;
            $.ajax({
                url: '/api/user/attach/assign-group-batch',
                method: 'POST',
                contentType: 'application/json; charset=UTF-8',
                data: JSON.stringify({attach_keys: keys, group_id: groupId}),
                dataType: 'json',
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            }).done(function(res) {
                if (res && res.success) {
                    BootstrapModal.msg(res.message || UserAttachmentsPageI18n.groupAssignOk, {icon: 1, time: 1200});
                    setTimeout(function() { location.reload(); }, 1200);
                } else {
                    BootstrapModal.msg((res && res.message) || UserAttachmentsPageI18n.groupAssignFail, {icon: 2});
                }
            }).fail(function(xhr) {
                BootstrapModal.msg((xhr.responseJSON && xhr.responseJSON.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            });
        });
    });

    $selAll.on('change', function() {
        $rowChecks.prop('checked', this.checked);
        updateBulkState();
    });
    $(document).on('change', '.user-attach-row-check', updateBulkState);
    $('#btnUserAttachmentsClearSelection').on('click', clearSelection);

    $('#btnUserAttachmentsDeleteUnreferenced').on('click', function() {
        var count = parseInt('{{.Data.StatsUnreferenced}}', 10) || 0;
        if (count <= 0) {
            BootstrapModal.msg(UserAttachmentsPageI18n.noUnreferenced, {icon: 0});
            return;
        }
        BootstrapModal.confirm(
            userAttachI18n(UserAttachmentsPageI18n.deleteUnreferencedConfirm, {count: count}) +
            '<br><span class="text-danger">' + UserAttachmentsPageI18n.deleteUnreferencedWarn + '</span>',
            {
                icon: 3,
                title: UserAttachmentsPageI18n.confirmDeleteUnreferenced,
                btn: [UserAttachmentsPageI18n.btnDelete, UserAttachmentsPageI18n.btnCancel]
            },
            function(index) {
                BootstrapModal.close(index);
                $.ajax({
                    url: '/user/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 || UserAttachmentsPageI18n.deletedOk, {icon: 1, time: 1200});
                            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 || UserAttachmentsPageI18n.deleteFailed, {icon: 2});
                        }
                    },
                    error: function() {
                        BootstrapModal.msg(UserAttachmentsPageI18n.requestFailed, {icon: 2});
                    }
                });
            }
        );
    });

    $('#btnUserAttachmentsBatchDelete').on('click', function() {
        var ids = getSelectedIds();
        if (ids.length === 0) {
            BootstrapModal.msg(UserAttachmentsPageI18n.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 ? userAttachI18n(UserAttachmentsPageI18n.andMore, {count: names.length}) : '';

        BootstrapModal.confirm(
            userAttachI18n(UserAttachmentsPageI18n.batchDeleteConfirm, {count: ids.length}) +
            '<br><span class="text-danger">' + UserAttachmentsPageI18n.batchDeleteWarn + '</span>' +
            '<br><small class="text-muted">' + nameList + moreText + '</small>',
            {
                icon: 3,
                title: UserAttachmentsPageI18n.confirmBatchDelete,
                btn: [UserAttachmentsPageI18n.btnDelete, UserAttachmentsPageI18n.btnCancel]
            },
            function(index) {
                BootstrapModal.close(index);
                $.ajax({
                    url: '/user/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 || UserAttachmentsPageI18n.deletedOk, {icon: 1, time: 1200});
                            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 || UserAttachmentsPageI18n.deleteFailed, {icon: 2});
                        }
                    },
                    error: function() {
                        BootstrapModal.msg(UserAttachmentsPageI18n.requestFailed, {icon: 2});
                    }
                });
            }
        );
    });

    syncUserAttachViewerImages();
    applyUserAttachmentThumbUrls();

    $(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() {
                BootstrapModal.msg(UserAttachmentsPageI18n.copied, {icon: 1, time: 1500});
            });
            return;
        }
        var $tmp = $('<textarea readonly/>').val(text).appendTo('body').select();
        try {
            document.execCommand('copy');
            BootstrapModal.msg(UserAttachmentsPageI18n.copied, {icon: 1, time: 1500});
        } catch (e) {}
        $tmp.remove();
    });

    initUserAttachmentDetailModal();

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

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

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

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

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

    $(document).on('click', '.user-attach-row .user-attach-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('.user-attach-row').attr('data-full-url') || '').trim();
        if (openUrl) window.open(openUrl, '_blank', 'noopener,noreferrer');
    });

    $('#userAttachmentDetailPreviewBtn').on('click', function() {
        var id = $(this).data('attachId');
        var kind = String($(this).data('previewKind') || 'image');
        var $row = $('.user-attach-row[data-id="' + id + '"]');
        if (!$row.length) return;
        if (kind === 'video') {
            previewUserAttachVideo($row);
            return;
        }
        previewUserAttachImage($row);
    });

    updateBulkState();

    function reloadAttachmentsPage() {
        window.location.reload();
    }

    var openUserAttachGroupMenuId = 0;

    function closeUserAttachGroupDropdown() {
        openUserAttachGroupMenuId = 0;
        $('.user-attachments-group-dropdown').remove();
        $(document).off('mousedown.userAttachGroupMenu');
    }

    function positionUserAttachGroupDropdown($drop, $btn) {
        if (!$drop || !$drop.length || !$btn || !$btn.length) return;
        var rect = $btn[0].getBoundingClientRect();
        $drop.css({
            top: (rect.bottom + 4) + 'px',
            left: Math.max(8, rect.left - 48) + 'px'
        });
    }

    function bindUserAttachGroupDropdownDismiss() {
        setTimeout(function() {
            $(document).on('mousedown.userAttachGroupMenu', function(e) {
                if ($(e.target).closest('.user-attachments-group-dropdown, .user-attachments-group-chip__menu').length) return;
                closeUserAttachGroupDropdown();
            });
        }, 0);
    }

    function editUserAttachGroup(groupId, groupName) {
        if (!groupId || !window.BootstrapModal || !BootstrapModal.prompt) return;
        BootstrapModal.prompt({
            title: UserAttachmentsPageI18n.groupEdit,
            icon: 'bx bx-edit',
            label: UserAttachmentsPageI18n.groupName,
            value: groupName,
            cancelText: UserAttachmentsPageI18n.btnCancel,
            okText: UserAttachmentsPageI18n.btnSave
        }, function(value) {
            if (!value) return;
            $.ajax({
                url: '/api/user/attach/group/update',
                method: 'POST',
                contentType: 'application/json; charset=UTF-8',
                data: JSON.stringify({ id: groupId, name: value, sort_order: 0 })
            }).done(function(res) {
                if (res && res.success) reloadAttachmentsPage();
                else BootstrapModal.msg((res && res.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            }).fail(function(xhr) {
                BootstrapModal.msg((xhr.responseJSON && xhr.responseJSON.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            });
        });
    }

    function deleteUserAttachGroup(groupId, groupName) {
        if (!groupId || !window.BootstrapModal || !BootstrapModal.confirm) return;
        BootstrapModal.confirm(userAttachI18n(UserAttachmentsPageI18n.groupDeleteConfirm, {name: groupName}), {
            icon: 3,
            title: UserAttachmentsPageI18n.groupDelete,
            btn: [UserAttachmentsPageI18n.btnDelete, UserAttachmentsPageI18n.btnCancel]
        }, function(ok) {
            if (!ok) return;
            $.ajax({
                url: '/api/user/attach/group/delete',
                method: 'POST',
                contentType: 'application/json; charset=UTF-8',
                data: JSON.stringify({ id: groupId })
            }).done(function(res) {
                if (res && res.success) reloadAttachmentsPage();
                else BootstrapModal.msg((res && res.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            }).fail(function(xhr) {
                BootstrapModal.msg((xhr.responseJSON && xhr.responseJSON.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            });
        });
    }

    function openUserAttachGroupMenu($btn, groupId, groupName) {
        closeUserAttachGroupDropdown();
        if (!groupId) return;
        openUserAttachGroupMenuId = groupId;
        var $drop = $('<div class="user-attachments-group-dropdown"/>').attr('data-group-menu-id', groupId);
        $drop.append($('<button type="button"/>')
            .append($('<i class="bx bx-edit" aria-hidden="true"></i>'))
            .append($('<span/>').text(UserAttachmentsPageI18n.groupEdit))
            .on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            closeUserAttachGroupDropdown();
            editUserAttachGroup(groupId, groupName);
        }));
        $drop.append($('<button type="button" class="is-danger"/>')
            .append($('<i class="bx bx-trash" aria-hidden="true"></i>'))
            .append($('<span/>').text(UserAttachmentsPageI18n.groupDelete))
            .on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            closeUserAttachGroupDropdown();
            deleteUserAttachGroup(groupId, groupName);
        }));
        $('body').append($drop);
        positionUserAttachGroupDropdown($drop, $btn);
        bindUserAttachGroupDropdownDismiss();
    }

    $('#btnUserAttachGroupAdd').on('click', function() {
        if (!window.BootstrapModal || !BootstrapModal.prompt) return;
        BootstrapModal.prompt({
            title: UserAttachmentsPageI18n.groupAdd,
            icon: 'bx bx-folder-plus',
            label: UserAttachmentsPageI18n.groupName,
            placeholder: UserAttachmentsPageI18n.groupNamePlaceholder,
            value: '',
            cancelText: UserAttachmentsPageI18n.btnCancel,
            okText: UserAttachmentsPageI18n.btnSave
        }, function(value) {
            if (!value) return;
            $.ajax({
                url: '/api/user/attach/group/create',
                method: 'POST',
                contentType: 'application/json; charset=UTF-8',
                data: JSON.stringify({
                    name: value,
                    project_id: 0,
                    sort_order: $('#userAttachmentsGroupsBar .user-attachments-group-chip[data-group-id]').length
                })
            }).done(function(res) {
                if (res && res.success) reloadAttachmentsPage();
                else BootstrapModal.msg((res && res.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            }).fail(function(xhr) {
                BootstrapModal.msg((xhr.responseJSON && xhr.responseJSON.message) || UserAttachmentsPageI18n.requestFailed, {icon: 2});
            });
        });
    });

    $('#userAttachmentsGroupsBar').on('click', '.user-attachments-group-chip__menu', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $chip = $(this).closest('.user-attachments-group-chip');
        var groupId = parseInt($chip.data('groupId'), 10) || 0;
        var groupName = String($chip.data('groupName') || '');
        if (!groupId) return;
        if (openUserAttachGroupMenuId === groupId && $('.user-attachments-group-dropdown').length) {
            closeUserAttachGroupDropdown();
            return;
        }
        openUserAttachGroupMenu($(this), groupId, groupName);
    });
});
</script>
{{end}}