{% extends '@TigrisBase/layout.html.twig' %}

{% block main %}
<h1>{{ 'search.title'|trans }}</h1>
<tigris-data-list route="tigris_base_search_index" :init-filters='{"search":"{{ search }}", "options": []}' v-slot="{loadData, entities, filters, totalCount, begin, end, sort}">
<div class="search">
    <form method="get" action="" class="search-form">
        <div class="row">
            <div class="col-sm-9">
                <input type="text" name="search" placeholder="{{ 'search.input'|trans }}" class="form-control" v-model="filters.search"/>
            </div>
            <div class="col-sm-3">
                <select name="options" multiple class="form-control selectpicker" v-model="filters.options" data-none-selected-text="{{ 'search.option.all'|trans }}">
                    {% for option, label in options %}
                    <option value="{{ option }}">{{ label|trans }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </form>

    <div class="list-group mt-3">
        <div class="list-group-item" v-if="loading">
            <div class="d-flex justify-content-center">
                <div class="spinner-grow" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
        <div class="list-group-item" v-for="entity in entities" :key="entity.id">
            <div class="search-result-infos float-right" v-html="entity.infos"></div>
            <h3><a :href="entity.url">${ entity.title }</a></h3>
            <div>${ entity.content }</div>
        </div>
    </div>
</div>
</tigris-data-list>
{% endblock %}