Filter table section

Saved variant

Nepřihlášený uživatel s historií filtrování. Zobrazuje se s ikonou.

  • Historie filtování
    Celkem nemovitosti
    Zapnout upozornění
    Byt 4+1, 5+kk, 5+1
    6
    celkem nemovitostí
    Byt 4+1, 5+kk, 5+1 a více, výtah
    38
    celkem nemovitostí
    Domy Lišov
    221
    celkem nemovitostí
    Byty prodej Ševětín
    0
    celkem nemovitostí
    Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc
    1798
    celkem nemovitostí 
  •         {% set filter_table_section_props = {
    filter_table: {
      meta: {
        variant: "history"
      },
      header: {
        title: {
          text :"Historie filtování",
          icon : ""
        },
        counter_text: "Celkem nemovitosti",
        notification_text: "Zapnout upozornění"
      },
      items: [
        {
          title: "Byt 4+1, 5+kk, 5+1",
          counter: "6",
          target: "a",
          link: "#",
          is_active: false
        },
        {
          title: "Byt 4+1, 5+kk, 5+1 a více, výtah",
          counter: "38",
          counterNew: "2 nové",
          target: "b",
          link: "#",
          is_active: false
        },
        {
          title: "Domy Lišov",
          counter: "221",
          counterNew: "1 nový",
          target: "c",
          link: "#",
          is_active: false
        },
        {
          title: "Byty prodej Ševětín",
          counter: "0",
          counterNew: "10 nových",
          target: "d",
          link: "#",
          is_active: false
        },
        {
          title: "Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc",
          counter: "1798",
          counterNew: "0 nových",
          target: "e",
          link: "#",
          is_active: false
        }
      ]
    },
    cta: {
      title: "Nemovitosti, <br>které vás<br> zajímají.",
      perex: "Přihlaste se, zapněte <br>upozornění a hned jak se <br>nějaká objeví, dáme vám vědět.",
      buttons: [
        {
          title: "Přihlásit se"
        }, {
          title: "Registrovat",
          variant: "outline"
        }
      ],
      imgSrc: "images/content/zvonek.png"
    }
  }
%}


{% include "@Components/sections/filter-table-section/filter-table-section.twig" with { props: filter_table_section_props } %}

      
  •           





<section class="base-section      s-filter-table">
  <div class="base-section__container container">
    
    <div class="s-filter-table__content-block">
      <div class="s-filter-table__content-group">

                  
<div class="i-login-cta">
  <div class="i-login-cta__content">
    <h3 class="i-login-cta__content-title h1">Nemovitosti, <br>které vás<br> zajímají.</h3>
    <p class="i-login-cta__content-perex">Přihlaste se, zapněte <br>upozornění a hned jak se <br>nějaká objeví, dáme vám vědět.</p>
  </div>
    <div class="i-login-cta__content-buttons">
          <a class="btn --conversion" href='#'>    <span class="btn__title ">Přihlásit se</span>
      </a>
          <a class="btn --outline" href='#'>    <span class="btn__title ">Registrovat</span>
      </a>
      </div>
</div>
        
        <div class="g-filter-table">

  <div class="i-filter-table-header">

  <div class="i-filter-table-header__title">
        <div class="i-filter-table-header__title-text">
      Historie filtování
    </div>
  </div>

  <div class="i-filter-table-header__counter">
    Celkem nemovitosti
  </div>

  <div class="i-filter-table-header__badge"> </div>

  <div class="i-filter-table-header__notification">
    Zapnout upozornění
  </div>

  
