extends ../../../layouts/LayoutComponent
include ../../../mixins/common/ComingSoon

block append variables
  
  - 
    var pageHeader = {
      title: 'Advance Select',
      description: `${name} uses <b>Choices.js</b> for advance select. Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency`,
      url: `https://github.com/Choices-js/Choices`,
      linkText: 'Documentation for Choices'
    }


block prepend styles
  link(href=`${CWD}vendors/choices/choices.min.css`, rel='stylesheet')

block prepend scripts
  script(src=`${CWD}vendors/choices/choices.min.js`)


block append content
  +PageHeader(pageHeader)


  .alert.alert-success.p-x1(role='alert')
    p From Falcon 
      code 3.13.0 
      | we are intruducing advance selects using jQuery Select2. 
    a(href=`${CWD}${paths['jquery-components']}#jquery-select2-single-select`) Select2 components
      span.fas.fa-chevron-right.ms-1.fs-11

  
  +ComponentCard({
    title: 'Multiple Select Example',
    anchor: true,
  }).mb-3
    label(for="organizerMultiple") Multiple
    select.form-select.js-choice#organizerMultiple(multiple size="1" name="organizerMultiple"  data-options!={removeItemButton: true,placeholder: true})
      option(value="") Select organizer...
      option Massachusetts Institute of Technology
      option University of Chicago
      option GSAS Open Labs At Harvard
      option California Institute of Technology
  
  +ComponentCard({
    title: 'Single Select Example',
    anchor: true,
  }).mb-3
    label(for="organizerSingle") Single
    select.form-select.js-choice#organizerSingle(size="1" name="organizerSingle"  data-options!={removeItemButton: true,placeholder: true})
      option(value="") Select organizer...
      option Massachusetts Institute of Technology
      option University of Chicago
      option GSAS Open Labs At Harvard
      option California Institute of Technology 

  +ComponentCard({
    title: 'Validation Example',
    anchor: true,
  }).mb-3
    form.needs-validation(novalidate)
      .mb-3
        label(for="organizerMultiple2") Multiple
        select.form-select.js-choice#organizerMultiple2(multiple size="1" name="organizerMultiple" required  data-options!={removeItemButton: true,placeholder: true})
          option(value="") Select organizer...
          option Massachusetts Institute of Technology
          option University of Chicago
          option GSAS Open Labs At Harvard
          option California Institute of Technology
        .invalid-feedback Please select one or multiple
      .mb-3
        label(for="organizerSingle2") Single
        select.form-select.js-choice#organizerSingle2(size="1" required name="organizerSingle"  data-options!={removeItemButton: true,placeholder: true})
          option(value="" ) Select organizer...
          option Massachusetts Institute of Technology
          option University of Chicago
          option GSAS Open Labs At Harvard
          option California Institute of Technology 
        .invalid-feedback Please select one
      button.btn.btn-primary(type="submit") Submit form
      
  .card.mb-3
    .card-header
      h5.mb-0 Stylesheet
    .card-body.bg-body-tertiary  
      +ComponentCardLib
        link(href=`vendors/choices/choices.min.css`, rel='stylesheet')
  .card
    .card-header
      h5.mb-0 Javascript
    .card-body.bg-body-tertiary  
      +ComponentCardLib
        script(src=`vendors/choices/choices.min.js`)