.research-documents-page data-controller="research-documents"
  .page-header.d-flex.justify-content-between.align-items-center.mb-4.flex-wrap.gap-3
    div
      h2.fw-bold.mb-1 Research Documents
      p.text-muted.mb-0 = @respondent_category.name

    button.upload-btn.mb-0 type="button" data-bs-toggle="modal" data-bs-target="#upload-doc-modal"
      = lucide_icon "upload", size: 16
      span Upload Document

  - if @research_documents.empty?
    .empty-state.text-center.py-5
      = lucide_icon "folder-open", size: 56
      p.text-muted.mt-3.mb-0 No documents uploaded yet.

  - else
    .row.g-4
      - @research_documents.each do |doc|
        .col-12.col-sm-6.col-lg-4.col-xl-3
          .card.h-100.document-card
            .card-body.d-flex.flex-column
              .d-flex.align-items-start.mb-3
                .file-icon-wrap.me-3
                  = lucide_icon doc.icon_name, size: 22
                .flex-grow-1.overflow-hidden
                  h6.mb-1.text-truncate title=doc.document_file_name = doc.document_file_name
                  .d-flex.align-items-center.gap-2
                    span.file-ext-badge = doc.extension.upcase

                    - if doc.discussion_guide?
                      span.guide-badge Guide
                      
                    small.text-muted = doc.human_size
                  small.text-muted.d-block.mt-1 = doc.created_at.strftime("%b %d, %Y")

              .mt-auto.d-flex.justify-content-end.gap-2.pt-3.card-actions
                button.action-btn type="button" data-bs-toggle="modal" data-bs-target="#edit-doc-modal" data-action="click->research-documents#openEdit" data-research-documents-url-param=project_respondent_category_research_document_path(@project, @respondent_category, doc) data-research-documents-guide-param=doc.discussion_guide.to_s title="Edit" aria-label="Edit document"
                  = lucide_icon "pencil", size: 17
                - if doc.viewable?
                  button.action-btn.action-btn-view type="button" data-bs-toggle="modal" data-bs-target="#doc-modal-#{doc.id}" title="View" aria-label="View document"
                    = lucide_icon "eye", size: 17
                a.action-btn href=doc.document.url download=doc.document_file_name title="Download" aria-label="Download document"
                  = lucide_icon "download", size: 17
                = button_to project_respondent_category_research_document_path(@project, @respondent_category, doc), method: :delete, form: { data: { turbo_confirm: "Delete this document?" }, class: "action-form" }, class: "action-btn action-btn-danger", title: "Delete", aria: { label: "Delete document" } do
                  = lucide_icon "trash-2", size: 17

        - if doc.viewable?
          .modal.fade.doc-preview-modal id="doc-modal-#{doc.id}" tabindex="-1"
            .modal-dialog.modal-dialog-centered.modal-xl
              .modal-content
                .modal-header
                  .d-flex.align-items-center.gap-2
                    .modal-header-icon
                      = lucide_icon doc.icon_name, size: 20
                    h5.modal-title.text-truncate.mb-0 = doc.document_file_name
                  button.btn-close type="button" data-bs-dismiss="modal"

                .modal-body.text-center.preview-body
                  - if doc.viewable_type == :pdf
                    iframe.preview-frame src=doc.document.url
                  - elsif doc.viewable_type == :text
                    iframe.preview-frame.text-preview src=doc.document.url

                .modal-footer
                  a.btn.btn-primary.d-flex.align-items-center.gap-1 href=doc.document.url download=doc.document_file_name
                    = lucide_icon "download", size: 16
                    span Download
                  button.btn.btn-secondary type="button" data-bs-dismiss="modal" Close

  .modal.fade id="edit-doc-modal" tabindex="-1" aria-hidden="true"
    .modal-dialog.modal-dialog-centered
      .modal-content
        = form_with url: "", method: :patch, local: true, data: { research_documents_target: "form" } do |f|
          .modal-header
            h5.modal-title Edit Document
            button.btn-close type="button" data-bs-dismiss="modal" aria-label="Close"
          .modal-body
            .form-check
              = check_box_tag "research_document[discussion_guide]", "1", false, class: "form-check-input", id: "edit-discussion-guide-global", data: { research_documents_target: "checkbox" }
              label.form-check-label.fs-14 for="edit-discussion-guide-global"
                | Mark as Discussion Guide
              .form-text.text-muted.fs-12
                | Note: Only one discussion guide is allowed per sub-project. Checking this will unmark any existing guide.
          .modal-footer
            button.btn.btn-light type="button" data-bs-dismiss="modal" Cancel
            button.btn.btn-primary type="submit" Save Changes

  .modal.fade id="upload-doc-modal" tabindex="-1" aria-hidden="true"
    .modal-dialog.modal-dialog-centered
      .modal-content
        = form_tag project_respondent_category_research_documents_path(@project, @respondent_category), multipart: true do
          .modal-header
            h5.modal-title Upload Document
            button.btn-close type="button" data-bs-dismiss="modal" aria-label="Close"
          .modal-body
            .mb-3
              label.form-label.fs-14.medium for="document-upload" Select File
              = file_field_tag "research_document[document]", id: "document-upload", class: "form-control", required: true
            .form-check
              = check_box_tag "research_document[discussion_guide]", "1", false, class: "form-check-input", id: "discussion-guide-check"
              label.form-check-label.fs-14 for="discussion-guide-check"
                | Mark as Discussion Guide
              .form-text.text-muted.fs-12
                | Note: Only one discussion guide is allowed per sub-project. Checking this will unmark any existing guide.
          .modal-footer
            button.btn.btn-light type="button" data-bs-dismiss="modal" Cancel
            button.btn.btn-primary type="submit" Upload