<template>
  <div class="q-gutter-y-md">
    <q-card flat>
      <div class="row q-gutter-x-md" style="margin-bottom: -16px">
        <div class="q-mb-md row q-gutter-x-sm items-center">
          <p class="q-ma-none">
            {{ $t('tickets.employee') }}
          </p>
          <q-select
            ref="employee"
            v-model="filter.employee"
            filled
            multiple
            dense
            borderless
            style="min-width: 20em"
            :options="employeeFilterOptions"
            @input="handleEmployeeChange"
          >
            <template #option="scope">
              <template v-if="scope.index === 0">
                <q-input
                  outlined
                  dense
                  placeholder="Найти пользователей"
                  :value="employeeSearch"
                  @input="getEmployees"
                >
                  <template #append>
                    <q-icon name="search" size="20px" />
                  </template>
                </q-input>
              </template>
              <q-separator v-if="scope.opt.separator" inset />
              <q-item v-else v-bind="scope.itemProps" v-on="scope.itemEvents">
                <q-item-section side>
                  <q-checkbox
                    :value="scope.selected"
                    @input="scope.itemEvents.click"
                  />
                </q-item-section>
                <q-item-section>
                  <q-item-label v-html="scope.opt.label" />
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>

        <div class="q-mb-md row q-gutter-x-sm items-center">
          <p class="q-ma-none">
            {{ $t('tickets.dates') }}
          </p>
          <q-field borderless dense style="min-width: 20em">
            <x-date-range
              :options="dateLimit"
              :from.sync="filter.from"
              :to.sync="filter.to"
              @input="handleRangeChange"
            />
          </q-field>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script lang="ts" src="./search-bar.ts"></script>
