From ba7a1eac31efab7f4c22be1cce08d965f0537c34 Mon Sep 17 00:00:00 2001
From: David Katrinka <davidkatrinka1995@gmail.com>
Date: Sun, 6 Jul 2025 13:34:59 +0200
Subject: [PATCH] TIST-48: added reset button in catalog filters

---
 apps/Recipes/Templates/catalog.php | 41 +++++++++++++++++-------------
 assets/css/style.css               |  3 ++-
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/Recipes/Templates/catalog.php b/apps/Recipes/Templates/catalog.php
index b08f088..6419310 100644
--- a/apps/Recipes/Templates/catalog.php
+++ b/apps/Recipes/Templates/catalog.php
@@ -28,61 +28,66 @@ the_header(
                 <div class="filters-inner">
                     <form class="filters-form" method="get">
                         <div class="categories-filter">
-                        <h3 class="filters__title">
-                            Categories</h3>
+                            <h3 class="filters__title">
+                                Categories</h3>
                             <div class="filters__search">
                                 <i class="fa-solid fa-magnifying-glass search-icon"></i>
                                 <input type="text" class="search-input" placeholder="Search categories...">
                             </div>
-                            
+
                             <div class="filters-checkboxes">
                                 <ul>
-                                    <?php foreach ($context['categories'] as $cat): 
+                                    <?php foreach ($context['categories'] as $cat):
                                         $field_id = 'cat_' . $cat->get_id();
 
                                         $is_checked = false;
                                         $category = $_GET['category'] ?? null;
-                                        if($category == $cat->get_id())
+                                        if ($category == $cat->get_id())
                                             $is_checked = true;
                                         ?>
-                                    <li>
-                                        <input id="<?= $field_id ?>" type="radio" name="category" value="<?= $cat->get_id() ?>" <?= $is_checked ? 'checked' : '' ?>>
-                                        <label for="<?= $field_id ?>"><?= $cat->field_name ?></label>
-                                    </li>
+                                        <li>
+                                            <input id="<?= $field_id ?>" type="radio" name="category"
+                                                value="<?= $cat->get_id() ?>" <?= $is_checked ? 'checked' : '' ?>>
+                                            <label for="<?= $field_id ?>"><?= $cat->field_name ?></label>
+                                        </li>
                                     <?php endforeach; ?>
                                 </ul>
                             </div>
                         </div>
                         <div class="ingredients-filter">
-                        <h3 class="filters__title">
-                            Ingredients</h3>
+                            <h3 class="filters__title">
+                                Ingredients</h3>
                             <div class="filters__search">
                                 <i class="fa-solid fa-magnifying-glass search-icon"></i>
                                 <input type="text" class="search-input" placeholder="Search Ingredients...">
                             </div>
                             <div class="filters-checkboxes">
                                 <ul>
-                                    <?php foreach ($context['ingredients'] as $ing): 
+                                    <?php foreach ($context['ingredients'] as $ing):
                                         $field_id = 'ing_' . $ing->get_id();
 
                                         $is_checked = false;
                                         $ingredients = $_GET['ingredient'] ?? null;
-                                        if($ingredients) {
+                                        if ($ingredients) {
                                             if (in_array($ing->get_id(), $ingredients))
                                                 $is_checked = true;
                                         }
                                         ?>
-                                    <li>
-                                        <input id="<?= $field_id ?>" type="checkbox" name="ingredient[]" value="<?= $ing->get_id() ?>" <?= $is_checked ? 'checked' : '' ?>>
-                                        <label for="<?= $field_id ?>"><?= $ing->field_name ?></label>
-                                    </li>
-                                    <?php endforeach; ?>                                    
+                                        <li>
+                                            <input id="<?= $field_id ?>" type="checkbox" name="ingredient[]"
+                                                value="<?= $ing->get_id() ?>" <?= $is_checked ? 'checked' : '' ?>>
+                                            <label for="<?= $field_id ?>"><?= $ing->field_name ?></label>
+                                        </li>
+                                    <?php endforeach; ?>
                                 </ul>
                             </div>
                         </div>
                         <button class="btn btn-primary hover-anim" type="submit">
                             Apply
                         </button>
+                        <a class="btn btn-secondary hover-anim" type="button" href="<?php the_permalink('recipes:catalog') ?>">
+                            Reset
+                        </a>
                     </form>
                 </div>
             </div>
diff --git a/assets/css/style.css b/assets/css/style.css
index 2fe2628..d98053a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -831,7 +831,7 @@ input[type="checkbox"]{
 
 .filters {
     position: fixed;
-    max-height: 454px;
+    max-height: 500px;
     width: 230px;
     padding: 15px;
     background-color: var(--panel-background);
@@ -874,6 +874,7 @@ input[type="checkbox"]{
 
 .filters-form .btn {
     width: 200px;
+    margin-bottom: 10px;
 }
 
 .single-recipe {
-- 
2.34.1