<form class="needs-validation" novalidate>
  <div class="alert alert-danger d-none">Please review the problems below:</div>

  <div class="form-label-group">
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
    <label for="exampleInputEmail">Email</label>
    <div class="invalid-feedback">Email can't be blank</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>

  <div class="form-label-group">
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
    <label for="exampleInputPassword">Password</label>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Password input example</small>
  </div>

  <div class="form-label-group">
    <select multiple="" class="custom-select" id="exampleSelectMusic" required>
      <option value="rock">Rock</option>
      <option value="pop">Pop</option>
      <option value="jazz">Jazz</option>
      <option value="heavy_metal">Heavy Metal</option>
      <option value="hip_hop">Hip Hop</option>
      <option value="house">House</option>
      <option value="electronic_dance">EDM</option>
      <option value="dance">Dance</option>
      <option value="techno">Techno</option>
    </select>
    <label for="exampleSelectMusic">Music</label>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Collection multiple select example</small>
  </div>

  <div class="form-label-group">
    <select class="custom-select" id="exampleSelectLanguage" required>
      <option value="">Select your Language</option>
      <option value="en">English</option>
      <option value="de">German</option>
      <option value="es">Spanish</option>
      <option value="ru">Russian</option>
    </select>
    <label for="exampleSelectLanguage">Language</label>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Collection select example</small>
  </div>

  <div class="form-label-group">
    <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
    <label for="exampleTextareaBio">Bio</label>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Textarea input example</small>
  </div>

  <button type="submit" class="btn btn-primary">Create User!</button>
  <button type="reset" class="btn btn-outline-secondary">Cancel</button>
</form>

<%= simple_form_for @user, url: examples_floating_label_path,
  wrapper: :floating_labels_form,
  wrapper_mappings: {
    select:        :floating_labels_select
  } do |f| %>

  <%= f.error_notification %>

  <%= render partial: "shared/form_unused_as_hidden", locals: {
    f: f, fields: [:name, :avatar, :birthday, :color, :fruit, :pill, :choises, :active, :friends, :mood, :awake, :first_kiss]
  } %>

  <%= f.input :email %>

  <%= f.input :password %>

  <%= f.input :music, collection: User::MUSIC, input_html: { multiple: true } %>

  <%= f.input :language, collection: User::LANGUAGE, prompt: :translate %>

  <%= f.input :bio %>

  <%= f.button :submit, class: "btn-primary" %>
  <%= f.button :button, "Cancel", type: "reset", class: "btn-outline-secondary" %>
<% end %>