{% block media_exists_badge %}
    <turbo-stream action="replace" targets="#{{ target }}">
        <template>
            {% if result.exists == true %}
                <span data-controller="popover">
            <template data-popover-target="content">
                <div data-popover-target="card"
                     class="absolute z-40 p-1 bg-stone-400 p-1 text-black rounded-md m-1 animate-fade">
                    <p class="font-bold text-sm text-left">Existing file(s) for this media:</p>
                    <ul class="list-disc ml-3">
                        <li class="font-normal">{{ result.file.filename|strip_media_path }} &mdash; <strong>{{ result.file.size|filesize }}</strong></li>
                    </ul>
                </div>
            </template>
            <small
                    class="py-1 px-1.5 mr-1 grow-0 font-bold bg-blue-600 rounded-lg text-center text-white"
                    data-action="mouseenter->popover#show mouseleave->popover#hide"
            >
                exists
            </small>
        </span>
            {% endif %}

            {% if result.exists == false %}
                <small class="py-1 px-1.5 mr-1 grow-0 font-bold bg-rose-600 rounded-lg text-white"
                       title="Media has not been downloaded yet.">
                    missing
                </small>
            {% endif %}
        </template>
    </turbo-stream>
{% endblock %}