<template>
    <div class="itemAlerts">
        <div
            class="itemAlert"
            v-if="item.stock_error"
            :data-id="item.id"
        >
            <div class="error">
                <p v-text="item.stock_error"></p>
            </div>
        </div>

        <div
            class="itemAlert"
            v-if="item.delivery_error"
            :data-id="item.id"
        >
            <div class="error">
                <p v-text="item.delivery_error"></p>
            </div>
        </div>

        <div
            class="itemAlert"
            v-if="item.limit_error"
            :data-id="item.id"
        >
            <div class="error">
                <!-- v-html: admin-authored via TinyMCE in shop/admin/ingredients/manage.ingredient.php -->
                <p v-html="item.limit_error"></p>
            </div>
        </div>

        <div
            class="itemAlert"
            v-if="item.incompatibility_error"
            :data-id="item.id"
        >
            <div
                class="error"
                v-for="(incompatibilityError, index) in item.incompatibility_error"
                :key="index"
            >
                <!-- v-html: admin-authored via TinyMCE in shop/admin/ingredients/incompatible.categories.edit.php -->
                <p v-html="incompatibilityError"></p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'basket-item-alerts',

    props: {
        item: {
            type: Object,
            required: true
        }
    }
};
</script>
