From 4424a6dade24a795be9e1d8bf52100247b206af7 Mon Sep 17 00:00:00 2001
From: MatthieuLP <matthieu.leproux@gmail.com>
Date: Fri, 28 Jul 2023 10:50:06 +0200
Subject: [PATCH] related to #1931 Responsive for mcs with lots of filters

---
 themes/default/template/index.tpl | 568 +++++++++++++++---------------
 1 file changed, 285 insertions(+), 283 deletions(-)

diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index 2db317a69..d5d0e5397 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -257,316 +257,318 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
   </div>
   <i class="filter-spinner pwg-icon-spin6 animate-spin"></i>
 
-  <div class="filter filter-word">
-   <span class="mcs-icon pwg-icon-search filter-icon"></span>
-   <span class="search-words"></span>
-   <span class="filter-arrow pwg-icon-up-open"></span>
+  <div class="filter-container">
+    <div class="filter filter-word">
+      <span class="mcs-icon pwg-icon-search filter-icon"></span>
+      <span class="search-words"></span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
 
-   <div class="filter-form filter-word-form">
-    <div class="filter-form-title">{'Search for words'|@translate}</div>
-    <div class="filter-actions"> 
-      <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
-      <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
-    </div>
-    {* <span class="word-help"><i class="pwg-icon-help-circled"></i>Conseils de recherche</span> *}
-    <div class="word-search-options">
-      <label><input type="radio" name="mode" value="AND" checked> {'Search for all terms'|@translate}</label>
-      <label><input type="radio" name="mode" value="OR"> {'Search for any term'|@translate}</label>
-    </div>
-
-    <input type="text" id="word-search" name="word">
-    <span class="search-params-title">{'Search in :'|@translate}</span>
-    <div class="search-params"> 
-      <div>
-        <input type="checkbox" id="name" name="name">
-        <label for="name">{'Photo title'|@translate}</label>
-      </div>
-      <div>
-        <input type="checkbox" id="file" name="file">
-        <label for="file">{'File name'|@translate}</label>
-      </div>
-      <div>
-        <input type="checkbox" id="comment" name="comment">
-        <label for="comment">{'Photo description'|@translate}</label>
-      </div>
-      <div>
-        <input type="checkbox" id="tags" name="tags">
-        <label for="tags">{'Tags'|@translate}</label>
-      </div>
-      <div>
-        <input type="checkbox" id="cat-title" name="cat-title">
-        <label for="cat-title">{'Album title'|@translate}</label>
-      </div>
-      <div>
-        <input type="checkbox" id="cat-desc" name="cat-desc">
-        <label for="cat-desc">{'Album description'|@translate}</label>
-      </div>
-    </div>
-    <div class="filter-validate">
-      <i class="loading pwg-icon-spin6 animate-spin"></i>
-      <span class="validate-text">{'Validate'|@translate}</span>
-    </div>
-   </div>
-  </div>
-  <div class="filter filter-tag">
-    <span class="mcs-icon pwg-icon-tag filter-icon"></span>
-    <span class="search-words"></span>
-    <span class="filter-arrow pwg-icon-up-open"></span>
-
-    <div class="filter-form filter-tag-form">
-      <div class="filter-form-title">{'Tag'|@translate}</div>
-      <div class="filter-actions"> 
-        <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
-        <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
-      </div>
-      <div class="search-params"> 
-        <div>
-          <input type="radio" id="tag-all" name="tag_mode" value="AND" checked>
-          <label for="tag-all">{'All tags'|@translate}</label>
+      <div class="filter-form filter-word-form">
+        <div class="filter-form-title">{'Search for words'|@translate}</div>
+        <div class="filter-actions"> 
+          <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
+          <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
         </div>
