.container-fluid#reportsPage v-cloak="" data-controller="reports"
  .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: "Reports", path: insight_reports_project_respondent_category_path(@project, @respondent_category) }, \
          { name: @insights_report.name }                                                                       \
        ])
      .fs-16.semi-bold.mb-4
        = @insights_report.name

      .d-flex.justify-content-between
        .fs-24 
          | Insight Reports / Summaries
        
        .d-flex.mb-2.flex-wrap.gap-2
          = button_to delete_report_project_respondent_category_insights_report_path(@project, @respondent_category, @insights_report), method: :delete, data: { turbo: false, turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: "btn btn-danger fs-12" do
            i.feather-14 data-feather="trash-2"

          = link_to csv_project_respondent_category_insights_report_path(@project, @respondent_category, @insights_report), class: "btn btn-success fs-12", target: "_blank" do
            i.bi.bi-file-earmark-excel.me-2.fs-10
            = t(:download)

          button.btn.btn-secondary.fs-12[
            :class="{ active: isAnalysisView }"
            @click="toggleView(tableViews.ANALYSIS)"
          ] {{ isAnalysisView ? 'Toggle to Raw Grid' : 'Toggle to Summary Grid' }}

          button.btn.btn-primary.fs-12[
            :class="{ active: isAggregateView }"
            @click="toggleView(tableViews.AGGREGATE)"
          ] {{ isAggregateView ? 'Hide Aggregate Summary' : 'View Aggregate Summary' }}
     
      
      .reports-container
        .reports-table v-show="isRawView" ref="rawTable"
          table.table-striped.table.table-bordered.table-responsive
            thead.fs-12
              tr
                th
                  |  Question
                - respondents = Respondent.includes(:project, :respondent_category, :tags, :interview_insights => [respondent: [:whisper_transcript]]).joins(:interview_insights).where(interview_insights: { insights_report_id: @insights_report.id }).distinct
                - respondents.each do |respondent|
                  th.p-4 style="min-width: 300px;"
                    = link_to respondent.name, [respondent.project, respondent.respondent_category, respondent], target: "_blank"
                    - unless respondent.tags.empty? 
                      .d-flex.flex-wrap.gap-1.mt-1
                        - respondent.tags.includes(:tag_category).each do |tag|
                          span.badge.bg-secondary.me-2.text-black.fs-10
                            = tag.tag_category.name
                            |: 
                            = tag.name
            tbody.fs-12
              - @insights_report.interview_insights.collect(&:interview_question).uniq.each do |question|
                tr
                  td= question.question
                  - respondents.each do |r|
                    - i = r.interview_insights.select { |x| x.interview_question_id == question.id && x.insights_report_id == @insights_report.id }.last
                    td
                      - if i
                        .less-content
                          = i.cleaned_sources.join("<br/><br/>")&.gsub("\n","<br/>")&.html_safe rescue ""
                        - if i.transcript_index
                          button.btn.btn-clear.show-less style="display: none;"
                            i class="bi bi-arrow-up-right-circle-fill"
                          button.btn.btn-clear.show-more
                            i class="bi bi-arrow-down-left-circle-fill"
                          div.more-content style="display: none;"
                            = i.surrounding_transcript.gsub("\n", "<br/>").html_safe rescue ""

        .reports-table v-show="isAnalysisView" ref="analysisTable"
          table.table-striped.table.table-bordered.table-responsive
            thead.fs-12
              tr
                th
                  button.btn.btn-sm.btn-outline-primary.py-1.px-2.fs-12[
                    @click="toggleAllInTable"
                    style="width: fit-content; min-height: 22px; line-height: 1.2"
                  ]
                    vue-feather.mt-1[
                      :type="tableExpanded ? 'minimize-2' : 'maximize-2'"
                      size="16"
                    ]
                - respondents = Respondent.includes(:project, :respondent_category, :tags, :interview_insights => [respondent: [:whisper_transcript]]).joins(:interview_insights).where(interview_insights: { insights_report_id: @insights_report.id }).distinct
                - respondents.each do |respondent|
                  th.p-4 style="min-width: 300px;"
                    = link_to respondent.name, [respondent.project, respondent.respondent_category, respondent], target: "_blank"
                    - unless respondent.tags.empty? 
                      .d-flex.flex-wrap.gap-1.mt-1
                        - respondent.tags.includes(:tag_category).each do |tag|
                          span.badge.bg-secondary.me-2.text-black.fs-10
                            = tag.tag_category.name
                            |: 
                            = tag.name
            tbody.fs-12
              - @insights_report.interview_insights.collect(&:interview_question).uniq.each do |question|
                tr
                  td.p-4.align-top.semi-bold 
                    expandable-row[
                      :section-name="'#{question.question.gsub("'", "")}'"
                      :section-id="'#{question.id}'"
                      :parent-expanded="tableExpanded"
                      @toggle-row="expanded => toggleRowExpansion('#{question.id}', expanded)"
                    ]
                  - respondents.each do |r|
                    - i = r.interview_insights.select { |x| x.interview_question_id == question.id && x.insights_report_id == @insights_report.id }.last
                    td
                      - if i
                        expandable-text(
                          :text="#{i.ai_summary_markdown.to_json}"
                          :force-expanded="getRowExpansionState('#{question.id}')"
                          @expansion-changed="expanded => handleCellExpansion('#{question.id}')"
                        )
                      - else
                        .text-muted.fst-italic
                          | No Data Found


        .reports-table v-show="isAggregateView" ref="aggregateTable"
          table.table-striped.table.table-bordered.table-responsive
            thead.fs-12
              tr
                th
                  button.btn.btn-sm.btn-outline-primary.py-1.px-2.fs-12[
                    @click="toggleAllInTable"
                    style="width: fit-content; min-height: 22px; line-height: 1.2"
                  ]
                    vue-feather.mt-1[
                      :type="tableExpanded ? 'minimize-2' : 'maximize-2'"
                      size="16"
                    ]
                th.p-4 Summary
            tbody.fs-12 
              - @insights_report.interview_insights.collect{|x|x.interview_question}.uniq.each do |question|
                tr
                  td.p-4.align-top.semi-bold 
                    expandable-row[
                      :section-name="'#{question.question.gsub("'", "")}'"
                      :section-id="'#{question.id}'"
                      :parent-expanded="tableExpanded"
                      @toggle-row="expanded => toggleRowExpansion('#{question.id}', expanded)"
                    ]
                  td.align-top.p-4
                    - summary = InsightSummary.find_by(interview_question_id: question.id, insights_report_id: @insights_report.id)&.summary_markdown.to_json
                    expandable-text(
                      :text="#{summary}"
                      :force-expanded="getRowExpansionState('#{question.id}')"
                      @expansion-changed="expanded => handleCellExpansion('#{question.id}')"
                    )