<script setup>
import { inject } from "vue";
import AlertSearchNormalBtns from "./AlertSearchNormalBtns.vue";
import AlertSearchTimeRange from "./AlertSearchTimeRange.vue";
import AlertSearchTypesButton from "./AlertSearchTypesButton.vue";

const { search } = inject("alert_table");

</script>

<template>
  <div class="w-full flex flex-wrap flex-col custom-border px-4 pt-0 pb-4 mb-4">
    <div class="w-full flex flex-wrap items-center justify-start gap-4 mt-4 lg:mt-0">
      <AlertSearchNormalBtns />
      <!-- <AlertSearchAckBtns /> -->
      <AlertSearchTimeRange />
      <button class="btn btn-search lg:ml-8" @click.stop.prevent="search">
        <font-awesome-icon :icon="['fas', 'search']" class=" text-lg" />
        {{ $t("button.search")}}
      </button>
    </div>
    <div class="w-full flex flex-wrap items-center justify-start">
      <AlertSearchTypesButton />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