-        <div>
-          <input type="radio" id="tag-one" name="tag_mode" value="OR">
-          <label for="tag-one">{'Any tag'|@translate}</label>
+        {* <span class="word-help"><i class="pwg-icon-help-circled"></i>Conseils de recherche</span> *}
+        <div class="word-search-options">
+          <label><input type="radio" name="mode" value="AND" checked> {'Search for all terms'|@translate}</label>
+          <label><input type="radio" name="mode" value="OR"> {'Search for any term'|@translate}</label>
+        </div>
+
+        <input type="text" id="word-search" name="word">
+        <span class="search-params-title">{'Search in :'|@translate}</span>
+        <div class="search-params"> 
+          <div>
+            <input type="checkbox" id="name" name="name">
+            <label for="name">{'Photo title'|@translate}</label>
+          </div>
+          <div>
+            <input type="checkbox" id="file" name="file">
+            <label for="file">{'File name'|@translate}</label>
+          </div>
+          <div>
+            <input type="checkbox" id="comment" name="comment">
+            <label for="comment">{'Photo description'|@translate}</label>
+          </div>
+          <div>
+            <input type="checkbox" id="tags" name="tags">
+            <label for="tags">{'Tags'|@translate}</label>
+          </div>
+          <div>
+            <input type="checkbox" id="cat-title" name="cat-title">
+            <label for="cat-title">{'Album title'|@translate}</label>
+          </div>
+          <div>
+            <input type="checkbox" id="cat-desc" name="cat-desc">
+            <label for="cat-desc">{'Album description'|@translate}</label>
+          </div>
         </div>
-      </div>
-      <div class="form-container">
-        <select id="tag-search" placeholder="{'Type in a search term'|translate}" name="tags[]" multiple>
-      {foreach from=$TAGS item=tag}
-          <option value="{$tag.id}">{$tag.name} ({$tag.counter|translate_dec:'%d photo':'%d photos'})</option>
-      {/foreach}
-        </select>
         <div class="filter-validate">
           <i class="loading pwg-icon-spin6 animate-spin"></i>
           <span class="validate-text">{'Validate'|@translate}</span>
         </div>
+        </div>
+      </div>
+    <div class="filter filter-tag">
+      <span class="mcs-icon pwg-icon-tag filter-icon"></span>
+      <span class="search-words"></span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
+
+      <div class="filter-form filter-tag-form">
+        <div class="filter-form-title">{'Tag'|@translate}</div>
+        <div class="filter-actions"> 
+          <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
+          <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
+        </div>
+        <div class="search-params"> 
+          <div>
+            <input type="radio" id="tag-all" name="tag_mode" value="AND" checked>
+            <label for="tag-all">{'All tags'|@translate}</label>
+          </div>
+          <div>
+            <input type="radio" id="tag-one" name="tag_mode" value="OR">
+            <label for="tag-one">{'Any tag'|@translate}</label>
+          </div>
+        </div>
+        <div class="form-container">
+          <select id="tag-search" placeholder="{'Type in a search term'|translate}" name="tags[]" multiple>
+        {foreach from=$TAGS item=tag}
+            <option value="{$tag.id}">{$tag.name} ({$tag.counter|translate_dec:'%d photo':'%d photos'})</option>
+        {/foreach}
+          </select>
+          <div class="filter-validate">
+            <i class="loading pwg-icon-spin6 animate-spin"></i>
+            <span class="validate-text">{'Validate'|@translate}</span>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="filter filter-date_posted">
-    <span class="mcs-icon pwg-icon-calendar-plus filter-icon"></span>
-    <span class="search-words">{'Post date'|@translate}</span>
-    <span class="filter-arrow pwg-icon-up-open"></span>
+    <div class="filter filter-date_posted">
+      <span class="mcs-icon pwg-icon-calendar-plus filter-icon"></span>
+      <span class="search-words">{'Post date'|@translate}</span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
 