</div>

  <div class="g-filter-table__content">

    
      
        
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Byt 4+1, 5+kk, 5+1
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        6
      </div>
              <div class="i-filter-table__counter-description">
          celkem nemovitostí
        </div>
          </div>

      <div class="i-filter-table__badge">
              </div>

    <div class="i-filter-table__button">
                <button class="cta-button   --unlogged" data-target="a" data-toggle="modal">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Zapnout upozornění" loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Zapnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="a">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="a">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Byt 4+1, 5+kk, 5+1</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " a " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " a " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " a " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-a" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-a'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-a'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
        
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Byt 4+1, 5+kk, 5+1 a více, výtah
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        38
      </div>
              <div class="i-filter-table__counter-description">
          celkem nemovitostí
        </div>
          </div>

      <div class="i-filter-table__badge">
              </div>

    <div class="i-filter-table__button">
                <button class="cta-button   --unlogged" data-target="b" data-toggle="modal">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Zapnout upozornění" loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Zapnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="b">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="b">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Byt 4+1, 5+kk, 5+1 a více, výtah</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " b " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " b " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " b " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-b" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-b'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-b'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
        
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Domy Lišov
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        221
      </div>
              <div class="i-filter-table__counter-description">
          celkem nemovitostí
        </div>
          </div>

      <div class="i-filter-table__badge">
              </div>

    <div class="i-filter-table__button">
                <button class="cta-button   --unlogged" data-target="c" data-toggle="modal">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Zapnout upozornění" loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Zapnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="c">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="c">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Domy Lišov</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " c " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " c " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " c " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-c" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-c'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-c'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
        
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Byty prodej Ševětín
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        0
      </div>
              <div class="i-filter-table__counter-description">
          celkem nemovitostí
        </div>
          </div>

      <div class="i-filter-table__badge">
              </div>

    <div class="i-filter-table__button">
                <button class="cta-button   --unlogged" data-target="d" data-toggle="modal">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Zapnout upozornění" loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Zapnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="d">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="d">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Byty prodej Ševětín</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " d " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " d " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " d " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-d" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-d'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-d'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
        
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        1798
      </div>
              <div class="i-filter-table__counter-description">
          celkem nemovitostí
        </div>
          </div>

      <div class="i-filter-table__badge">
              </div>

    <div class="i-filter-table__button">
                <button class="cta-button   --unlogged" data-target="e" data-toggle="modal">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Zapnout upozornění" loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Zapnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="e">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="e">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " e " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " e " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " e " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-e" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-e'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-e'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
    
  </div>
</div>
      </div>
    </div>

    </div>
</section>

Empty variant / No history

První zobrazení (prázdný výpis)

  • Historie filtování
    Celkem nemovitosti
    Zapnout upozornění
    Tady se zobrazí
    Vaše historie
    filtrování 
  •         {% set filter_table_section_props = {
    filter_table: {
      meta: {
        variant: "empty",
        empty_note: "Tady se zobrazí<br>Vaše historie<br>filtrování",
        empty_note_icon: "images/svg/history.svg"
      },
      header: {
        title: {
          text :"Historie filtování",
          icon : ""
        },
        counter_text: "Celkem nemovitosti",
        notification_text: "Zapnout upozornění"
      },
    },
    cta: {
      title: "Nemovitosti, <br>které vás<br> zajímají.",
      perex: "Přihlaste se, zapněte <br>upozornění a hned jak se <br>nějaká objeví, dáme vám vědět.",
      buttons: [
        {
          title: "Přihlásit se"
        }, {
          title: "Registrovat",
          variant: "outline"
        }
      ],
      img_src: "images/content/zvonek.png"
    }
  }
%}


{% include "@Components/sections/filter-table-section/filter-table-section.twig" with { props: filter_table_section_props } %}

      
  •           





<section class="base-section      s-filter-table">
  <div class="base-section__container container">
    
    <div class="s-filter-table__content-block">
      <div class="s-filter-table__content-group">

                  
<div class="i-login-cta">
  <div class="i-login-cta__content">
    <h3 class="i-login-cta__content-title h1">Nemovitosti, <br>které vás<br> zajímají.</h3>
    <p class="i-login-cta__content-perex">Přihlaste se, zapněte <br>upozornění a hned jak se <br>nějaká objeví, dáme vám vědět.</p>
  </div>
    <div class="i-login-cta__content-buttons">
          <a class="btn --conversion" href='#'>    <span class="btn__title ">Přihlásit se</span>
      </a>
          <a class="btn --outline" href='#'>    <span class="btn__title ">Registrovat</span>
      </a>
      </div>
</div>
        
        <div class="g-filter-table">

  <div class="i-filter-table-header">

  <div class="i-filter-table-header__title">
        <div class="i-filter-table-header__title-text">
      Historie filtování
    </div>
  </div>

  <div class="i-filter-table-header__counter">
    Celkem nemovitosti
  </div>

  <div class="i-filter-table-header__badge"> </div>

  <div class="i-filter-table-header__notification">
    Zapnout upozornění
  </div>

  
