{% extends 'django_spire/glue/scroll/scroll.html' %}

{% block scroll_queryset_order_by_field %}created_datetime{% endblock %}
{% block scroll_queryset_unique_name %}visuals{% endblock %}
{% block scroll_queryset_filter_field %}name{% endblock %}

{% block scroll_header %}
    <div class="row pb-3 align-items-center">
        <div class="col-6">
            <input class="form-control" placeholder="Search Visuals ..." type="search"
                   x-model.debounce="searchQuery">
        </div>
        <div class="col text-end">
            Sort by
        </div>
        <div class="col">
            <select class="form-select form-select-md" x-model="orderBy">
                <option value="name">Name</option>
                <option value="created_datetime">Created</option>
            </select>
        </div>
    </div>
    <div class="card--bordered"></div>
{% endblock %}

{% block scroll_template_item %}
    <div class="row border-bottom py-2 align-items-center">
        <div class="col">
            <a :href="`{% url 'django_spire:metric:visual:page:detail' pk=0 %}`.replace('0', item.id)">
                <span x-text="item.name"></span>
            </a>
            <div class="small text-muted" x-text="item.description"></div>
        </div>
        <div class="col-auto text-end align-self-center">
            {% include 'django_spire/metric/visual/dropdown/ellipsis_dropdown.html' %}
        </div>
    </div>
{% endblock %}