-    <div class="filter-form filter-date_posted-form">
-      <div class="filter-form-title">{'Post date'|@translate}</div>
-      <div class="filter-actions"> 
-        <span class="delete mcs-icon pwg-icon-trash" title="{'Delete'|@translate}"></span>
-        <span class="clear mcs-icon pwg-icon-broom" title="{'Clear'|@translate}"></span>
-      </div>
+      <div class="filter-form filter-date_posted-form">
+        <div class="filter-form-title">{'Post date'|@translate}</div>
+        <div class="filter-actions"> 
+          <span class="delete mcs-icon pwg-icon-trash" title="{'Delete'|@translate}"></span>
+          <span class="clear mcs-icon pwg-icon-broom" title="{'Clear'|@translate}"></span>
+        </div>
 
-      <div class="date_posted-option-container">
-        {* <div class="date_posted-option">
-          <input type="radio" id="date_posted-7d" value="7d" name="date_posted-period">
-          <label for="date_posted-7d">
-            <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
-            <span class="date-period">{'last 7 days'|@translate}</span>
-          </label>
-        </div>
-        <div class="date_posted-option">
-          <input type="radio" id="date_posted-30d" value="30d" name="date_posted-period">
-          <label for="date_posted-30d">
-            <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
-            <span class="date-period">{'last 30 days'|@translate}</span>
-          </label>
-        </div>
-        <div class="date_posted-option">
-          <input type="radio" id="date_posted-6m" value="6m" name="date_posted-period">
-          <label for="date_posted-6m">
-            <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
-            <span class="date-period">{'last 6 months'|@translate}</span>
-          </label>
-        </div>
-        <div class="date_posted-option">
-          <input type="radio" id="date_posted-1y" value="1y" name="date_posted-period">
-          <label for="date_posted-1y">
-            <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
-            <span class="date-period">{'last year'|@translate}</span>
-          </label>
-        </div> *}
-        {foreach from=$DATE_POSTED item=badge_number key=k}
-          <div class="date_posted-option">
-            <input type="radio" id="date_posted-{$k}" value={$k} name="date_posted-period">
-            <label for="date_posted-{$k}" id="{$k}">
+        <div class="date_posted-option-container">
+          {* <div class="date_posted-option">
+            <input type="radio" id="date_posted-7d" value="7d" name="date_posted-period">
+            <label for="date_posted-7d">
               <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
-              <span class="date-period">{'last year'|@translate}</span>
-              <span class="date_posted-badge">{$badge_number}</span>
+              <span class="date-period">{'last 7 days'|@translate}</span>
             </label>
           </div>
-        {/foreach}
-      </div>
-      <div class="filter-validate">
-        <i class="loading pwg-icon-spin6 animate-spin"></i>
-        <span class="validate-text">{'Validate'|@translate}</span>
-      </div>
-    </div>
-  </div>
-  <div class="filter filter-album">
-    <span class="mcs-icon pwg-icon-album filter-icon"></span>
-    <span class="search-words"></span>
-    <span class="filter-arrow pwg-icon-up-open"></span>
-
-    <div class="filter-form filter-album-form">
-    <div class="filter-form-title">{'Album'|@translate}</div>
-    <div class="filter-actions"> 
-      <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
-      <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
-    </div>
-      <div class="search-params"> 
-        {* <div>
-          <input type="radio" id="album-all" name="album_mode" value="ALL" checked>
-          <label for="album-all">{'All albums'|@translate}</label>
-        </div>
-        <div>
-          <input type="radio" id="album-any" name="album_mode" value="ANY">
-          <label for="album-any">{'Any album'|@translate}</label>
-        </div> *}
-        </div>
-        <div class="selected-categories-container">
-        </div>
-        <div class="add-album-button">
-          <label class="head-button-2 icon-add-album">
-            <p class="mcs-icon pwg-icon-plus-circled">{'Add Album'|@translate}</p>
-          </label>
-        </div>
-        <div class="search-sub-cats">
-          <input type="checkbox" id="search-sub-cats" name="search-sub-cats">
-          <label for="search-sub-cats">Search in sub-albums</label>
-        </div>
-        <div class="filter-validate">
-          <i class="loading pwg-icon-spin6 animate-spin"></i>
-          <span class="validate-text">{'Validate'|@translate}</span>
-        </div>
-    </div>
-  </div>
-  {include file='admin/themes/default/template/include/album_selector.inc.tpl' 
-    title={'Search in albums'|@translate}
-    searchPlaceholder={'Search'|@translate}
-    show_root_btn=false
-    api_method='pwg.categories.getList'
-  }
-{if isset($AUTHORS)}
-  <div class="filter filter-authors">
-    <span class="mcs-icon pwg-icon-user-edit filter-icon"></span>
-    <span class="search-words"></span>
-    <span class="filter-arrow pwg-icon-up-open"></span>
-    
-    <div class="filter-form filter-author-form">
-      <div class="filter-form-title">{'Author'|@translate}</div>
-      <div class="filter-actions"> 
-        <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
-        <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
-      </div>
-      <div class="form-container">
-        <select id="authors" placeholder="{'Type in a search term'|translate}" name="authors[]" multiple>
-        {foreach from=$AUTHORS item=author}
-          <option value="{$author.author|strip_tags:false|escape:html}">{$author.author|strip_tags:false} ({$author.counter|translate_dec:'%d photo':'%d photos'})</option>
-        {/foreach}
-        </select>
-
-        <div class="filter-validate">
-          <i class="loading pwg-icon-spin6 animate-spin"></i>
-          <span class="validate-text">{'Validate'|@translate}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
-
-{if isset($ADDED_BY)}
-  <div class="filter filter-added_by">
-    <span class="mcs-icon pwg-icon-user filter-icon"></span>
-    </span><span class="search-words"></span>
-    <span class="filter-arrow pwg-icon-up-open"></span>
-
-    <div class="filter-form filter-added_by-form">
-      <div class="filter-form-title">{'Added by'|@translate}</div>
-      <div class="filter-actions"> 
-        <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
-        <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
-      </div>
-      <div class="form-container">
-        <select id="added_by" placeholder="{'Type in a search term'|translate}" name="added_by[]" multiple>
-        {foreach from=$ADDED_BY item=added_by}
-          <option value="{$added_by.added_by_id|strip_tags:false|escape:html}">{$added_by.added_by_name|strip_tags:false}<span class="badge">({$added_by.counter|translate_dec:'%d photo':'%d photos'})</span></option>
-        {/foreach}
-        </select>
-        <div class="filter-validate">
-          <i class="loading pwg-icon-spin6 animate-spin"></i>
-          <span class="validate-text">{'Validate'|@translate}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
-
-{if isset($FILETYPES)}
-  <div class="filter filter-filetypes">
-    <span class="mcs-icon pwg-icon-file-image filter-icon"></span>
-    </span><span class="search-words"></span>
-    <span class="filter-arrow pwg-icon-up-open"></span>
-
-    <div class="filter-form filter-filetypes-form">
-      <div class="filter-form-title">{'File type'|@translate}</div>
-      <div class="filter-actions"> 
-        <span class="delete mcs-icon pwg-icon-trash tiptip" title="{'Delete'|@translate}"></span>
-        <span class="clear mcs-icon pwg-icon-broom tiptip" title="{'Clear'|@translate}"></span>
-      </div>
-      <div class="form-container">
-        <div class="filetypes-option-container">
-        {foreach from=$FILETYPES item=filetypes key=k}
-          <div class="filetypes-option">
-              <input type="checkbox" id="filetype-{$k}" name="{$k}">
-              <label for="filetype-{$k}">
+          <div class="date_posted-option">
+            <input type="radio" id="date_posted-30d" value="30d" name="date_posted-period">
+            <label for="date_posted-30d">
+              <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
+              <span class="date-period">{'last 30 days'|@translate}</span>
+            </label>
+          </div>
+          <div class="date_posted-option">
+            <input type="radio" id="date_posted-6m" value="6m" name="date_posted-period">
+            <label for="date_posted-6m">
+              <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
+              <span class="date-period">{'last 6 months'|@translate}</span>
+            </label>
+          </div>
+          <div class="date_posted-option">
+            <input type="radio" id="date_posted-1y" value="1y" name="date_posted-period">
+            <label for="date_posted-1y">
+              <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
+              <span class="date-period">{'last year'|@translate}</span>
+            </label>
+          </div> *}
+          {foreach from=$DATE_POSTED item=badge_number key=k}
+            <div class="date_posted-option">
+              <input type="radio" id="date_posted-{$k}" value={$k} name="date_posted-period">
+              <label for="date_posted-{$k}" id="{$k}">
                 <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
