<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import { useUiStore } from "@/stores/UiStore";
import { storeToRefs } from "pinia";
const { httpLogs } = storeToRefs(useUiStore());
const { clearLogs } = useUiStore();
const clear = async () => {
  await clearLogs();
  httpLogs.value = "";
};
</script>
<template>
  <SettingsTab>
    <template #title>
      <div class="flex justify-between items-center">
        {{ $t("http_logs") }}

        <span
          class="flex text-gray-600 text-xs underline cursor-pointer"
          @click="clear()"
        >
          <trash-icon class="w-4" />
          {{ $t("clear") }}</span
        >
      </div>
    </template>
    <!-- eslint-disable -->
    <div
      class="flex flex-col gap-1 max-h-96 h-96 overflow-auto p-4 bg-slate-100 shadow-inner rounded-lg"
      style="font-family: Consolas, Monaco, monospace"
      v-html="httpLogs.replace(/\n/g, '<br />')"
    ></div>
  </SettingsTab>
</template>
