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

{% load django_glue %}

{% block scroll_queryset_order_by_field %}-created_datetime{% endblock %}
{% block scroll_queryset_unique_name %}subdomains{% endblock %}
{% block scroll_queryset_filter_field %}name{% endblock %}

{% block scroll_header %}
    <div class="row pb-3 align-items-center">
        <div class="col-auto fs-5 col-sm-auto">
            {{ domain.sub_domain_name }}
        </div>
        <div class="col col-sm-6">
            <input class="form-control" placeholder="Search ..." type="search"
                   x-model.debounce="searchQuery">
        </div>
        <div class="col-3 col-sm-auto 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>
                <option value="description">Description</option>
            </select>
        </div>
        <div class="col-auto">
            {% if perms.django_spire_metric_domain.add_subdomain %}
                {% url 'django_spire:metric:domain:form:subdomain_form' domain_pk=domain.pk pk=0 as new_subdomain_url %}
                <a class="btn btn-sm btn-primary text-white" href="{{ new_subdomain_url }}">
                    <i class="bi bi-plus-lg"></i>
                    <span class="d-none d-md-inline">Add</span>
                </a>
            {% endif %}
        </div>
    </div>
    <div class="card--bordered"></div>
{% endblock %}

{% block scroll_template_item %}
    <div class="row border-bottom py-2">
        <div class="col-4">
            <div class="attribute-label">Name</div>
            <a class='text-decoration-none'
               :href="{% js_url 'django_spire:metric:domain:page:subdomain_detail' domain_pk='item.domain_id' pk='item.id' %}">
                <span x-text="item.name"></span>
            </a>
        </div>
        <div class="col-7">
            <div class="attribute-label">Description</div>
            <span x-text="item.description"></span>
        </div>

        <div class="col-1 text-end align-self-center">
            {% include 'django_spire/metric/domain/dropdown/subdomain_ellipsis_dropdown.html' %}
        </div>
    </div>
{% endblock %}