<div
    x-show="show_context_menu && focused_type === 'collection'"
    x-transition
    x-cloak
    style="width: 200px"
    :style="{
        top: y + 'px',
        left: x + 'px',
    }"
    class="position-fixed card shadow-lg z-3 vstack cursor-pointer"
    @click.away="hide_menu()"
>
    <span class="px-2 py-1" x-text="title"></span>

    {% if AuthController.knowledge.can_add %}
    <span class="border-top bg-app-layer-one-hover px-3 text-app-default-link-color" @click="add_entry()">
        <i class="bi bi-plus pe-1"></i>
        Add Entry
    </span>
    <span class="border-top bg-app-layer-one-hover px-3 text-app-default-link-color" @click="import_entry()">
        <i class="bi bi-upload pe-1">
        </i>
        Import Entry
    </span>
    {% endif %}

    {% if AuthController.knowledge.can_delete %}
        <span class="border-top bg-app-layer-one-hover px-3 text-app-danger" @click="delete_collection()">
            <i class="bi bi-trash3 pe-1"></i>
            <span>Delete Collection</span>
        </span>
    {% endif %}
</div>
