{% extends 'base.html' %}
{% load helpers %}
{% load form_helpers %}

{% block title %}Search{% endblock %}

{% block content %}
    {% if request.GET.q %}
        <div class="row">
            <div class="col-lg-10">
                <div id="nb-search-results-tables">
                    {% for model in searchable_models %}
                        <div id="{{ model|slugify }}-results-table"
                             hx-get=""
                             hx-indicator="#search-results-htmx-indicator"
                             hx-select="#{{ model|slugify }}-results-table"
                             hx-select-oob="#{{ model|slugify }}-results-summary"
                             hx-trigger="load"
                             hx-vals='{"model": "{{ model }}"}'
                        >
                        </div>
                    {% endfor %}
                    <div id="search-results-htmx-indicator" class="htmx-indicator text-center">
                        <div class="spinner-border">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2" style="padding-top: 20px;">
                <div class="card">
                    <div class="card-header">
                        <strong>Search Results</strong>
                    </div>
                    <div class="list-group">
                        <div id="nb-search-results-summaries">
                            {% for model in searchable_models %}
                                <div id="{{ model|slugify }}-results-summary"></div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <h3 class="text-secondary text-center">Please enter your desired search in the above search box.</h3>
    {% endif %}
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script>
        var clipboard = new ClipboardJS('.btn');
    </script>
{% endblock %}