-                <span class="ext-name">{$k}</span>
-                <span class="ext-badge">{$filetypes}</span>
+                <span class="date-period">{'last year'|@translate}</span>
+                <span class="date_posted-badge">{$badge_number}</span>
               </label>
             </div>
-        {/foreach}
+          {/foreach}
+        </div>
+        <div class="filter-validate">
+          <i class="loading pwg-icon-spin6 animate-spin"></i>
+          <span class="validate-text">{'Validate'|@translate}</span>
         </div>
       </div>
-      <div class="filter-validate">
-        <i class="loading pwg-icon-spin6 animate-spin"></i>
-        <span class="validate-text">{'Validate'|@translate}</span>
+    </div>
+    <div class="filter filter-album">
+      <span class="mcs-icon pwg-icon-album filter-icon"></span>
+      <span class="search-words"></span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
+
+      <div class="filter-form filter-album-form">
+      <div class="filter-form-title">{'Album'|@translate}</div>
+      <div class="filter-actions"> 
+        <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
+        <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
+      </div>
+        <div class="search-params"> 
+          {* <div>
+            <input type="radio" id="album-all" name="album_mode" value="ALL" checked>
+            <label for="album-all">{'All albums'|@translate}</label>
+          </div>
+          <div>
+            <input type="radio" id="album-any" name="album_mode" value="ANY">
+            <label for="album-any">{'Any album'|@translate}</label>
+          </div> *}
+          </div>
+          <div class="selected-categories-container">
+          </div>
+          <div class="add-album-button">
+            <label class="head-button-2 icon-add-album">
+              <p class="mcs-icon pwg-icon-plus-circled">{'Add Album'|@translate}</p>
+            </label>
+          </div>
+          <div class="search-sub-cats">
+            <input type="checkbox" id="search-sub-cats" name="search-sub-cats">
+            <label for="search-sub-cats">Search in sub-albums</label>
+          </div>
+          <div class="filter-validate">
+            <i class="loading pwg-icon-spin6 animate-spin"></i>
+            <span class="validate-text">{'Validate'|@translate}</span>
+          </div>
       </div>
     </div>
