<script setup lang="ts">
import {ref, onMounted} from 'vue';

const hours = ref(1);
const saving = ref(false);

onMounted(async () => {
  const h = await fetch('/settings/cron').then(r => r.json());
  hours.value = h.hours;
});

async function update() {
  saving.value = true;
  await fetch('/settings/cron', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({hours: hours.value})
  });
  saving.value = false;
}
</script>
<template>
  <div class="p-4 bg-white dark:bg-gray-800 rounded shadow dark:shadow-gray-700 dark:text-gray-200">
    <label class="block font-semibold mb-2">Fetch Interval (Stunden)</label>
    <input type="range" min="0.5" max="24" step="0.5" v-model="hours" @change="update"
           class="w-full accent-green-600 dark:accent-green-500"/>
    <p class="text-sm mt-2">{{ hours }} h <span v-if="saving" class="animate-pulse">…</span></p>
  </div>
</template>
