- content_for :head do
  meta name="turbo-cache-control" content="no-cache"

.container#projectsIndex v-cloak="" data-controller="projects"
  header.fs-24.semi-bold.mb-3
    | All Projects

  .row.g-2.mb-4
    .col-5
      .input-group
        span class="input-group-text bg-white"
          i.feather-14 data-feather="search" style="color: #BEBEBE;"
        input type="text" class="form-control index-input border-start-0" placeholder="Search for projects, clients, brands, categories" v-model="filterQuery"
    .col v-show="isAdmin == true"
      select.form-select.index-select v-model="selectedOrganization"
        option selected="selected" disabled="disabled" value="" Organizations
        option.index-select-option value="All Organizations" All Organizations
        option.index-select-option v-for="org in organizations" :value="org.id" {{ org.name }}
    .col
      select.form-select.index-select v-model="selectedClient"
        option selected="selected" disabled="disabled" value="" Clients
        option.index-select-option value="All Clients" All Clients
        option.index-select-option v-for="client in clients" :value="client" {{ client }}
    .col
      select.form-select.index-select v-model="selectedBrand"
        option selected="selected" disabled="disabled" value="" Brands
        option.index-select-option value="All Brands" All Brands
        option.index-select-option v-for="brand in brands" :value="brand" {{ brand }}
    .col.d-flex.align-items-center
      select.form-select.index-select v-model="selectedCategory"
        option selected="selected" disabled="disabled" value="" Categories
        option.index-select-option value="All Categories" All Categories
        option.index-select-option v-for="category in categories" :value="category" {{ category }}
      div v-if="isFilterActive != false" @click="clearFilters()"
        vue-feather type="x-square" size="16" class="mt-1 ms-3" style="color: black;"
      div v-if="isFilterActive == false"
        vue-feather type="filter" size="16" class="mt-1 ms-3" style="color: black;"


  .row.row-cols-md-5.row-cols-2
    - unless @sample_project.nil?
      .col.mb-5
        = render partial: "projects/thumbnail", locals: { project: @sample_project }

    .col
      = link_to new_project_path, class: "rounded-3 d-flex flex-column align-items-center justify-content-center text-black text-decoration-none modal-trigger", style: "aspect-ratio: 1; height: auto; background-color: #F9FAFB;", data: { turbo_frame: "modal_frame" }
        i.feather-48.text-primary data-feather="plus"
        .fs-20.semi-bold.text-primary Add Project

    .col.mb-5 v-for="project in filteredProjects"
      a :href="'projects/' + project.id" style="text-decoration: none;"
        div style="position: relative"
          img :src="project.image_url" class="w-100 mb-2 rounded-3 img-fluid project-img-list" style="aspect-ratio: 1;"
          div class="w-100 mb-2 rounded-3 img-fluid project-img-list opacity-50" style="aspect-ratio: 1; position: absolute; top: 0; left: 0;" :style="{ 'background-color': project.random_sprint_color }"
      .project-thumbnail-title.semi-bold
        .d-flex.justify-content-between
            a.fs-16 :href="'projects/' + project.id" style="color: black; text-decoration: none;" {{ project.title }}
            a.fs-16 :href="'projects/' + project.id + '/edit'" class="ms-3 modal-trigger" :data-turbo-frame="'modal_frame'"
              vue-feather type="edit-2" size="16" class="mt-1" style="color: black;"
      .project-thumbnail-details
        .fs-14
          | {{ project.client || 'No Client' }}
        .fs-12
          | {{ project.brand || 'No Brand' }} : {{ project.category || 'No Category' }}
        .fs-12
          | {{ new Date(project.created_at).toLocaleDateString('en-GB') }}
    
    / - @projects.order(:created_at).reverse_order.each do |project|
    /   .col.mb-5
    /     = render partial: "projects/thumbnail", locals: { project: }