-  </div>
-{/if}
+    {include file='admin/themes/default/template/include/album_selector.inc.tpl' 
+      title={'Search in albums'|@translate}
+      searchPlaceholder={'Search'|@translate}
+      show_root_btn=false
+      api_method='pwg.categories.getList'
+    }
+    {if isset($AUTHORS)}
+    <div class="filter filter-authors">
+      <span class="mcs-icon pwg-icon-user-edit filter-icon"></span>
+      <span class="search-words"></span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
+      
+      <div class="filter-form filter-author-form">
+        <div class="filter-form-title">{'Author'|@translate}</div>
+        <div class="filter-actions"> 
+          <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
+          <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
+        </div>
+        <div class="form-container">
+          <select id="authors" placeholder="{'Type in a search term'|translate}" name="authors[]" multiple>
+          {foreach from=$AUTHORS item=author}
+            <option value="{$author.author|strip_tags:false|escape:html}">{$author.author|strip_tags:false} ({$author.counter|translate_dec:'%d photo':'%d photos'})</option>
+          {/foreach}
+          </select>
 
-  <div>
-    <span class="mcs-icon pwg-icon-broom clear-all">{'Empty filters'|@translate}</span>
-  </div>
+          <div class="filter-validate">
+            <i class="loading pwg-icon-spin6 animate-spin"></i>
+            <span class="validate-text">{'Validate'|@translate}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    {/if}
 