</div>

  <div class="g-filter-table__content">

    
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
              <div class="i-filter-table --empty">
  <div class="i-filter-table__title">
    <div class="i-filter-table__empty-title">
    </div>
  </div>

  <div class="i-filter-table__counter">
    <div class="i-filter-table__empty-counter">
    </div>
  </div>

  <div class="i-filter-table__badge">
  </div>

  <div class="i-filter-table__button">
      <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell.svg" alt="Upozornění" loading="lazy">
  
  </span>
                        </div>

    </button>
  </div>

</div>
      
      <div class="i-filter-table-empty-note">
  <span class="icon  --xl">
      <img src="images/svg/history.svg"  loading="lazy">
  
  </span>
  <span class="i-filter-table-empty-note__text">Tady se zobrazí<br>Vaše historie<br>filtrování</span>
</div>

    
  </div>
</div>
      </div>
    </div>

    </div>
</section>

Saved filters variant

Přihlášený uživatel s uloženými filtry a historií filtrování

  • Moje filtry
    Celkem nemovitosti
    Zapnout upozornění
    Domy České Budějovice
    1798
    12 nových
    Byty prodej Lišov
    38
    2 nové
    Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc
    221
    1 nový 
  •         {% set filter_table_section_props = {
    filter_table: {
      meta: {
        variant: "saved"
      },
      header: {
        title: {
          text :"Moje filtry",
          icon : "images/svg/saved-filter.svg"
        },
        counter_text: "Celkem nemovitosti",
        notification_text: "Zapnout upozornění"
      },
      items: [
        {
          title: "Domy České Budějovice",
          counter: "1798",
          counter_new: "12 nových",
          target: "a",
          link: "#",
          is_active: true
        },
        {
          title: "Byty prodej Lišov",
          counter: "38",
          counter_new: "2 nové",
          target: "b",
          link: "#",
          is_active: true
        },
        {
          title: "Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc",
          counter: "221",
          counter_new: "1 nový",
          target: "c",
          link: "#",
          is_active: true
        }
      ]
    }
  }
%}


{% include "@Components/sections/filter-table-section/filter-table-section.twig" with { props: filter_table_section_props } %}

      
  •           





<section class="base-section      s-filter-table">
  <div class="base-section__container container">
    
    <div class="s-filter-table__content-block">
      <div class="s-filter-table__content-group">

        
        <div class="g-filter-table">

  <div class="i-filter-table-header">

  <div class="i-filter-table-header__title">
          <div class="i-filter-table-header__title-icon">
        <span class="icon">
      <img src="images/svg/saved-filter.svg"  loading="lazy">
  
  </span>
      </div>
        <div class="i-filter-table-header__title-text">
      Moje filtry
    </div>
  </div>

  <div class="i-filter-table-header__counter">
    Celkem nemovitosti
  </div>

  <div class="i-filter-table-header__badge"> </div>

  <div class="i-filter-table-header__notification">
    Zapnout upozornění
  </div>

  
</div>

  <div class="g-filter-table__content">

    
      
                          
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Domy České Budějovice
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        1798
      </div>
          </div>

      <div class="i-filter-table__badge">
                  <div class="i-filter-table__badge-span">
            12 nových
          </div>
              </div>

    <div class="i-filter-table__button">
          <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell-fill.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Vypnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="a">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="a">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Domy České Budějovice</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " a " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " a " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " a " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-a" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-a'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-a'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
                          
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Byty prodej Lišov
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        38
      </div>
          </div>

      <div class="i-filter-table__badge">
                  <div class="i-filter-table__badge-span">
            2 nové
          </div>
              </div>

    <div class="i-filter-table__button">
          <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell-fill.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Vypnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="b">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="b">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Byty prodej Lišov</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " b " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " b " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " b " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-b" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-b'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-b'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
                          
        <div class="i-filter-table-wrapper">
  <div class="i-filter-table">
    <div class="i-filter-table__title">
      <a class="i-filter-table__title-link" href="#">
        Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc
      </a>
    </div>

    <div class="i-filter-table__counter">
      <div class="i-filter-table__counter-span">
        221
      </div>
          </div>

      <div class="i-filter-table__badge">
                  <div class="i-filter-table__badge-span">
            1 nový
          </div>
              </div>

    <div class="i-filter-table__button">
          <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/bell-fill.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Vypnout upozornění</div>

    </button>
        </div>

      </div>

  
