<template lang="pug">
  .header-inputs-wrapper.flex.items-center.font-medium.text-base
    q-select.w-40.pl-3.pr-2.selected(
      v-model="selectedFilter",
      :options="filters",
      borderless,
      dense
    )
      template(v-slot:selected)
        span(:style="{color: 'var(--btn-blue-color)'}") {{ selectedFilter }}
      template(v-slot:prepend)
        q-icon.pr-1(
          name="app:icon-search",
          size="18px",
          :style="{color: 'var(--btn-blue-color)', opacity: '0.7'}"
        )
    q-input.px-4(
      type="text",
      placeholder="Искать ...",
      borderless,
      square
    )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";

export default {
  name: "HeaderInputs",
  components: { BaseInput, BaseSelect },
  data() {
    return {
      selectedFilter: "Календарь",
      filters: ["Календарь", "Клиенты"],
      isOpen: false,
    };
  },
  methods: {
    selectFilter(filter) {
      this.selectedFilter = filter;
    },
  },
};
</script>

<style lang="sass" scoped>
.header-inputs-wrapper
  height: 40px
  background-color: var(--default-white)
  border-radius: 4px
  border: 1px solid var(--border-light-grey-color)

.selected
  border-right: 1px solid var(--border-light-grey-color)
</style>