-  {* <div class="filter filter-note">
-   Note div
-   <div class="filter-form filter-note-form">
+    {if isset($ADDED_BY)}
+    <div class="filter filter-added_by">
+      <span class="mcs-icon pwg-icon-user filter-icon"></span>
+      </span><span class="search-words"></span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
 
+      <div class="filter-form filter-added_by-form">
+        <div class="filter-form-title">{'Added by'|@translate}</div>
+        <div class="filter-actions"> 
+          <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
+          <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
+        </div>
+        <div class="form-container">
+          <select id="added_by" placeholder="{'Type in a search term'|translate}" name="added_by[]" multiple>
+          {foreach from=$ADDED_BY item=added_by}
+            <option value="{$added_by.added_by_id|strip_tags:false|escape:html}">{$added_by.added_by_name|strip_tags:false}<span class="badge">({$added_by.counter|translate_dec:'%d photo':'%d photos'})</span></option>
+          {/foreach}
+          </select>
+          <div class="filter-validate">
+            <i class="loading pwg-icon-spin6 animate-spin"></i>
+            <span class="validate-text">{'Validate'|@translate}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    {/if}
+
+    {if isset($FILETYPES)}
+    <div class="filter filter-filetypes">
+      <span class="mcs-icon pwg-icon-file-image filter-icon"></span>
+      </span><span class="search-words"></span>
+      <span class="filter-arrow pwg-icon-up-open"></span>
+
+      <div class="filter-form filter-filetypes-form">
+        <div class="filter-form-title">{'File type'|@translate}</div>
+        <div class="filter-actions"> 
+          <span class="delete mcs-icon pwg-icon-trash tiptip" title="{'Delete'|@translate}"></span>
+          <span class="clear mcs-icon pwg-icon-broom tiptip" title="{'Clear'|@translate}"></span>
+        </div>
+        <div class="form-container">
+          <div class="filetypes-option-container">
+          {foreach from=$FILETYPES item=filetypes key=k}
+            <div class="filetypes-option">
+                <input type="checkbox" id="filetype-{$k}" name="{$k}">
+                <label for="filetype-{$k}">
+                  <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
+                  <span class="ext-name">{$k}</span>
+                  <span class="ext-badge">{$filetypes}</span>
+                </label>
+              </div>
+          {/foreach}
+          </div>
+        </div>
+        <div class="filter-validate">
+          <i class="loading pwg-icon-spin6 animate-spin"></i>
+          <span class="validate-text">{'Validate'|@translate}</span>
+        </div>
+      </div>
+    </div>
+    {/if}
+
+    {* <div class="filter filter-note">
+      Note div
+      <div class="filter-form filter-note-form">
+
+      </div>
+    </div>
+    <div class="filter filter-height">
+      Height div
+      <div class="filter-form filter-height-form">
+
+      </div>
+    </div>
+    <div class="filter filter-width">
+      Width div
+      <div class="filter-form filter-width-form">
+
+      </div>
+    </div>
+    <div class="filter filter-file-type">
+      File type div
+      <div class="filter-form filter-file-type-form">
+
+      </div>
+    </div>
+    <div class="filter filter-file-size">
+      File size div
+      <div class="filter-form filter-file-size-form">
+
+      </div>
+    </div> *}
    </div>
-  </div>
-  <div class="filter filter-height">
-    Height div
-    <div class="filter-form filter-height-form">
 
+   <div>
+      <span class="mcs-icon pwg-icon-broom clear-all">{'Empty filters'|@translate}</span>
     </div>
-  </div>
-  <div class="filter filter-width">
-    Width div
-    <div class="filter-form filter-width-form">
-
-    </div>
-  </div>
-  <div class="filter filter-file-type">
-    File type div
-    <div class="filter-form filter-file-type-form">
-
-    </div>
-  </div>
-  <div class="filter filter-file-size">
-    File size div
-    <div class="filter-form filter-file-size-form">
-
-    </div>
-  </div> *}
 </div>
 
 <div class="mcs-side-results">