<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import AddNew from "./Gate/AddNew.vue";
import GateRule from "./Gate/GateRule.vue";
import { useSettingsStore } from "@/stores/SettingsStore";
import { storeToRefs } from "pinia";

const { updateGateSettings } = useSettingsStore();
const { gateSettings } = storeToRefs(useSettingsStore());

const handleSave = async () => {
  await updateGateSettings({ data: gateSettings.value });
};
</script>
<template>
  <SettingsTab>
    <template #title>
      {{ $t("gate") }}
    </template>
    <template #description>
      {{ $t("gate_desc") }}
    </template>
    <div class="w-full flex flex-col gap-4">
      <div class="flex justify-between gap-2 w-full">
        <p class="text-sm text-gray-500" v-html="$t('gate_rule_desc')">
        </p>
        <AddNew />
      </div>
      <GateRule />
    </div>
    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleSave">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
