/ app/views/research_documents/index.html.slim
.container-fluid
  .row
    .col-md-3
      = render partial: "respondent_categories/sidebar"
    .col-md-9
      = render_breadcrumbs([                                                            \
          { name: 'Home', path: projects_path },                                        \
          { name: @project.title, path: project_path(@project) },                       \
          { name: @respondent_category.name, path: [@project, @respondent_category] },  \
          { name: "Documents"  }                                                        \
        ])

      .research-documents-page
        .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

          = form_tag project_respondent_category_research_documents_path(@project, @respondent_category), multipart: true, class: "d-flex align-items-center gap-2" do
            label.upload-btn.mb-0 for="document-upload"
              = lucide_icon "upload", size: 16
              span Upload Document
            = file_field_tag "research_document[document]", id: "document-upload", class: "d-none", onchange: "this.form.submit()"

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