- content_for(:main_navigation) do
  = render 'administrateurs/main_navigation'

- content_for :content do
  .fr-container
    %h1.fr-my-4w Toutes les démarches

    .fr-container--fluid
      .fr-grid-row.fr-grid-row--gutters
        .fr-col-8
          .fr-highlight.fr-mb-4w
            %p Ce tableau de bord permet de consulter les informations sur les démarches simplifiées pour toutes les zones. Filtrez par zone et statut. Consultez la liste des démarches et cliquez sur une démarche pour voir la zone et quels sont les administrateurs.

    .fr-container--fluid{ data: { turbo: 'true' } }
      %turbo-frame#procedures.fr-grid-row.fr-grid-row--gutters{ 'data-turbo-action': 'advance' }
        .fr-col-3
          = form_with(url: all_admin_procedures_path, method: :get, data: { controller: 'autosubmit', turbo_frame: 'procedures' }) do |f|

            %fieldset.sidebar-filter
              %legend
                .title.font-weight-bold.fr-pl-2w
                  %span.fr-icon-filter-fill.fr-icon--sm.fr-mr-1w{ 'aria-hidden': 'true' }
                  Filtrer
                .reinit
                  = link_to all_admin_procedures_path(zone_ids: current_administrateur.zones), { data: { turbo: 'false' } } do
                    %span.fr-icon-arrow-go-back-line Réinitialiser
              %ul
                %li.fr-py-2w.fr-pl-2w{ 'data-controller': "expand" }
                  .fr-mb-1w
                    %button{ 'data-action': 'expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Mes zones
                  .fr-ml-1w{ 'data-expand-target': 'content' }
                    = f.collection_check_boxes :zone_ids, @filter.admin_zones, :id, :current_label, include_hidden: false do |b|
                      .fr-checkbox-group.fr-ml-2w.fr-py-1w
                        = b.check_box(checked: @filter.zone_filtered?(b.value))
                        = b.label(class: 'fr-label') { b.text }
                %li.fr-py-2w.fr-pl-2w{ 'data-controller': "expand" }
                  .fr-mb-1w
                    %button{ 'data-action': 'expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Autres zones
                  .fr-ml-1w.hidden{ 'data-expand-target': 'content' }
                    = f.collection_check_boxes :zone_ids, @filter.other_zones, :id, :current_label, include_hidden: false do |b|
                      .fr-checkbox-group.fr-ml-2w.fr-py-1w
                        = b.check_box(checked: @filter.zone_filtered?(b.value))
                        = b.label(class: 'fr-label') { b.text }
                %li.fr-py-2w.fr-pl-2w{ 'data-controller': "expand" }
                  .fr-mb-1w
                    %button{ 'data-action': 'expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Service
                  .fr-ml-1w.hidden{ 'data-expand-target': 'content' }
                    %div
                      = f.text_field :service_siret, placeholder: 'Indiquez le SIRET', class: 'fr-input'
                %li.fr-py-2w.fr-pl-2w{ 'data-controller': "expand" }
                  .fr-mb-1w
                    %button{ 'data-action': 'expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Département
                  .fr-ml-1w.hidden{ 'data-expand-target': 'content' }
                    %div
                      = f.select :service_departement,
                        APIGeoService.departements.map { ["#{_1[:code]} – #{_1[:name]}", _1[:code]] },
                        { selected: @filter.service_departement, include_blank: ''},
                        id: "service_dep_select",
                        class: 'fr-select'
                %li.fr-py-2w{ 'data-controller': "expand" }
                  .fr-mb-1w.fr-pl-2w
                    %button{ 'data-action': 'click->expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Date de publication
                  .fr-input-group.hidden{ 'data-expand-target': 'content' }
                    = f.label 'from_publication_date', 'Depuis', class: 'fr-label'
                    .fr-input-wrap.fr-fi-calendar-line
                      = f.date_field 'from_publication_date', value: @filter.from_publication_date, class: 'fr-input'

                %li.fr-py-2w.fr-pl-2w{ 'data-controller': "expand" }
                  .fr-mb-1w
                    %button{ 'data-action': 'expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Statut
                  .fr-ml-1w.hidden{ 'data-expand-target': 'content' }
                    = f.collection_check_boxes :statuses, ['publiee', 'close'], :to_s, :to_s, include_hidden: false do |b|
                      .fr-checkbox-group.fr-ml-2w.fr-py-1w
                        = b.check_box(checked: @filter.status_filtered?(b.value))
                        = b.label(class: 'fr-label') { t b.text, scope: 'activerecord.attributes.procedure.aasm_state' }

                %li.fr-py-2w.fr-pl-2w{ 'data-controller': "expand" }
                  .fr-mb-1w
                    %button{ 'data-action': 'expand#toggle' }
                      %span.fr-icon-add-line.fr-icon--sm.fr-mr-1w.fr-text-action-high--blue-france{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
                      Tags
                  .fr-ml-1w.hidden{ 'data-expand-target': 'content' }
                    %div
                      = f.search_field :tags, placeholder: 'Choisissez un tag', list: 'tags_list', class: 'fr-input', data: { no_autosubmit: 'input', turbo_force: :server }, multiple: true
                      %datalist#tags_list
                        - Procedure.tags.each do |tag|
                          %option{ value: tag }
                      - if @filter.tags.present?
                        - @filter.tags.each do |tag|
                          = f.hidden_field :tags, value: tag, multiple: true, id: "tag-#{tag.tr(' ', '_')}"
        .fr-col-9
          = yield(:results)
= render template: 'layouts/application'