<template>
    <div
        class="fmt-modal__panel"
        role="tabpanel"
        aria-labelledby="fmt-tab-privacy"
        id="fmt-panel-privacy"
    >
        <label class="fmt-setting">
            <span>{{ __("IP address storage", "formatrica") }}</span>
            <select v-model="local.ip_storage">
                <option value="full">
                    {{ __("Store full IP address", "formatrica") }}
                </option>
                <option value="anonymous">
                    {{ __("Store anonymized IP address", "formatrica") }}
                </option>
                <option value="none">
                    {{ __("Do not store IP addresses", "formatrica") }}
                </option>
            </select>
            <small class="fmt-setting__hint">
                {{ __("An anonymized IP removes the last part of the address before saving.", "formatrica") }}
            </small>
        </label>

        <label class="fmt-setting fmt-setting--switch">
            <span>{{ __("Automatically delete old submissions", "formatrica") }}</span>
            <input type="checkbox" v-model="local.delete_submissions_after_days_enabled" />
        </label>

        <label v-if="local.delete_submissions_after_days_enabled" class="fmt-setting">
            <span>{{ __("Delete submissions older than (days)", "formatrica") }}</span>
            <input
                type="number"
                min="1"
                max="3650"
                v-model.number="local.delete_submissions_after_days"
            />
            <small class="fmt-setting__hint">
                {{ __("Submissions older than this many days will be automatically deleted. Runs daily.", "formatrica") }}
            </small>
        </label>
    </div>
</template>

<script setup>
import { inject } from "vue";
import { __ } from "@/utils/i18n";

const ctx = inject("formSettingsContext");

if (!ctx) {
    throw new Error("Form settings context not provided");
}

const { local } = ctx;
</script>
