<template>
    <div class="small text-muted mb-2">
        <div class="form-check form-switch my-1">
            <label>
                <input class="form-check-input" type="checkbox" v-model="enabled">
                <T>profile.markdown.enable</T>
            </label>
            <a href="#" @click.prevent="examples = !examples">
                <Icon v="info-circle"/>
                <T>profile.markdown.features</T>
            </a>
        </div>
        <table v-if="examples" class="table table-sm table-striped">
            <tbody>
                <tr v-for="example in $t('profile.markdown.examples')">
                    <th class="fw-normal">{{ example }}</th>
                    <td><Spelling :text="example" markdown/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props: {
        value: {required: true},
    },
    data() {
        return {
            examples: false,
            enabled: this.value,
        }
    },
    watch: {
        enabled() {
            this.$emit('input', this.enabled);
        },
        value() {
            this.enabled = this.value;
        },
    },
};
</script>
