<template>

<section class="intro">

  <div class="bg-image vh-100" style="

          background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img4.jpg);

        ">

    <div class="mask d-flex align-items-center h-100" style="background-color: rgba(194, 185, 179, 0.2);">

      <MDBContainer>

        <p class="h1 mb-4 mb-md-5 text-dark text-uppercase text-center">Search hotel</p>

        <MDBCard style="background-color: rgba(0,0,0,.7);">

          <MDBCardBody class="p-4">

            <MDBRow class="justify-content-center">

              <MDBCol lg="12" xl="10" class="d-lg-flex flex-row mb-lg-4 mb-xl-0">

​

                <div id="basic" class="form-outline form-white flex-fill me-lg-2 mb-3 mb-lg-0">

                   <MDBAutocomplete

                      v-model="autocompleteBasic"

                      :filter="filterBasic"

                      label="What are you looking for?"

                    />

                </div>

​

                <div class="form-outline datepicker form-white flex-fill mx-lg-2 mb-3 mb-lg-0" data-mdb-toggle-button="false">

                  <MDBDatepicker v-model="picker1" label="Arrival date" inputToggle :toggleButton="false" />

                </div>

​

                <div class="form-outline datepicker form-white flex-fill mx-lg-2 mb-3 mb-lg-0" data-mdb-toggle-button="false">

                  <MDBDatepicker v-model="picker2" label="Departure date" inputToggle :toggleButton="false" />

                </div>

​

                <div id="location" class="form-outline form-white flex-fill ms-lg-2 mb-4 mb-lg-0">

                  <MDBAutocomplete

                    v-model="autocompleteBasic"

                    :filter="filterGuests"

                    label="Number of guests"

                  />         

                </div>

​

              </MDBCol>

              <MDBCol lg="12" xl="2" >

                <MDBBtn type="submit" color="primary" rounded class="btn-block" >Search</MDBBtn>

              </MDBCol>

            </MDBRow>

          </MDBCardBody>

        </MDBCard>

      </MDBContainer>

    </div>

  </div>

</section>

</template>

<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

​

html,

body,

.intro {

  height: 100%;

}

</style>

  <script>

      import {

          MDBContainer,

          MDBCard,

          MDBCardBody,

          MDBRow,

          MDBCol,

          MDBAutocomplete,

          MDBBtn,

          MDBDatepicker 

      } from "mdb-vue-ui-kit";

​

  import {

      ref

  } from "vue"

​

  export default {

      name: "App",

      components: {

          MDBContainer,

          MDBCard,

          MDBCardBody,

          MDBRow,

          MDBCol,

          MDBAutocomplete,

          MDBBtn,

          MDBDatepicker 

      },

    setup() {

      const basicAutocomplete = ref(['Museum', 'Party', 'Restaurant', 'Concert', 'Architecture'])

      const guestsAutocomplete = ref(['1 adult', '2 adults', '3 adults', '2 adults and 1 child', '2 adults and 2 children'])

​

      const filterBasic = value => {

        return basicAutocomplete.value.filter(item => {

          return item.toLowerCase().startsWith(value.toLowerCase());

        });

      };    

      const filterGuests = value => {

        return guestsAutocomplete.value.filter(item => {

          return item.toLowerCase().startsWith(value.toLowerCase());

        });

      };   

      const picker1 = ref("");

      const picker2 = ref("");

      return { filterBasic, filterGuests, picker1, picker2 }

      }

  }; 

</script>