- var page_Title = 'Apply';
- var accordion             = true;
- var theme_customizer      = true;
- var select2               = true;
- var date_picker           = true;
- var bs_select             = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Apply
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Jobs
                    li.breadcrumb-item.active Apply
          // Container-fluid starts
          .container.job-apply-wrapper
            .grid.grid-cols-12.card-gap
              div(class="col-span-3 xl-40 xl:col-span-12 box-col-12")
                .md-sidebar
                  a.btn.btn-primary.email-aside-toggle.text-white.md-sidebar-toggle(class="hover:text-white") Job filter
                  .md-sidebar-aside.job-sidebar.custom-scrollbar(class="[@media(max-width:1199px)_and_(min-width:440px)]:!w-[365px]")
                    .default-according.style-1.faq-accordion.job-accordion
                      #accordionExample
                        .card.accordion
                          #headingOne.card-header.accordion-item
                            h2.accordion-header.relative
                              button.accordion-button.btn.btn-link.btn-block.text-start(type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne')
                                | Filter
                            #collapseOne.accordion-collapse.collapse.show(aria-labelledby='headingOne' data-bs-parent='#accordionExample')
                              .card-body.filter-cards-view.animate-chk
                                .job-filter.mb-2
                                  .faq-form
                                    input.form-control(type='text', placeholder='Search..')
                                    i.search-icon(data-feather='search')
                                .job-filter
                                  .faq-form
                                    input.form-control(type='text', placeholder='location..')
                                    i.search-icon(data-feather='map-pin')
                                .checkbox-animated
                                  .form-check
                                    input#chk-ani.checkbox_animated(type='checkbox', data-original-title='', title='')
                                    label.form-check-label(for='chk-ani')
                                      span Full-time
                                      span.number (8688)
                                  .form-check
                                    input#chk-ani1.checkbox_animated(type='checkbox', data-original-title='', title='')
                                    label.form-check-label(for='chk-ani1')
                                      span Contract
                                      span.number (503)
                                  .form-check
                                    input#chk-ani2.checkbox_animated(type='checkbox', data-original-title='', title='')
                                    label.form-check-label(for='chk-ani2')
                                      span Part-time
                                      span.number (288)
                                  .form-check
                                    input#chk-ani3.checkbox_animated(type='checkbox', data-original-title='', title='')
                                    label.form-check-label(for='chk-ani3')
                                      span Internship
                                      span.number (236)
                                  .form-check
                                    input#chk-ani4.checkbox_animated(type='checkbox', data-original-title='', title='')
                                    label.form-check-label(for='chk-ani4')
                                      span Temporary
                                      span.number (146)
                                  .form-check
                                    input#chk-ani5.checkbox_animated(type='checkbox', data-original-title='', title='')
                                    label.form-check-label(for='chk-ani5')
                                      span Commission
                                      span.number (25)
                                button.btn.btn-primary(type='button' class="!text-center !text-white") Find jobs
                        .card.accordion
                          #headingTwo.card-header.accordion-item
                            h2.accordion-header.relative
                              button.accordion-button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='true' aria-controls='collapseTwo')
                                | Location
                            #collapseTwo.accordion-collapse.collapse.show(aria-labelledby='headingTwo' data-bs-parent='#accordionExample')
                              .card-body.animate-chk
                                .location-checkbox
                                  label.block(for='chk-ani6')
                                    input#chk-ani6.checkbox_animated(type='checkbox')
                                    |                           New York
                                    span.block NY (399)
                                  label.block(for='chk-ani7')
                                    input#chk-ani7.checkbox_animated(type='checkbox')
                                    |                            San Francisco
                                    span.block CA (252)
                                  label.block(for='chk-ani8')
                                    input#chk-ani8.checkbox_animated(type='checkbox')
                                    |                             Washington
                                    span.block DC (226)
                                  label.block(for='chk-ani9')
                                    input#chk-ani9.checkbox_animated(type='checkbox')
                                    |                            Seattle
                                    span.block WA (242)
                                  label.block(for='chk-ani10')
                                    input#chk-ani10.checkbox_animated(type='checkbox')
                                    |                           Chicago
                                    span.block IL (187)
                              button.btn.btn-block.btn-primary(type='button' class="!text-center !text-white") All Locations
                        .card.accordion
                          #headingThree.card-header.accordion-item
                            h2.accordion-header.relative
                              button.accordion-button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='true' aria-controls='collapseThree')
                                | Job Title
                            #collapseThree.accordion-collapse.collapse.show(aria-labelledby='headingThree' data-bs-parent='#accordionExample')
                              .card-body.animate-chk
                                .form-check
                                  input#chk-ani11.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani11' class="!mb-0")
                                    span UI/UX Designer
                                    span.number (25)
                                .form-check
                                  input#chk-ani12.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani12' class="!mb-0")
                                    span Graphic Designer
                                    span.number (10)
                                .form-check
                                  input#chk-ani13.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani13' class="!mb-0")
                                    span Front-end Designer
                                    span.number (15)
                                .form-check
                                  input#chk-ani14.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani14' class="!mb-0")
                                    span PHP Developer
                                    span.number (42)
                                .form-check
                                  input#chk-ani15.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani15' class="!mb-0")
                                    span React Developer
                                    span.number (5)
                              button.btn.btn-block.btn-primary(type='button' class="!text-center !text-white") All Job Title
                        .card.accordion
                          #headingFour.card-header.accordion-item
                            h2.accordion-header.relative
                              button.accordion-button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseFour' aria-expanded='true' aria-controls='collapseFour')
                                | Industry
                            #collapseFour.accordion-collapse.collapse.show(aria-labelledby='headingFour' data-bs-parent='#accordionExample')
                              .card-body.animate-chk
                                .form-check
                                  input#chk-ani16.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani16' class="!mb-0")
                                    span Computer Software
                                    span.number (14)
                                .form-check
                                  input#chk-ani17.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani17' class="!mb-0")
                                    span IT Engineer
                                    span.number (10)
                                .form-check
                                  input#chk-ani18.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani18' class="!mb-0")
                                    span Service Industry
                                    span.number (20)
                                .form-check
                                  input#chk-ani19.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani19' class="!mb-0")
                                    span Accounting
                                    span.number (34)
                                .form-check
                                  input#chk-ani20.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani20' class="!mb-0")
                                    span Financial Services
                                    span.number (5)
                              button.btn.btn-block.btn-primary(type='button' class="!text-center !text-white") All Industries
                        .card.accordion
                          #headingFive.card-header.accordion-item
                            h2.accordion-header.relative
                              button.accordion-button.btn.btn-link.btn-block.text-start.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseFive' aria-expanded='true' aria-controls='collapseFive')
                                | Specific Skills
                            #collapseFive.accordion-collapse.collapse.show(aria-labelledby='headingFive' data-bs-parent='#accordionExample')
                              .card-body.animate-chk
                                .form-check
                                  input#chk-ani21.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani21' class="!mb-0")
                                    span HTML,SCSS & SASS
                                .form-check
                                  input#chk-ani22.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani22' class="!mb-0")
                                    span Javascript
                                .form-check
                                  input#chk-ani23.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani23' class="!mb-0")
                                    span Node.js
                                .form-check
                                  input#chk-ani25.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani25' class="!mb-0")
                                    span Gulp & Pug
                                .form-check
                                  input#chk-ani26.checkbox_animated(type='checkbox', data-original-title='', title='')
                                  label.form-check-label(for='chk-ani26' class="!mb-0")
                                    span Angular.js
                              button.btn.btn-block.btn-primary(type='button' class="!text-center !text-white") All Skills 
              div(class="col-span-9 xl:col-span-12 xl-80 box-col-12")
                .card
                  .job-search
                    .card-body.pb-0
                      .job-flex
                        img.img-40.max-w-full.h-auto.m-r-20(src='../assets/images/job-search/1.jpg', alt='')
                        .grow
                          h6
                            a(href='#') UI Designer
                            span.pull-right
                              button.btn.btn-primary.text-white(type='button')
                                span
                                  i.fa-solid.fa-check.text-white.me-1
                                |  Save this job
                          p.mt-0
                            | Endless Telecom & Technologies , NY
                            span
                              i.fa-solid.fa-star.font-warning
                              i.fa-solid.fa-star.font-warning
                              i.fa-solid.fa-star.font-warning
                              i.fa-solid.fa-star.font-warning
                              i.fa-solid.fa-star.font-warning
                      .job-description
                        h6.mb-0 Personal Details 
                        form.form.theme-form.custom-input
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.form-label(for='exampleFormControlInput1')
                                  | Full Name:
                                  span.font-danger *
                                input#exampleFormControlInput1.form-control(type='text', placeholder='Enter your full name')
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.form-label(for='exampleFormControlInput3')
                                  | Email:
                                  span.font-danger *
                                input#exampleFormControlInput3.form-control(type='email', placeholder='Enter email')
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.form-label(for='exampleFormControlpassword')
                                  | Password:
                                  span.font-danger *
                                input#exampleFormControlpassword.form-control(type='password', placeholder='Enter password')
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.form-label(for='exampleFormControlpassword1')
                                  | Repeat Password:
                                  span.font-danger *
                                input#exampleFormControlpassword1.form-control(type='password', placeholder='Repeat password')
                          .grid.grid-col-12.card-gap.select-date
                            div(class="col-span-12")
                              .col-form-label.pt-0 Birth Date
                            div(class="col-span-4 sm:col-span-12")
                              .mb-3
                                .col-form-label
                                  select.col-sm-12.tailwind-select.selectpicker(aria-label='Default select example' data-live-search='true')
                                    optgroup(label='Month')
                                      option(value='Jan') January
                                      option(value='Feb' selected) February
                                      option(value='Mar') March
                                      option(value='Apr') April
                                      option(value='May') May
                                      option(value='Jun') June
                                      option(value='Jul') July
                                      option(value='Aug') August
                                      option(value='Sep') September
                                      option(value='Oct') October
                                      option(value='Nov') November
                                      option(value='Dec') December
                            div(class="col-span-4 sm:col-span-12")
                              .mb-3
                                .col-form-label
                                  select.col-sm-12.selectpicker(aria-label='Default select example' data-live-search='true')
                                    optgroup(label='Day')
                                      option(value='1') 1
                                      option(value='2') 2
                                      option(value='3') 3
                                      option(value='4') 4
                                      option(value='5') 5
                                      option(value='6') 6
                                      option(value='7') 7
                                      option(value='8') 8
                                      option(value='9') 9
                                      option(value='10') 10
                                      option(value='11') 11
                                      option(value='12') 12
                                      option(value='13') 13
                                      option(value='14') 14
                                      option(value='15') 15
                                      option(value='16') 16
                                      option(value='17') 17
                                      option(value='18') 18
                                      option(value='19') 19
                                      option(value='20') 20
                                      option(value='21') 21
                                      option(value='22') 22
                                      option(value='23') 23
                                      option(value='24') 24
                                      option(value='25') 25
                                      option(value='26') 26
                                      option(value='27') 27
                                      option(value='28') 28
                                      option(value='29') 29
                                      option(value='30') 30
                                      option(value='31') 31
                            div(class="col-span-4 sm:col-span-12")
                              .mb-3
                                .col-form-label
                                  select.col-sm-12.selectpicker(aria-label='Default select example' data-live-search='true')
                                    optgroup(label='Year')
                                      option(value='1985') 1985
                                      option(value='1986') 1986
                                      option(value='1987') 1987
                                      option(value='1988') 1988
                                      option(value='1989') 1989
                                      option(value='1990') 1990
                                      option(value='1991') 1991
                                      option(value='1992') 1992
                                      option(value='1993') 1993
                                      option(value='1994') 1994
                                      option(value='1995') 1995
                                      option(value='1996') 1996
                                      option(value='1997') 1997
                                      option(value='1998') 1998
                                      option(value='1999') 1999
                                      option(value='2000') 2000
                                      option(value='2001') 2001
                                      option(value='2002') 2002
                                      option(value='2003') 2003
                                      option(value='2004') 2004
                                      option(value='2005') 2005
                                      option(value='2006') 2006
                                      option(value='2007') 2007
                                      option(value='2008') 2008
                                      option(value='2009') 2009
                                      option(value='2010') 2010
                                      option(value='2011') 2011
                                      option(value='2012') 2012
                                      option(value='2013') 2013
                                      option(value='2014') 2014
                                      option(value='2015') 2015
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.form-label(for='exampleFormControlInput4') Phone Number:
                                input#exampleFormControlInput4.form-control(type='number', placeholder='Enter Phone no.')
                        h6.mb-0 Your Education
                        form.form.theme-form
                          .grid.grid-cols-12.card-gap.select-date
                            div(class="col-span-6 xl:col-span-12 xl-100")
                              .mb-3
                                label.form-label(for='exampleFormControlInput5')
                                  | College Name:
                                  span.font-danger *
                                input#exampleFormControlInput5.form-control(type='text', placeholder='Enter college name')
                            div(class="col-span-6 xl:col-span-12 xl-100 xl-mt-job")
                              label.col-form-label.text-end.pt-0
                                | Period:
                                span.font-danger *
                              .grid.grid-cols-12.card-gap
                                div(class="col-span-6 sm:col-span-12")
                                  .input-group
                                    input.datepicker-here.form-control.digits(type='text', data-language='en', placeholder='Start Date')
                                div(class="col-span-6 sm:col-span-12 xs-mt-period")
                                  .input-group
                                    input.datepicker-here.form-control.digits(type='text', data-language='en', placeholder='End Date')
                            div(class="col-span-6 xl:col-span-12 xl-100")
                              .mb-3
                                .col-form-label.pt-0
                                  | Degree Level:
                                  span.font-danger *
                                select.col-sm-12.selectpicker(aria-label='Default select example' data-live-search='true')
                                  optgroup(label='Choose a Option')
                                    option(value='student') Student
                                    option(value='Bachelor') Bachelor
                                    option(value='Master') Master
                                    option(value='Associate') Associate
                            div(class="col-span-6 xl:col-span-12 xl-100")
                              .mb-3
                                label.form-label(for='exampleFormControlInput6')
                                  | Specialization:
                                  span.font-danger *
                                input#exampleFormControlInput6.form-control(type='text', placeholder='Enter specialization')
                        h6.mb-0 Your Experience
                        form.form.theme-form
                          .grid.grid-cols-12.card-gap.select-date.custom-input
                            div(class="col-span-6 xl:col-span-12 xl-100")
                              .mb-3
                                label.form-label(for='exampleFormControlInput7')
                                  | Location:
                                  span.font-danger *
                                input#exampleFormControlInput7.form-control(type='text', placeholder='Enter Location')
                            div(class="col-span-6 xl:col-span-12 xl-100 xl-mt-job")
                              label.col-form-label.text-end.pt-0
                                | Period:
                                span.font-danger *
                              .grid.grid-cols-12.card-gap
                                div(class="col-span-6 sm:col-span-12")
                                  .input-group
                                    input.datepicker-here.form-control.digits(type='text', data-language='en', placeholder='Start Date')
                                div(class="col-span-6 sm:col-span-6 xs-mt-period")
                                  .input-group
                                    input.datepicker-here.form-control.digits(type='text', data-language='en', placeholder='End Date')
                            div(class="col-span-6 xl:col-span-12 xl-100")
                              .mb-3
                                .col-form-label.pt-0
                                  | Position:
                                  span.font-danger *
                                select.col-sm-12.selectpicker(aria-label='Default select example' data-live-search='true')
                                  optgroup(label='Enter Position')
                                    option(value='position') Choose a option
                                    option(value='Web designer') Web Designer
                                    option(value='Graphic designer') Graphic Designer
                                    option(value='UI designer') UI Designer
                                    option(value='UI/UX designer') UI/UX Designer
                            div(class="col-span-6 xl:col-span-12 xl-100")
                              .mb-3
                                label.form-label(for='exampleFormControlInput8')
                                  | Company Name:
                                  span.font-danger *
                                input#exampleFormControlInput8.form-control(type='email', placeholder='Enter Company Name')
                        h6.mb-0 Upload Your Files
                        form.form.theme-form
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.col-form-label.pt-0
                                  | Upload Cover Letter:
                                  span.font-danger *
                                input.form-control(type='file')
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .mb-3
                                label.col-form-label.pt-0
                                  | Upload Your CV:
                                  span.font-danger *
                                input.form-control(type='file')
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              div
                                label.col-form-label.pt-0 Upload Recommendations:
                                input.form-control(type='file')
                    .card-footer.common-flex.justify-end
                      button.btn.btn-primary.text-white(type='submit') Submit
                      input.btn.btn-light(type='reset', value='Cancel')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