</div>


  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="Uložit filtr: " aria-hidden="true" class="base-modal" id="c">
    <div class="base-modal__box --sm">
          <div class="base-modal__close-in" data-modal-close="c">
        <span class="icon">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
        <div class="base-modal__content">
          <div class="i-filter-table__modal-content">
      <h4 class="h2 mb-1">Muj nový filtr</h4>
      <form class="i-filter-table-form">

	<div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Název filtru</span>
</label>
    
    <textarea class="f-base textarea  mb-1" rows="5">Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc</textarea>
  </div>

	<fieldset class="i-filter-table-form__fieldset --modal">

		
		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Web</div>
			<div class="i-filter-table-form__option-extra">
				<div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Okamžitě</option>
          <option value=""  >Týdně</option>
          <option value=""  >Měsičně</option>
    
  </select>

</div>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " c " id="web-notify" name="web-notify" value="web-notify" checked="checked">
  <label class="f-label" for="web-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">E-mail</div>
			<div class="i-filter-table-form__option-extra">
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " c " id="email-notify" name="email-notify" value="email-notify" checked="checked">
  <label class="f-label" for="email-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>

		<div class="i-filter-table-form__option">
			<div class="i-filter-table-form__option-label">Telefon</div>
			<div class="i-filter-table-form__option-extra">
        <span>
          Pro upozorňování na telefon je třeba nejprve
          doplnit Vaše telefonní číslo v profilu uživatele
        </span>
			</div>
			<div class="i-filter-table-form__option-switch">
				        <div class="switch">
  <input type="checkbox" c l a s s = " b a s e - m o d a l "   i d = " c " id="phone-notify" name="phone-notify" value="phone-notify" disabled>
  <label class="f-label" for="phone-notify">
  <span class="f-label__title"></span>
</label>
</div>
			</div>
		</div>
	</fieldset>

  <div class="i-filter-table-form__delete-button">
      <a class="link --black --icon-before" href="#delete" data-target="delete-filter-c" data-toggle="modal">
      <span class="link__title">
      <span class="link__title-wrap">Smazat filtr</span>
    </span>
        <span class="link__icon ">
      <span class="icon  --lg">
      <img src="images/svg/delete-red.svg"  loading="lazy">
  
  </span>
          </span>
  </a>
  </div>

	<div class="i-filter-table-form__footer-buttons">
		  <a class="link --primary" href="#" data-modal-close='edit-filter-c'>
      <span class="link__title">
      <span class="link__title-wrap">Neukládat a zavřít</span>
    </span>
    </a>
		<button class="btn --conversion" type="submit" data-modal-close='edit-filter-c'>    <span class="btn__title ">Uložit nastavení</span>
      </button>
	</div>

</form>
    </div>
      </div>
  </div>
</div>
      
    
  </div>
</div>
      </div>
    </div>

    </div>
</section>

Schema 

    {
  "props": {
    "cta": {
      "type": "object",
      "description": "Not reqired, cta element on the left site od the table",
      "title": {
        "type": "string"
      },
      "perex": {
        "type": "string"
      },
      "buttons": {
        "type": "array of objects",
        "description": "Object are inherited from core > button component"
      },
      "imgSrc": {
        "type": "string",
        "description": "Image path"
      }
    },
    "filter_table": {
      "meta": {
        "type": "object",
        "description": "Global component settings",
        "variant": {
          "type": "string",
          "description": "history (default) | empty | saved"
        },
        "empty_note": {
          "type": "string",
          "description": "Only for 'empty' variant"
        },
        "empty_note_icon": {
          "type": "string",
          "description": "Only for 'empty' variant"
        }
      },
      "header": {
        "title": {
          "text": {
            "type": "string"
          },
          "icon": {
            "type": "string",
            "description": "Path to icon"
          }
        },
        "counter_text": {
          "type": "string"
        },
        "notification_text": {
          "type": "string"
        }
      },
      "items": {
        "type": "array of objects",
        "item_params" :[
          {
            "title": {
              "type": "string"
            },
            "counter": {
              "type": "string"
            },
            "target": {
              "type": "string"
            },
            "link": {
              "type": "string"
            },
            "is_active": {
              "type": "boolean"
            }
          }
        ]
      }
    }
  }
}