<template>
    <div class="fmt-preserved-field">
        <p class="fmt-preserved-field__title">
            {{ __("Pro field preserved but inactive", "formatrica") }}
        </p>
        <p class="fmt-preserved-field__body">
            {{ __("This field type is not included in this edition. Its configuration is preserved unchanged and it is not rendered on the public form. You can leave it in place or remove it from the canvas.", "formatrica") }}
        </p>
        <p class="fmt-preserved-field__meta">
            <code>{{ field?.type }}</code>
        </p>
    </div>
</template>

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

defineProps({
    field: { type: Object, default: null },
});
</script>

<style scoped>
.fmt-preserved-field {
    border: 1px dashed #c3c4c7;
    border-radius: 6px;
    padding: 16px;
    background: #f6f7f7;
}

.fmt-preserved-field__title {
    margin: 0 0 8px;
    font-weight: 600;
    color: #1d2327;
}

.fmt-preserved-field__body {
    margin: 0 0 8px;
    font-size: 13px;
    color: #50575e;
}

.fmt-preserved-field__meta {
    margin: 0;
    color: #646970;
}
</style>
