<!-- udělat na 1024 width owner Pavel Digaňa -->

<div class="container-fluid">

  {{#navbar}} {{>organism-navbar}} {{/navbar}}
  <form class="" action="" method="post">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="h1 pb-3">Kalkulace na audi</h1>
      </div>
      <div class="col-lg-7">

        <div class="card">
          <div class="card-body card--bg__gray pb-0">

            <div class="row">

              <div class="col-lg-12">

                <div class="btn-group" role="group" aria-label="Basic example">
                  <button type="button" class="btn btn-sm btn-secondary">Nepodnikatel</button>
                  <button type="button" class="btn btn-sm btn-secondary">Plátce DPH</button>
                  <button type="button" class="btn btn-sm btn-secondary">Neplátce DPH</button>
                </div>

              </div>

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

        <div class="card">
          <div class="card-body card--bg__gray pb-0">
            <div class="row">

              <div class="col-lg-5">

                <label for="" class="form-control-label">Vozidlo</label>
                <div class="btn-group">
                  <button type="button" class="btn btn-secondary btn-sm" name="button">Nový</button>
                  <button type="button" class="btn btn-secondary btn-sm" name="button">Ojetý</button>
                </div>
              </div>
              <div class="col-lg-7">
                {{#searchCombo}} {{>molecules-input-with-label-tooltip}} {{/searchCombo}}
              </div>

              <div class="col-lg-12">
                <div class="row">

                  <div class="col-lg-12">
                    {{#group}} {{>molecules-input-with-label-tooltip}} {{/group}}
                  </div>
                  <div class="col-lg-6">
                    {{#carUsing}} {{>molecules-input-with-label-tooltip}} {{/carUsing}}
                  </div>
                  <div class="col-lg-6">
                    <div class="form-group mb-0">

                      <label for="" class="form-control-label">Datum registrace vozidla</label>
                      <input type="text" class="form-control form-control-sm form-control-date" name="" value="" placeholder="Datepicker">

                    </div>
                  </div>
                  <div class="col-lg-6">

                    {{#carPrice}} {{>molecules-input-with-label-tooltip}} {{/carPrice}}

                  </div>

                  <div class="col-lg-6">

                    <div class="form-group mb-0">
                      <label for="" class="form-control-label"> &nbsp;</label>
                      {{#checkboxDPH}} {{>atoms-checkbox}} {{/checkboxDPH}}
                    </div>

                  </div>

                </div>
              </div>

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

        <div class="card">
          <div class="card-body pt-0 card--bg__gray">
            <label for="" class="form-control-label">Financování</label>
            <div class="card tile">
              <div class="card-body card--border p-2">
                <div class="row">
                  <div class="col-lg-5">
                    <p class="text-primary pb-0 pl-2"><strong>Generali pojišťovna a.s.</strong></p>
                  </div>
                  <div class="col-lg-7">
                    <p class="text-secondary pb-0 pl-2">500 Kč měsíčně / 6000 Kč Ročně</p>
                  </div>
                  <div class="col-lg-12 pt-2">
                    <p class="text-secondary pl-2"> Lorem ipsum dolor sit amet, consectetuut labore et dolore magnatate velit esse cillum dolore eu fugiat nulla pariatur.   </p>
                  </div>
                </div>
              </div>
            </div>

            <label for="" class="form-control-label">Povinné ručení</label>
            <div class="card tile">
              <div class="card-body card--border p-2">
                <p class="text-primary pb-0 pl-2">Vyberte záznam</p>
              </div>
            </div>
            <label for="" class="form-control-label">Havarijní pojištění</label>
            <div class="card tile">
              <div class="card-body card--border p-2">
                <p class="text-primary pb-0 pl-2">Vyberte záznam</p>
              </div>
            </div>
            <label for="" class="form-control-label">Benefity</label>
            <div class="card tile">
              <div class="card-body card--border p-2">
                <p class="text-primary pb-0 pl-2">Vyberte záznam</p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col-lg-5">

        <div class="card">
          <div class="card-body">

            <div class="row">

              <div class="col-lg-12">
                <div class="dropdown">
                  <button class="btn btn-secondary btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Další akce
                  </button>
                  <div class="dropdown-menu p-3" aria-labelledby="dropdownMenuButton">
                    <button type="button" class="btn btn-sm btn-block btn-secondary dropdown-item" name="button">Předat žádost</button>
                    <button type="button" class="btn btn-sm btn-block btn-secondary dropdown-item" name="button">Uložit žádost</button>
                    <button type="button" class="btn btn-sm btn-block btn-secondary dropdown-item" name="button">Odeslat žádost</button>
                  </div>
                </div>

                <h2 class="h5 mt-3">Úvěr
                  <span class="badge badge-success">
                    Dokladovost kompletní
                  </span>
                  {{#badgeSuccess}} {{>atoms-badges}} {{/badgeSuccess}}
                </h2>
              </div>

            </div>

            <div class="row">

              <div class="col-lg-6">
                {{#firstPayment}} {{>molecules-input-with-label-tooltip}} {{/firstPayment}}
                {{#typographyFirstPayment}} {{>molecules-typography}} {{/typographyFirstPayment}}
              </div>

              <div class="col-lg-6">

                {{#lastPayment}} {{>molecules-input-with-label-tooltip}} {{/lastPayment}}
                {{#typographyLastPayment}} {{>molecules-typography}} {{/typographyLastPayment}}
              </div>

            </div>

            <div class="row">

              <div class="col-lg-6">

                {{#numberOfCharges}} {{>molecules-input-with-label-tooltip}} {{/numberOfCharges}}
                {{#typographyNumberOfCharges}} {{>molecules-typography}} {{/typographyNumberOfCharges}}
              </div>

              <div class="col-lg-6">

                {{#payment}} {{>molecules-input-with-label-tooltip}} {{/payment}}
                {{#typographyPayment}} {{>molecules-typography}} {{/typographyPayment}}
                {{#calculator}} {{>atoms-buttons}} {{/calculator}}
                <a href="#" class="btn-link">Splátková kalkulačka</a>
              </div>

            </div>

            <div class="row">
              <div class="col-lg-6">
                {{#creditLabel}} {{>atoms-labels}} {{/creditLabel}}
                <div class="price price--medium">
                  150 000 Kč
                </div>
              </div>
              <div class="col-lg-6">
                {{#percentLabel}} {{>atoms-labels}} {{/percentLabel}}
                <div class="price price--medium">
                  5.7 %
                </div>
                {{#typographyNumberOfCharges}} {{>molecules-typography}} {{/typographyNumberOfCharges}}
              </div>
            </div>

            <div class="row">

              <div class="col-lg-6">
                {{#save}} {{>atoms-buttons}} {{/save}}
              </div>

              <div class="col-lg-6">
                {{#print}} {{>atoms-buttons}} {{/print}}
              </div>

            </div>

          </div>
        </div>

        <div class="card card--transparent">
          <div class="card-body">
            <h4 class="h4">Uložené verze</h4>
            <div>
              <a href="#" class="link">9 865 Kč měsíčně, 30 splátek, 22% úrok</a>
            </div>
            <div>
              <a href="#" class="link">9 865 Kč měsíčně, 30 splátek, 22% úrok</a>
            </div>

          </div>
        </div>

      </div>

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