Listing Header

<div class="listing-header flex gap-4 items-center">

    <div class="flex gap-2.5">

        <button class="btn btn-secondary-blue btn-secondary-blue--map hidden md:flex md:py-1.75">

            Voir sur la carte

        </button>

        <button x-cloak x-data="saveSearch()" @click="save()"

                class="btn btn-search-save px-2 md:px-3.75 py-1.75"

                :class="{

                    'btn-search-saved': isSaved,

                    'btn-search-save': !isSaved

                }"

        >

            <span x-ref="savedicon"

                  class="overflow-hidden w-0 opacity-0 hidden md:block transition-all duration-300"

                  :class="{

                    'w-5 opacity-100': isSaved,

                    'w-0 opacity-0 hidden md:block': !isSaved

                  }"

            ><?= icon('label-check-colored'); ?></span>

            <span class="hidden md:block">

                <span x-show="isSaved">Recherche sauvegardée</span>

                <span x-show="!isSaved">Sauvegarder ma recherche</span>

            </span>

            <span class="icon-btn">

                <?= icon('save-search'); ?>

            </span>

        </button>

        <script>

            function saveSearch() {

              return {

                isSaved: false,

                init() {

                  if(this.$root.classList.contains('btn-search-saved')) {

                    this.isSaved = true;

                  }

                },

                save() {

                  this.isSaved = !this.isSaved;

                }

              }

            }

        </script>

    </div>

    <div class="md:order-[-1] md:flex-1">

        <div class="font-semibold md:text-xl ">

            <span class="text-primary-accent">1 450</span> Peugeot d'occasion

        </div>

    </div>

    <div>

        <?php include renderTemplate('catalog/category/sort-by')?>

    </div>

</div>

<div class="listing-header flex gap-4 items-center">

    <div class="flex gap-2.5">

        <button class="btn btn-secondary-blue btn-secondary-blue--map hidden md:flex md:py-1.75">

            Voir sur la carte

        </button>

        <button x-cloak x-data="saveSearch()" @click="save()"

                class="btn btn-search-saved px-2 md:px-3.75 py-1.75"

                :class="{

                    'btn-search-saved': isSaved,

                    'btn-search-save': !isSaved

                }"

        >

            <span x-ref="savedicon"

                  class="overflow-hidden w-0 hidden md:block opacity-0 transition-all duration-300"

                  :class="{

                    'w-5 opacity-100': isSaved,

                    'w-0 opacity-0 hidden md:block': !isSaved

                  }"

            ><?= icon('label-check-colored'); ?></span>

            <span class="hidden md:block">

                <span x-show="isSaved">Recherche sauvegardée</span>

                <span x-show="!isSaved">Sauvegarder ma recherche</span>

            </span>

            <span class="icon-btn">

                <?= icon('save-search'); ?>

            </span>

        </button>

        <script>

          function saveSearch() {

            return {

              isSaved: false,

              init() {

                if(this.$root.classList.contains('btn-search-saved')) {

                  this.isSaved = true;

                }

              },

              save() {

                this.isSaved = !this.isSaved;

              }

            }

          }

        </script>

    </div>

    <div class="md:order-[-1] md:flex-1">

        <div class="font-semibold md:text-xl ">

            <span class="text-primary-accent">1 450</span> Peugeot d'occasion

        </div>

    </div>

    <div>

        <?php include renderTemplate('catalog/category/sort-by')?>

    </div>

</div>

<div class="listing-header flex flex-wrap gap-4 items-center justify-end">

    <div class="flex gap-2.5">

        <button x-cloak x-data="saveSearch()" @click="save()"

                class="btn btn-search-save px-2 md:px-3.75 py-1.75"

                :class="{

                    'btn-search-saved': isSaved,

                    'btn-search-save': !isSaved

                }"

        >

            <span x-ref="savedicon"

                  class="overflow-hidden w-0 opacity-0 hidden md:block transition-all duration-300"

                  :class="{

                    'w-5 opacity-100': isSaved,

                    'w-0 opacity-0 hidden md:block': !isSaved

                  }"

            ><?= icon('label-check-colored'); ?></span>

            <span class="hidden md:block">

                <span x-show="isSaved">Recherche sauvegardée</span>

                <span x-show="!isSaved">Sauvegarder ma recherche</span>

            </span>

            <span class="icon-btn">

                <?= icon('save-search'); ?>

            </span>

        </button>

        <script>

            function saveSearch() {

              return {

                isSaved: false,

                init() {

                  if(this.$root.classList.contains('btn-search-saved')) {

                    this.isSaved = true;

                  }

                },

                save() {

                  this.isSaved = !this.isSaved;

                }

              }

            }

        </script>

    </div>

    <div class="order-[-1] w-full md:flex-1">

        <div class="max-w-[600px]">

            <div class="font-semibold text-lg md:text-xl text-secondary">Aucun résultat ne correspond aux critères renseignés. </div>

            <div class="tracking-tightened text-text-light">Aucun résultat ne correspond aux critères renseignés. Mais voici une sélection de résultats proches qui pourraient vous convenir</div>

        </div>

    </div>

    <div>

        <?php include renderTemplate('catalog/category/sort-by')?>

    </div>

</div>