<div
    class="ms-auto mt-1 me-sm-3 mx-2 rounded border border-1 bg-app-layer-three shadow p-3"
    :class="{
        'border-app-success': notification.type === 'success',
        'border-app-warning': notification.type === 'warning',
        'border-app-danger': notification.type === 'error',
        'border-app-primary': notification.type === 'info'
    }"
    style="max-width: 400px; pointer-events: auto;"
    x-show="show"
    x-transition.duration.500ms
    x-data="{
        show: false,
        init() {
            this.$nextTick(() => this.show = true)
            setTimeout(() => this.transitionOut(), 5000)
        },
        transitionOut() {
            this.show = false
            setTimeout(() => this.remove(this.notification), 500)
        }
    }"
>
    <div class="row align-items-center">
        <div class="col-auto">
            <template x-if="notification.type === 'success'">
                <i class="text-success bi bi-check-circle-fill h3 m-0"></i>
            </template>
            <template x-if="notification.type === 'warning'">
                <i class="text-app-warning bi bi-slash-circle-fill h3 m-0"></i>
            </template>
            <template x-if="notification.type === 'error'">
                <i class="text-app-danger bi bi-x-circle-fill h3 m-0"></i>
            </template>
            <template x-if="notification.type === 'info'">
                <i class="text-app-primary bi bi-info-circle-fill h3 m-0"></i>
            </template>
        </div>
        <div class="col position-relative pe-4">
            <div x-text="notification.message"></div>
            <i
                class="position-absolute top-0 end-0 mt-n2 me-1 bi bi-x-lg cursor-pointer"
                @click="transitionOut()"
            >
            </i>
        </div>
    </div>
</div>
