- var page_select3          = true;
- var select2_options       = true;
- var custom_select2        = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Select2
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Widgets
                    li.breadcrumb-item.active Select2
          // Container-fluid starts
          .container-fluid
            .select2-drpdwn
              .row
                // Tagify select2 start
                .col-md-12
                  .card 
                    .card-header 
                      h4 Single-value select
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for drag and sort options available.
                    .card-body 
                      form.row.g-3
                        .col-xl-3.col-sm-6
                          input.selectMode.badge-light-primary(name='tags-select-mode' placeholder='Please select')
                        .col-xl-3.col-sm-6
                          input.selectMode.badge-light-secondary(name='tags-select-value-mode' placeholder='Please select')
                        .col-xl-3.col-sm-6
                          input.selectMode.badge-light-light(name='tags-select-v-mode' placeholder='Please select')
                        .col-xl-3.col-sm-6
                          input.selectMode.badge-light-warning(name='tags-s-value-mode' placeholder='Please select')
                .col-sm-6
                  .card
                    .card-header
                      h4 Default select 
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select options and edit.
                    .card-body
                      form
                        input(name='basic' value='tag1, tag2, tag3, tag4 autofocus')
                .col-sm-6 
                  .card 
                    .card-header 
                      h4 Random suggestions
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select options.
                    .card-body 
                      form
                        input.some_class_name(name='input-custom-dropdown' placeholder='write some tags' value='tivo, roxo, sheltos, viho, zeta, koho')
                .col-sm-6 
                  .card 
                    .card-header 
                      h4 Colors select options
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select colors options.
                    .card-body 
                      form
                        input(name='tags3' value='[{"value":"point"}, {"value":"soft"}, {"value":"horse"}, {"value":"flood"}, {"value":"asset"}]' pattern='^[A-Za-z_✲ ]{1,15}$')
                .col-sm-6 
                  .card 
                    .card-header 
                      h4 Flags selection
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select flags options.
                    .card-body 
                      form
                        input.countries(name='tags3-1' placeholder='Try to add tags from the list')
                .col-md-4.col-md-6
                  .card
                    .card-header 
                      h4 Readonly options
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for readonly options.
                    .card-body 
                      form
                        input(name='tags4' readonly='' value='tag1, tag 2, another tag')
                .col-md-4.col-md-6
                  .card
                    .card-header 
                      h4 Read and write options
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for read and write options.
                    .card-body 
                      form
                        input.readonlyMix(name='tags-readonly-mix' placeholder='Type something' value='[\
                        {\
                        "value"    : "foo",\
                        "readonly" : true,\
                        "title"    : "read-only tag"\
                        },\
                        {\
                        "value"    : "bar"\
                        },\
                        {\
                        "value"    : "Locked tag",\
                        "readonly" : true,\
                        "title"    : "Another readonly tag"\
                        }\
                        ]')
                .col-md-4.col-md-6
                  .card
                    .card-header 
                      h4 Disabled readonly
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for readonly option available.
                    .card-body 
                      form
                        input(name='disabledInput' disabled='' value='tag1, tag 2, another tag')
                .col-md-4.col-md-6
                  .card
                    .card-header 
                      h4 Customize emails
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select email options.
                    .card-body 
                      form
                        input.customLook(value='pixelstrap.theme@website.com')
                        button(type='button') +
                .col-md-4.col-md-6
                  .card
                    .card-header 
                      h4 Telephone input
                      p.f-m-light.mt-1 
                        | Select the country and enter your telephone number.
                    .card-body 
                      form.international-num
                        input#country(type='tel')
                .col-md-4.col-md-6
                  .card
                    .card-header 
                      h4 Movie suggestions
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select movie options.
                    .card-body 
                      form
                        textarea(name='tags2' placeholder='Enter movie names')
                          | [{&quot;value&quot;:&quot;Hot Sit&quot;}, {&quot;value&quot;:&quot;The Matrix&quot;}]
                .col-md-6 
                  .card.height-equal
                    .card-header 
                      h4 Autocomplete words
                      p.f-m-light.mt-1 
                        | Enter any letter and display autocomplete words.
                    .card-body 
                      form.international-num.row
                        .col-12
                          label(for="autokeyword") Search programming language 
                        .col-12
                          input#autokeyword(type='text' placeholder='Search..' onkeyup='getValue(this.value)') 
                          .results
                .col-md-6
                  .card.height-equal
                    .card-header 
                      h4 Select input using search option
                      p.f-m-light.mt-1 
                        | Use search option through select any options.
                    .card-body 
                      .select-box
                        .options-container
                          .selection-option
                            input#webdesigner.radio(type='radio' name='category')
                            label.mb-0(for='webdesigner') web-designer
                          .selection-option
                            input#film.radio(type='radio' name='category')
                            label.mb-0(for='film') Film &amp; Animation
                          .selection-option
                            input#software.radio(type='radio' name='category')
                            label.mb-0(for='software') software-engineer
                          .selection-option
                            input#art.radio(type='radio' name='category')
                            label.mb-0(for='art') Art
                          .selection-option
                            input#music.radio(type='radio' name='category')
                            label.mb-0(for='music') Music
                          .selection-option
                            input#travel.radio(type='radio' name='category')
                            label.mb-0(for='travel') Travel &amp; Events
                          .selection-option
                            input#sports.radio(type='radio' name='category')
                            label.mb-0(for='sports') Sports
                          .selection-option
                            input#news.radio(type='radio' name='category')
                            label.mb-0(for='news') News &amp; Politics
                          .selection-option
                            input#tutorials.radio(type='radio' name='category')
                            label.mb-0(for='tutorials') Tutorials
                        .selected-box
                          | Select Your Profession
                        .search-box
                          input(type='text' placeholder='Start Typing...')
                .col-md-12
                  .card 
                    .card-header 
                      h4 Render suggestions list manually
                      p.f-m-light.mt-1 
                        | Use the tagify plugin for select random options.
                    .card-body 
                      form
                        input(name='tags-manual-suggestions' placeholder='write some tags')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
