.container-fluid
  = render_breadcrumbs([ \
      { name: 'Home', path: projects_path }, \
      { name: 'Custom Assistants' } \
    ])

  .d-flex.justify-content-between.align-items-center.mb-4
    h3.fw-bold.mb-0.text-dark Custom Assistants
    
    button.btn.btn-outline-primary.white-hover-btn.rounded-pill.px-4.fw-semibold data-bs-toggle="modal" data-bs-target="#newAssistantModal"
      i.bi.bi-plus-lg.me-2
      | New Custom Assistant

  - if @assistants.empty?
    .text-center.p-5.bg-white.rounded-4.shadow-sm.border
      i.bi.bi-inboxes.text-muted.mb-3 style="font-size: 3rem;"
      h5.text-muted No custom assistants available yet.
      
  - else
    - if current_user.role == "admin"
      - @assistants.group_by(&:organization).each do |org, org_assistants|
        .mb-5
          h5.text-muted.fw-semibold.mb-3.border-bottom.pb-2
            i.bi.bi-building.me-2
            = org&.name || "Unknown Organization"
            
          .row.g-4
            - org_assistants.each do |assistant|
              .col-md-6.col-lg-4.col-xl-3
                = render "assistant_card", assistant: assistant

    - else
      .row.g-4
        - @assistants.each do |assistant|
          .col-md-6.col-lg-4.col-xl-3
            = render "assistant_card", assistant: assistant

  #newAssistantModal.modal.fade tabindex="-1" aria-hidden="true"
    .modal-dialog.modal-xl.modal-dialog-scrollable
      .modal-content.border-0.rounded-4.shadow-lg data-controller="custom-assistant"
        .modal-header.bg-light.border-bottom-0.rounded-top-4.p-4
          h4.modal-title.fw-bold.text-dark.mb-0
            i.bi.bi-robot.text-primary.me-2
            | Create Custom Assistant
          button.btn-close type="button" data-bs-dismiss="modal" aria-label="Close"
        
        .modal-body.p-4.p-md-5.bg-white
          form @submit.prevent="submitForm"
            .row.mb-5
              .col-md-6
                label.form-label.fw-bold.text-dark Name your Assistant
                input.form-control.form-control-lg.bg-light.border-0.shadow-none type="text" v-model="name" placeholder="e.g., Q3 Research Meta-Analysis" required=true
              
            .d-flex.align-items-end.justify-content-between.mb-3
              div
                h5.fw-bold.text-dark.mb-1 Select Scope
                p.small.text-muted.mb-0 Include entire projects or choose specific sub-projects.
              
              / Search Bar
              .position-relative style="width: 300px;"
                i.bi.bi-search.position-absolute.text-muted style="top: 50%; left: 1rem; transform: translateY(-50%);"
                input.form-control.bg-light.border-0.rounded-pill.shadow-none.ps-5 type="search" v-model="searchQuery" placeholder="Search projects..."
              
            / Loading State
            .text-center.py-5 v-if="loading"
              .spinner-border.text-primary role="status"
                span.visually-hidden Loading...
                
            / The Vue Tree Container
            .project-list-container v-else="" style="max-height: 50vh; overflow-y: auto; padding-right: 10px;"
              
              .text-center.py-5 v-if="filteredProjects.length === 0"
                i.bi.bi-search.text-muted.fs-1.mb-3.d-block
                p.text-muted No projects found matching "{{ searchQuery }}".
              
              / Distinct Project Cards (Added .overflow-hidden to fix corner clipping)
              .card.mb-3.border.rounded-4.shadow-sm.overflow-hidden v-for="project in filteredProjects" :key="project.id"
                
                / Swapped .card-header for a standard padded block
                .bg-white.p-4.d-flex.align-items-center.justify-content-between
                  .d-flex.align-items-center
                    input.form-check-input.cursor-pointer.me-3.mt-0 type="checkbox" :id="'project_' + project.id" :checked="isAllSelected(project)" :indeterminate.prop="isIndeterminate(project)" @change="toggleProject(project, $event)" style="width: 1.5rem; height: 1.5rem;"
                    label.form-check-label.fw-bold.text-dark.fs-5.cursor-pointer :for="'project_' + project.id"
                      | {{ project.title }}
                  
                  button.btn.btn-light.rounded-pill.px-3.fw-semibold.text-muted.d-flex.align-items-center type="button" data-bs-toggle="collapse" :data-bs-target="'#collapseProject_' + project.id"
                    | View Sub-projects
                    i.bi.bi-chevron-expand.ms-2
                
                .collapse :id="'collapseProject_' + project.id"
                  .bg-white.pt-0.pb-4.px-4
                    hr.mt-0.mb-4.text-light
                    span.small.text-muted.fst-italic v-if="project.categories.length === 0" No sub-projects available.
                    
                    / Flex-wrap pill grid for categories
                    .d-flex.flex-wrap.gap-2
                      div v-for="category in project.categories" :key="category.id"
                        input.btn-check type="checkbox" :id="'category_' + category.id" :value="category.id" v-model="selectedCategories"
                        
                        label.btn.btn-outline-primary.rounded-pill.px-3.py-2.fw-semibold :for="'category_' + category.id" :class="{ 'text-white': selectedCategories.includes(category.id) }"
                          | {{ category.name }}

        .modal-footer.bg-light.border-top-0.rounded-bottom-4.p-4
          button.btn.btn-link.text-muted.text-decoration-none.fw-semibold.me-3 type="button" data-bs-dismiss="modal" Cancel
          button.btn.btn-primary.rounded-pill.px-5.py-2.fw-bold @click="submitForm" :disabled="submitting"
            span.spinner-border.spinner-border-sm.me-2 v-if="submitting" role="status" aria-hidden="true"
            | {{ submitting ? 'Generating...' : 'Create Assistant' }}