<div
    x-show="show_context_menu && focused_type === 'entry'"
    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 bg-app-layer-one border"
    @click.away="hide_menu()"
>
    <span class="px-2 py-1" x-text="title"></span>

    {% if AuthController.knowledge.can_view %}
        <span class="border-top bg-app-layer-three-hover px-3 text-app-default-link-color dropdown-item" @click="view_entry()">
            <i class="bi bi-eye pe-1"></i>
            <span>View</span>
        </span>
    {% endif %}

    {% if AuthController.knowledge.can_change %}
        <span class="bg-app-layer-three-hover px-3 text-app-default-link-color dropdown-item" @click="edit_entry()">
            <i class="bi bi-input-cursor-text pe-1"></i>
            <span>Rename</span>
        </span>
        <span class="bg-app-layer-three-hover px-3 text-app-default-link-color dropdown-item" @click="edit_entry_version()">
            <i class="bi bi-pencil pe-1"></i>
            <span>Edit</span>
        </span>
    {% endif %}

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