{{#header}} {{>lab1-header}} {{/header}}
<main class="container" role="main">
  <form class="row  d-flex justify-content-center">
    <div class="col-lg-12">
      {{#headline}} {{>atoms-headlines}} {{/headline}}
    </div>
    <div class="col-lg-8">
      <div class="row">
        <div class="col-lg-4 w-100 d-flex align-items-stretch">
          <div class="card mb-4 w-100 card--shadow">
            <div class="card-body">
              <!-- radio -->
              <div class="text-center mb-4">
                <i class="icon icon--big-house"></i>
              </div>
                <label class="custom-control custom-radio custom-control-inline ">
                  <input id="" name="name" type="radio" class="custom-control-input" >
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">Dům, hobby a zahrada</span>
                </label>
              <!-- endif radio -->
            </div>
          </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
          <div class="card mb-4 w-100 card--shadow">
            <div class="card-body">
              <div class="text-center mb-4">
                <i class="icon icon--big-pc"></i>
              </div>
              <label class="custom-control custom-radio custom-control-inline ">
                <input id="" name="name" type="radio" class="custom-control-input" >
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Elektronika</span>
              </label>
            </div>
          </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
          <div class="card mb-4 w-100 card--shadow">
            <div class="card-body">
              <div class="text-center mb-4">
                <i class="icon icon--big-tenis"></i>
              </div>
              <label class="custom-control custom-radio custom-control-inline ">
                <input id="" name="name" type="radio" class="custom-control-input" >
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Cestování a sport</span>
              </label>
            </div>
          </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
          <div class="card mb-4 w-100 card--shadow">
            <div class="card-body">
              <div class="text-center mb-4">
                <i class="icon icon--big-spoon"></i>
              </div>
              <label class="custom-control custom-radio custom-control-inline ">
                <input id="" name="name" type="radio" class="custom-control-input" >
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Restaurace a kultura</span>
              </label>
            </div>
          </div>
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
          <div class="card mb-4 w-100 card--shadow">
            <div class="card-body">
              <div class="text-center mb-4">
                <i class="icon icon--big-cat"></i>
              </div>
              <label class="custom-control custom-radio custom-control-inline ">
                <input id="" name="name" type="radio" class="custom-control-input" >
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Mazlíčci</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-lg-6">
          <button type="button" class="btn btn-block btn-secondary mb-3" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Informace</button>
        </div>
        <div class="col-lg-6">
          {{#nextStep}} {{>atoms-buttons}} {{/nextStep}}
        </div>
      </div>
    </div>
  </form>
</main>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-left" role="document">
    <div class="modal-content">
      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="close" data-toggle="" data-target=""></button>

      </div>

      <div class="modal-body">
        <h4 class="h4 pb-0">Jak funguje 5% odměna?</h4>
        <div class="line"></div>
        <ul class="nopads">
          <li class="list-group-item">
            <i class="icon icon--combine-shape float-left mr-2"></i>Odměna platí v <strong> obchodech i online</strong> u všech obchodníků ve zvoleném balíčku odměn
          </li>
          <li class="list-group-item">
            <i class="icon icon--combine-shape float-left mr-2"></i>Odměnu Vám vrátíme vždy zpětně za celý měsíc <strong> až do výše 500 Kč</strong>
          </li>
          <li class="list-group-item">
            <i class="icon icon--combine-shape float-left mr-2"></i> <strong>Odměna se sčítá s výhodou bene+</strong>
             (Např. s odměnou Elektronika na Vás v Datartu čeká odměna 5 % + 2 %,
             tedy <strong>celkem 7 %</strong>)
          </li>
          <li class="list-group-item">
            <i class="icon icon--combine-shape float-left mr-2"></i> Změna balíčku je možná jednou za kalendářní čtvrtletí.
          </li>
        </ul>
        Podívejte se na celé . <a href="#" class="link">Podmínky věrnostního programu</a>
      </div>

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