<form class="" action="index.html" method="POST">
  <div class="card">
    <div class="card-body">

      <div class="row">

        <div class="col-lg-6 col-md-6 col-sm-12">

          <h4 class="h4">Simple input</h4>
          <div class="form-group">

            <label for="inputName" id="Name" aria-label="" class="form-control-label">Text name <span class="required">(Povinné)</span></label>
            <input type="text" aria-labelledby="Name" id="inputName" name="input" placeholder="Search" class="form-control form-control-search" value="">

          </div>

          <div class="form-group">

            <label for="email" id="e-mail" aria-label="" class="form-control-label">E-mail</label>
            <input type="email" aria-labelledby="e-mail" id="email" name="input" placeholder="Placeholder" class="form-control" value="">

          </div>

          <div class="form-group">

            <label for="heslo" id="password" aria-label="" class="form-control-label">Password</label>
            <input type="password" aria-labelledby="password" id="heslo" name="input" placeholder="Heslo" class="form-control form-control--lock" value="">

          </div>

        </div>

        <div class="col-lg-6 col-md-6 col-sm-12 card--bg__gray">
          <h4 class="h4">dark bg</h4>
          <div class="form-group">

            <label for="inputName" id="Name" aria-label="" class="form-control-label">Text name</label>
            <input type="text" aria-labelledby="Name" id="inputName" name="input" placeholder="Placeholder" class="form-control form-control-search" value="">

          </div>

          <div class="form-group">

            <label for="email" id="e-mail" aria-label="" class="form-control-label">E-mail</label>
            <input type="email" aria-labelledby="e-mail" id="email" name="input" placeholder="Placeholder" class="form-control" value="">

          </div>

          <div class="form-group">

            <label for="heslo" id="password" aria-label="" class="form-control-label">Password</label>
            <input type="password" aria-labelledby="password" id="heslo" name="input" placeholder="Placeholder" class="form-control" value="">

          </div>

          <!-- dropdown -->
          <div class="form-group">
            <label for="" class="form-control-label">Label for dropdown</label>
            <div class="dropdown">

              <button class="btn btn-secondary dropdown-toggle btn-block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </button>

              <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">lorem</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
          <!-- endif dropdown -->

        </div>

      </div>

      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">

          <h4 class="h4">Error input</h4>

          <div class="form-group form-group__error">

            <label for="inputAddress" id="Address" aria-label="" class="form-control-label">Text address</label>
            <input type="text" aria-labelledby="Address" id="inputAddress" name="input" placeholder="Placeholder" class="form-control" value="">
            <!-- message  -->
            <div class="form-text"> AAAWWWW Im a green Lorem Ipsum, good Deadpool good. </div>
            <!-- endif message  -->

          </div>

          <div class="form-group form-group__error">

            <label for="email-error" id="e-mail-error" aria-label="" class="form-control-label">E-mail</label>
            <input type="email" aria-labelledby="e-mail-error" id="email-error" name="input" placeholder="Placeholder" class="form-control" value="">
            <!-- message  -->
            <div class="form-text"> AAAWWWW Im a green Lorem Ipsum, good Deadpool good. </div>
            <!-- endif message  -->
          </div>

          <div class="form-group form-group__error">

            <label for="hesloError" id="passwordError" aria-label="" class="form-control-label">Password</label>
            <input type="password" aria-labelledby="passwordError" id="hesloError" name="input" placeholder="Placeholder" class="form-control" value="">
            <!-- message  -->
            <div class="form-text"> AAAWWWW Im a green Lorem Ipsum, good Deadpool good. </div>
            <!-- endif message  -->
          </div>

          <h4 class="h4">Warning inputs</h4>

          <div class="form-group form-group__warning">

            <label for="inputAddress" id="Address" aria-label="" class="form-control-label form-control-label__focus">Text address</label>
            <input type="text" aria-labelledby="Address" id="inputAddress" name="input" placeholder="Placeholder" class="form-control" value="">
            <!-- message  -->
            <div class="form-text"> AAAWWWW Im a green Lorem Ipsum, good Deadpool good. </div>
            <!-- endif message  -->
          </div>

          <div class="form-group form-group__warning">

            <label for="email-success" id="e-mail-success" aria-label="" class="form-control-label">E-mail</label>
            <input type="email" aria-labelledby="e-mail-success" id="email-success" name="input" placeholder="Placeholder" class="form-control" value="">
            <!-- message  -->
            <div class="form-text"> AAAWWWW Im a green Lorem Ipsum, good Deadpool good. </div>
            <!-- endif message  -->
          </div>

          <div class="form-group form-group__warning">

            <label for="hesloSuccess" id="passwordSuccess" aria-label="" class="form-control-label">Password</label>
            <input type="password" aria-labelledby="passwordSuccess" id="hesloSuccess" name="input" placeholder="Placeholder" class="form-control" value="">
            <!-- message  -->
            <div class="form-text"> AAAWWWW Im a green Lorem Ipsum, good Deadpool good. </div>
            <!-- endif message  -->
          </div>

        </div>

      </div>
      <div class="row">
        <div class="col-lg-6">
          <h1 class="h1">inline input</h1>
          <div class="form-group row">
             <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
             <div class="col-sm-10">
               <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
             </div>
          </div>
          <div class="form-group row">
             <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
             <div class="col-sm-10">
               <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
             </div>
          </div>
          <div class="form-group row">
             <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
             <div class="col-sm-10">
               <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
             </div>
          </div>
        </div>
      </div>
      <h1 class="h1">Dropdown</h1>
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">

            <!-- dropdown -->
            <div class="dropdown">

              <button class="btn btn-secondary dropdown-toggle btn-block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </button>

              <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">lorem</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>

            </div>
            <!-- endif dropdown -->
          </div>
          <div class="form-group">
            <!-- dropdown -->
            <div class="dropdown">

              <button class="btn btn-secondary dropdown-toggle btn-block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </button>

              <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">lorem</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>

            </div>
            <!-- endif dropdown -->
          </div>

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

          <label class="form-control-label" for="inlineFormInputGroup">Username</label>
          <div class="input-group mb-2">

            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="placeholder">
            <div class="input-group-prepend">
              <div class="input-group-text">Kč</div>
            </div>
          </div>

          <label class="form-control-label" for="inlineFormInputGroup">Username</label>
          <div class="input-group mb-2">

            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="placeholder">
            <div class="input-group-prepend">
              <div class="input-group-text"> <i class="icon icon--pig"></i> </div>
            </div>
          </div>

        </div>
      </div>

    </div>

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

      {{#buttons}}  {{>atoms-buttons}}  {{/buttons}}

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