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

  <div class="form-group">
    <label>Birthday</label>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <select id="exampleInputDateYear" class="custom-select mr-1" required>
        <option></option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
      </select>

      <select id="exampleInputDateMonth" class="custom-select mx-1" required>
        <option></option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>

      <select id="exampleInputDateDay" class="custom-select ml-1" required>
        <option></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Date multi select example</small>
  </div>

  <div class="form-group">
    <label for="exampleCustomFile">Avatar</label>
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFile">
      <label class="custom-file-label" for="customFile">Choose file</label>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">File input example</small>
  </div>

  <fieldset class="form-group">
    <legend class="col-form-label pt-0">Color</legend>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio1" value="option1" required>
      <label class="custom-control-label" for="exampleInlineRadio1">Red</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio2" value="option2" required>
      <label class="custom-control-label" for="exampleInlineRadio2">Pink</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio3" value="option3" required>
      <label class="custom-control-label" for="exampleInlineRadio3">Violet</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio4" value="option4" required>
      <label class="custom-control-label" for="exampleInlineRadio4">Indigo</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio5" value="option5" required>
      <label class="custom-control-label" for="exampleInlineRadio5">Blue</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio6" value="option6" required>
      <label class="custom-control-label" for="exampleInlineRadio6">Teal</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio7" value="option7" required>
      <label class="custom-control-label" for="exampleInlineRadio7">Green</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio8" value="option8" required>
      <label class="custom-control-label" for="exampleInlineRadio8">Yellow</label>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Collection as inline radio buttons example</small>
  </fieldset>

  <fieldset class="form-group">
    <legend class="col-form-label pt-0">Fruit</legend>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox1" value="option1" required>
      <label class="custom-control-label" for="exampleInlineCheckbox1">Apple</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox2" value="option2" required>
      <label class="custom-control-label" for="exampleInlineCheckbox2">Banana</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox3" value="option3" required>
      <label class="custom-control-label" for="exampleInlineCheckbox3">Cherry</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox4" value="option4" required>
      <label class="custom-control-label" for="exampleInlineCheckbox4">Coconut</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox5" value="option5" required>
      <label class="custom-control-label" for="exampleInlineCheckbox5">Grape</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox6" value="option6" required>
      <label class="custom-control-label" for="exampleInlineCheckbox6">Lime</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox7" value="option7" required>
      <label class="custom-control-label" for="exampleInlineCheckbox7">Mango</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox8" value="option8" required>
      <label class="custom-control-label" for="exampleInlineCheckbox8">Orange</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox9" value="option9" required>
      <label class="custom-control-label" for="exampleInlineCheckbox9">Pear</label>
    </div>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox10" value="option10" required>
      <label class="custom-control-label" for="exampleInlineCheckbox10">Pineapple</label>
    </div>
    <small class="form-text text-muted">Collection as inline check boxes example</small>
  </fieldset>

  <div class="form-group">
    <label for="exampleSelectMusic">Music</label>
    <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>
    <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-group">
    <label for="exampleSelectLanguage">Language</label>
    <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>
    <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>

  <fieldset class="form-group">
    <legend class="col-form-label pt-0">Pill</legend>
    <div class="custom-control custom-radio">
      <input class="custom-control-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillRed" value="red" required>
      <label class="custom-control-label" for="exampleRadiosPillRed">
        Red pill
      </label>
    </div>
    <div class="custom-control custom-radio">
      <input class="custom-control-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillBlue" value="blue" required>
      <label class="custom-control-label" for="exampleRadiosPillBlue">
        Blue pill
      </label>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Collection as radio buttons example</small>
  </fieldset>

  <fieldset class="form-group">
    <legend class="col-form-label pt-0">Choises</legend>
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="exampleCheckbox1" value="option1" required>
      <label class="custom-control-label" for="exampleCheckbox1">Learn the Ruby programming language</label>
    </div>
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="exampleCheckbox2" value="option1" required>
      <label class="custom-control-label" for="exampleCheckbox2">Create a Ruby on Rails application</label>
    </div>
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="exampleCheckbox3" value="option1" required>
      <label class="custom-control-label" for="exampleCheckbox3">Practice Ruby, Rails, Tests and Simple Form</label>
    </div>
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="exampleCheckbox4" value="option1" required>
      <label class="custom-control-label" for="exampleCheckbox4">Deploy your application in the cloud</label>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Collection as check boxes example</small>
  </fieldset>

  <div class="form-group">
    <label for="exampleRangeMood">Mood</label>
    <input type="range" class="custom-range" id="exampleRangeMood" step="10" required>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Integer range example</small>
  </div>

  <div class="form-group">
    <label>Awake</label>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <select id="exampleInputTimeHour" class="custom-select mr-1" required>
        <option></option>
        <option value="00">00</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
      </select>
      :
      <select id="exampleInputTimeMinute" class="custom-select ml-1" required>
        <option></option>
        <option value="00">00</option>
        <option value="30">30</option>
      </select>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Time multi select example</small>
  </div>

  <div class="form-group">
    <label>First kiss</label>
    <div class="d-flex flex-row justify-content-between align-items-center">
      <select id="exampleInputDatetimeYear" class="custom-select mr-1" required>
        <option></option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
      </select>

      <select id="exampleInputDatetimeMonth" class="custom-select mx-1" required>
        <option></option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>

      <select id="exampleInputDatetimeDay" class="custom-select mx-1" required>
        <option></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      —
      <select id="exampleInputDatetimeHour" class="custom-select mx-1" required>
        <option></option>
        <option value="00">00</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
      </select>
      :
      <select id="exampleInputDatetimeMinute" class="custom-select ml-1" required>
        <option></option>
        <option value="00">00</option>
        <option value="30">30</option>
      </select>
    </div>
    <small class="form-text text-muted">Datetime multi select example</small>
  </div>

  <fieldset class="form-group">
    <div class="custom-control custom-switch">
      <input class="custom-control-input" type="checkbox" value="" id="exampleCheckTerms" required>
      <label class="custom-control-label" for="exampleCheckTerms">Terms</label>
      <div class="invalid-feedback">Terms must be accepted</div>
      <div class="valid-feedback">Looks good!</div>
      <small class="form-text text-muted">Boolean as check box example</small>
    </div>
  </fieldset>

  <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_custom_path,
  wrapper_mappings: {
    boolean:       :custom_boolean,
    check_boxes:   :custom_collection,
    date:          :custom_multi_select,
    datetime:      :custom_multi_select,
    file:          :custom_file,
    radio_buttons: :custom_collection,
    range:         :custom_range,
    time:          :custom_multi_select,
    select:        :custom_multi_select
  } do |f| %>

  <%= f.error_notification %>

  <%= render partial: "shared/form_unused_as_hidden", locals: {
    f: f, fields: [:name, :email, :password, :bio, :active, :friends]
  } %>

  <%= f.input :birthday %>

  <%= f.input :avatar, as: :file, input_html: { accept: User::AVATAR } %>

  <%= f.input :color, as: :radio_buttons, collection: User::COLOR, wrapper: :custom_collection_inline %>

  <%= f.input :fruit, as: :check_boxes, collection: User::FRUIT, wrapper: :custom_collection_inline %>

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

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

  <%= f.input :pill, as: :radio_buttons, collection: User::PILL %>

  <%= f.input :choises, as: :check_boxes, collection: User::CHOISES %>

  <%= f.input :mood, as: :range, input_html: { step: 10 } %>

  <%= f.input :awake %>

  <%= f.input :first_kiss %>

  <%= f.input :terms, wrapper: :custom_boolean_switch %>

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