{% import 'macros/form.html' as form %}

<div class="">
    <form class="form-control border-0 shadow-none p-0" hx-post="{{ h.url_for('selftools_htmx.selftools_db_query') }}" hx-trigger="submit" hx-target="#db-query-resp" hx-swap="innerHTML">
        <div>
            {{ form.select('model', label=_('Model'), options=extras.model_options, error='', attrs={'class': 'select2', 'data-module': 'autocomplete'}) }}
        </div>
        <div class="row">
            <div class="col-lg-6">
                {{ form.input('field', label=_('Field'), error='') }}            
            </div>
            <div class="col-lg-6">
                {{ form.input('value', label=_('Value'), error='') }}           
            </div>
        </div>


        <fieldset class="border p-3 mb-3">
            <legend class="w-auto">
                <a class="btn btn-dark" data-bs-toggle="collapse" href="#db_q_order_collapse" role="button" aria-expanded="false" aria-controls="db_q_order_collapse">
                    Results Order
                </a>
            </legend>
            <div class="collapse" id="db_q_order_collapse">
                {{ form.input('order_by', label=_('Order By'), error='') }}
                {{ form.select('order', label=_('Order'), options=[{"value": "asc", "text": "ASC"}, {"value": "desc", "text": "DESC"}], error='') }}
                <div class="info-block mb-2">
                    <i class="fa fa-info-circle"></i>
                    {{ _('Both fields should be provided if order needed.') }}
                </div>
            </div>
        </fieldset>

        <div class="mt-3 mb-3">
            <label for="limit">Limit</label>
            <input type="number" name="limit" min="1" max="{{ h.get_operations_limit() }}" step="1" value="{{ h.get_operations_limit() }}" class=""  required />
        </div>
        <button type="submit" class="btn btn-dark mt-2">Submit</button>
    </form>
</div>

<div id="db-query-resp" class="bg-light p-3 border rounded mt-3">Output here...</div>