Filter table section

Saved variant

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

Nemovitosti,
které vás
zajímají.

Přihlaste se, zapněte
upozornění a hned jak se
nějaká objeví, dáme vám vědět.

Přihlásit se Registrovat

Historie filtování

Celkem nemovitosti

Zapnout upozornění

Byt 4+1, 5+kk, 5+1

6

celkem nemovitostí

Muj nový filtr

Název filtru Byt 4+1, 5+kk, 5+1

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

Byt 4+1, 5+kk, 5+1 a více, výtah

38

celkem nemovitostí

Muj nový filtr

Název filtru Byt 4+1, 5+kk, 5+1 a více, výtah

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

Domy Lišov

221

celkem nemovitostí

Muj nový filtr

Název filtru Domy Lišov

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

Byty prodej Ševětín

0

celkem nemovitostí

Muj nový filtr

Název filtru Byty prodej Ševětín

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

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í

Muj nový filtr

Název filtru Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

        {% 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__image">
    <div class="img">
  <picture>
    
    <img src="images/content/zvonek.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </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" data-target="a" data-toggle="modal">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='a' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='a'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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" data-target="b" data-toggle="modal">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='b' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='b'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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" data-target="c" data-toggle="modal">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='c' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='c'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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" data-target="d" data-toggle="modal">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='d' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='d'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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" data-target="e" data-toggle="modal">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='e' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='e'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </div>

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

    </div>
</section>

Empty variant / No history

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

Nemovitosti,
které vás
zajímají.

Přihlaste se, zapněte
upozornění a hned jak se
nějaká objeví, dáme vám vědět.

Přihlásit se Registrovat

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: "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__image">
    <div class="img">
  <picture>
    
    <img src="images/content/zvonek.png" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.549" height="19.5" viewBox="0 0 17.549 19.5">
  <g id="bell" transform="translate(0.775 0.75)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(0)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path id="Path-2" data-name="Path" d="M0,.5H3" transform="translate(6.5 17.5)" fill="none" stroke="#0062a4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
  </div>

  </button>
  </div>

</div>
      
      <div class="i-filter-table-empty-note">
  <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" width="57.425" height="52.193" viewBox="0 0 57.425 52.193">
  <g id="history" transform="translate(-673.27 -175.438)">
    <path id="Path_3546" data-name="Path 3546" d="M675.391,186.5l4.61,4.609,4.613-4.609" transform="translate(0 16.569)" fill="none" stroke="#2e3a43" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path id="Path_3547" data-name="Path 3547" d="M677.078,207.681v-6.149a24.632,24.632,0,1,1,5.414,15.376" transform="translate(2.924 0)" fill="none" stroke="#2e3a43" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path id="Path_3548" data-name="Path 3548" d="M695.58,200.74,685.6,194.8v-12.88" transform="translate(17.69 8.637)" fill="none" stroke="#2e3a43" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
  </g>
</svg>

  </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

Muj nový filtr

Název filtru Domy České Budějovice

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

Byty prodej Lišov

38

2 nové

Muj nový filtr

Název filtru Byty prodej Lišov

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

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ý

Muj nový filtr

Název filtru Byt 4+1, 5+kk, 5+1 a více na prodej, jižní Čechy, České Budějovice 1, novinky za měsíc

Web

E-mail

Telefon

Pro upozorňování na telefon je třeba nejprve doplnit Vaše telefonní číslo v profilu uživatele

Neukládat a zavřít Uložit nastavení

        {% set filter_table_section_props = {
    filter_table: {
      meta: {
        variant: "saved"
      },
      header: {
        title: {
          text :"Moje filtry",
          icon : "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">
  <svg xmlns="http://www.w3.org/2000/svg" width="18.5" height="18.506" viewBox="0 0 18.5 18.506">
  <g id="Group_2535" data-name="Group 2535" transform="translate(-239.619 -146.773)">
    <path id="Path_3808" data-name="Path 3808" d="M256.369,149.4v-.875a1,1,0,0,0-1-1h-14a1,1,0,0,0-1,1v2.586a1,1,0,0,0,.293.707l5.207,5.207v6.249a1.251,1.251,0,0,0,1.553,1.213l2.5-.625a1.252,1.252,0,0,0,.947-1.213v-1.9" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <path id="Path_3809" data-name="Path 3809" d="M253.081,152.11a.06.06,0,0,0,.091,0,2.262,2.262,0,0,1,1.7-.728,2.6,2.6,0,0,1,2.5,2.615c0,2.637-3.4,4.658-4.242,4.658s-4.243-2.021-4.243-4.658a2.6,2.6,0,0,1,2.5-2.615A2.269,2.269,0,0,1,253.081,152.11Z" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.502" height="19.5" viewBox="0 0 17.502 19.5">
  <g id="Group_2399" data-name="Group 2399" transform="translate(-227.249 -5904.25)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(228 5905)" fill="#f5ac21"/>
    <path id="Path_-_Outline" data-name="Path - Outline" d="M14.752,15.75H1.248A1.995,1.995,0,0,1,0,12.2l.309-.248A2.491,2.491,0,0,0,1.244,10V6A6.756,6.756,0,0,1,14.756,6v4a2.494,2.494,0,0,0,.937,1.952L16,12.2a1.995,1.995,0,0,1-1.249,3.55ZM8,.75A5.259,5.259,0,0,0,2.744,6v4a3.984,3.984,0,0,1-1.5,3.122l-.309.248a.495.495,0,0,0,.311.88h13.5a.495.495,0,0,0,.311-.88l-.309-.248A3.987,3.987,0,0,1,13.256,10V6A5.259,5.259,0,0,0,8,.75Z" transform="translate(228 5905)" fill="#f5ac21"/>
    <path id="Path-2" data-name="Path" d="M3,1.25H0A.75.75,0,0,1,0-.25H3a.75.75,0,0,1,0,1.5Z" transform="translate(234.5 5922.5)" fill="#f5ac21"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='a' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='a'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.502" height="19.5" viewBox="0 0 17.502 19.5">
  <g id="Group_2399" data-name="Group 2399" transform="translate(-227.249 -5904.25)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(228 5905)" fill="#f5ac21"/>
    <path id="Path_-_Outline" data-name="Path - Outline" d="M14.752,15.75H1.248A1.995,1.995,0,0,1,0,12.2l.309-.248A2.491,2.491,0,0,0,1.244,10V6A6.756,6.756,0,0,1,14.756,6v4a2.494,2.494,0,0,0,.937,1.952L16,12.2a1.995,1.995,0,0,1-1.249,3.55ZM8,.75A5.259,5.259,0,0,0,2.744,6v4a3.984,3.984,0,0,1-1.5,3.122l-.309.248a.495.495,0,0,0,.311.88h13.5a.495.495,0,0,0,.311-.88l-.309-.248A3.987,3.987,0,0,1,13.256,10V6A5.259,5.259,0,0,0,8,.75Z" transform="translate(228 5905)" fill="#f5ac21"/>
    <path id="Path-2" data-name="Path" d="M3,1.25H0A.75.75,0,0,1,0-.25H3a.75.75,0,0,1,0,1.5Z" transform="translate(234.5 5922.5)" fill="#f5ac21"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='b' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='b'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.502" height="19.5" viewBox="0 0 17.502 19.5">
  <g id="Group_2399" data-name="Group 2399" transform="translate(-227.249 -5904.25)">
    <path id="Path" d="M1.994,10V6A6.006,6.006,0,0,1,14.006,6v4a3.256,3.256,0,0,0,1.217,2.537l.309.248A1.245,1.245,0,0,1,14.752,15H1.248a1.245,1.245,0,0,1-.78-2.215l.309-.248A3.252,3.252,0,0,0,1.994,10Z" transform="translate(228 5905)" fill="#f5ac21"/>
    <path id="Path_-_Outline" data-name="Path - Outline" d="M14.752,15.75H1.248A1.995,1.995,0,0,1,0,12.2l.309-.248A2.491,2.491,0,0,0,1.244,10V6A6.756,6.756,0,0,1,14.756,6v4a2.494,2.494,0,0,0,.937,1.952L16,12.2a1.995,1.995,0,0,1-1.249,3.55ZM8,.75A5.259,5.259,0,0,0,2.744,6v4a3.984,3.984,0,0,1-1.5,3.122l-.309.248a.495.495,0,0,0,.311.88h13.5a.495.495,0,0,0,.311-.88l-.309-.248A3.987,3.987,0,0,1,13.256,10V6A5.259,5.259,0,0,0,8,.75Z" transform="translate(228 5905)" fill="#f5ac21"/>
    <path id="Path-2" data-name="Path" d="M3,1.25H0A.75.75,0,0,1,0-.25H3a.75.75,0,0,1,0,1.5Z" transform="translate(234.5 5922.5)" fill="#f5ac21"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </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__footer-buttons">
        <a class="link --black" href="#" data-modal-close='c' href="#">
  <span class="link__title">
    <span class="link__title-wrap">Neukládat a zavřít</span>
  </span>

  </a>
      <a class="btn --conversion" href='#' data-modal-close='c'>    <span class="btn__title">Uložit nastavení</span>
  
  </a>
  </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"
            }
          }
        ]
      }
    }
  }
}

Filter table section

Saved variant

Nemovitosti, které vás zajímají.

Empty variant / No history

Nemovitosti, které vás zajímají.

Saved filters variant

Schema

Nemovitosti,
které vás
zajímají.

Nemovitosti,
které vás
zajímají.