{{#header}}{{>hypolab-hypo-menu}}{{/header}}
<main role="main" class="container">
  <div class="row">
    <!-- main left column -->
    <div class="col-lg-3">
      <div class="card card-body mb-4">

        <form role="search" action="" class="form-inline">
          <div class="form-group mb-4 w-100">
            <label for="" id="" aria-label="" aria-labelledby="" class="form-control-label ">Přejít na obchod <span class="required">  </span> </label>
            <input type="text" aria-labelledby="" aria-required="true" id="" name="input" tabindex="" placeholder="ID" class="form-control form-control-sm w-50 mr-3" value="">
            <button type="" class="btn btn-secondary btn-sm" aria-label="">Přejít</button>
          </div>
        </form>

        <h5 class="h5 pb-1">Užitečné odkazy</h5>
        <ul class="list-group">
          <li class="list-group-item pl-0">
            <a href="#" class="link"><small>Hypoteka.cz</small>  </a>
          </li>
          <li class="list-group-item pl-0">
            <a href="#" class="link"><small>ARES</small> </a>
          </li>
          <li class="list-group-item pl-0">
            <a href="#" class="link"><small>Nahlížení do katastru</small> </a>
          </li>
        </ul>
      </div>
      <div class="card card-body p-0">
        <figure class="mb-0">
          <img src="{{img_src}}/hypo-left-banner.png" alt="" class="w-100">
        </figure>
      </div>
    </div>
    <!-- endif main left column -->

    <!-- main center column -->
    <div class="col-lg-6">
      <div class="card card-body mb-4 p-0">
        <figure class="mb-0">
          <img src="{{img_src}}/hypo-banner.png" alt="banner moneta s kočičkou" class="w-100">
        </figure>
      </div>
      <div class="card mb-4">
        <div class="card-body pb-0">
          <h5 class="h5 pb-1">Poslední novinky a akce</h5>
        </div>
        <div class="accordion" id="accordionExample">
          <div class="card">
            <div class="" id="headingOne">
              <h5 class="mb-0">
                <button class="btn btn-block btn-accordeon p-3" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  <span class="badge badge-rounded badge-primary ml-0">Nové</span>
                  <i class="icon icon--arr-down float-right"></i>
                    Moneta vydala lorem ipsum dolor sit amet
                  <p class="text-secondary pb-0">
                    datum
                  </p>
                </button>
              </h5>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                <p class="text-primary">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </p>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="" id="headingTwoo">
              <h5 class="mb-0">
                <button class="btn btn-block btn-accordeon p-3" type="button" data-toggle="collapse" data-target="#collapseTwoo" aria-expanded="true" aria-controls="collapseTwoo">
                  <i class="icon icon--arr-down float-right"></i>
                    Moneta vydala lorem ipsum dolor sit amet  Moneta vydala lorem ipsum dolor sit amet
                  <p class="text-secondary pb-0">
                    datum
                  </p>

                </button>
              </h5>
            </div>

            <div id="collapseTwoo" class="collapse" aria-labelledby="headingTwoo" data-parent="#accordionExample">
              <div class="card-body">
                <p class="text-primary">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </p>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="card card-body mb-4">
        <h5 class="h5">Nejnovější dokumenty</h5>
        <ul class="list-group">
          <li class="list-group-item pl-0">
            <a href="#">
              <i class="icon icon--download icon--sm float-left mt-1 mr-2"></i>
              <div class="text-primary pb-0 ml-4">Kalkulátor hypotéka MMB <div class="text-secondary pb-0">platnost od 19.1.2019</div></div>
            </a>
          </li>
          <li class="list-group-item pl-0">
            <a href="#">
              <i class="icon icon--download icon--sm float-left mt-1 mr-2"></i>
              <div class="text-primary pb-0 ml-4">Kalkulátor hypotéka MMB <div class="text-secondary pb-0">platnost od 19.1.2019</div></div>
            </a>
          </li>
          <li class="list-group-item pl-0">
            <a href="#">
              <i class="icon icon--download icon--sm float-left mt-1 mr-2"></i>
              <div class="text-primary pb-0 ml-4">Kalkulátor hypotéka MMB <div class="text-secondary pb-0">platnost od 19.1.2019</div></div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- endif main center column -->

    <!-- main right column -->
    <div class="col-lg-3">
      <div class="card card-body">
        <h5 class="h5 pb-1">Úroková sazba od:</h5>
        <h5 class="text-primary pb-1"><strong>Pružná hypotéka</strong></h5>
        <table class="table table-striped table-borderless">
          <thead>
            <tr>
              <th scope="col">Fixace</th>
              <th scope="col">Sazba</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1 rok</td>
              <td>1.77%</td>
            </tr>
            <tr>
              <td>3 roky</td>
              <td>1.77%</td>
            </tr>
            <tr>
              <td>5 let</td>
              <td>1.97%</td>
            </tr>
            <tr>
              <td>10 let</td>
              <td>2.97%</td>
            </tr>
          </tbody>
        </table>
        <h5 class="text-primary pb-1"><strong>Hypotéka MMB+</strong></h5>
        <table class="table table-striped table-borderless">
          <thead>
            <tr>
              <th scope="col">Fixace</th>
              <th scope="col">Sazba</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1 rok</td>
              <td>1.77%</td>
            </tr>
            <tr>
              <td>3 roky</td>
              <td>1.77%</td>
            </tr>
            <tr>
              <td>5 let</td>
              <td>1.97%</td>
            </tr>
            <tr>
              <td>10 let</td>
              <td>2.97%</td>
            </tr>
          </tbody>
        </table>
        <h5 class="text-primary pb-1"><strong>Pružná hypotéka <br> s variabilní sazbou</strong></h5>
        <table class="table table-striped table-borderless">
          <thead>
            <tr>
              <th scope="col">Fixace</th>
              <th scope="col">Sazba</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1 rok</td>
              <td>1.77%</td>
            </tr>
            <tr>
              <td>3 roky</td>
              <td>1.77%</td>
            </tr>
            <tr>
              <td>5 let</td>
              <td>1.97%</td>
            </tr>
            <tr>
              <td>10 let</td>
              <td>2.97%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- endif main right column -->
  </div>
</main>