<form class="mb-2" hx-target="#info-view" hx-indicator="#id_data_indicator">

    shape = {{ shape }}

    <div class="d-flex gap-1 mb-2">
        {% for input in inputs %}
        <div class="input-group d-inline-flex w-auto">
            <span class="input-group-text">dim {{ loop.index0 }}</span>
            <input type="number" class="form-control" placeholder="" size="4"
                   name="index" value="{{ input.start }}"
                   {% if input.size < input.size_max %}
                   hx-post="{{ view_url }}"
                   min="0" max="{{ input.start_max }}" step="{{ input.size }}"
                   {% else %}
                   readonly
                   {% endif %}
            >
            {% if input.with_size %}
            <input type="number" class="form-control" placeholder="" size="4"
                   name="sizes" value="{{ input.size }}"
                   hx-post="{{ view_url }}"
                   min="1" max="{{ input.size_max }}">
            {% else %}
            <input type="hidden" name="sizes" value="1">
            {% endif %}
        </div>
        {% endfor %}
        {% if cols %}
        <div class="dropdown" id="id_fields">
            <button type="button" class="btn btn-light dropdown-toggle"
                    data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside"
                    hx-post="{{ view_url }}" hx-trigger="hidden.bs.dropdown"
                    >
                Fields
            </button>
            <div class="dropdown-menu p-2">
                {% for col in cols %}
                <div class="form-check">
                    <input class="form-check-input" type="checkbox"
                           name="fields"
                           value="{{ col }}"
                           id="id_{{ col }}"
                           {% if col in fields %}checked{% endif %}>
                    <label class="form-check-label" for="id_{{ col }}">{{ col }}</label>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="input-group w-auto">
            <label class="input-group-text" for="id_sortby">Sort by</label>
            <select class="form-select" name="sortby" id="id_sortby" hx-post="{{ view_url }}">
                <option value=""></option>
                {% for col in cols %}
                <option value="{{ col }}" {% if col == sortby %}selected{% endif %}>{{ col }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
        {% with id="id_data_indicator" %}
            {% include 'includes/loading.html' %}
        {% endwith %}
    </div>

    {% if cols %}
    <input type="text" class="form-control" placeholder="Filter" name="filter" value="{{ filter }}"
           hx-post="{{ view_url }}">
    {% endif %}
</form>

<table class="table table-sm">
    <tbody>
    <tr>
    {% if tags|length != 0 %}
        <th></th>
    {% endif %}
    {% if rows[0] is not iterable %}
        {% for value in rows %}
            <th>{{ value }}</th>
        {% endfor %}
        </tr>
        <tr>
        {% for i in range(1, rows|length) %}
            <td>{{ value }}</td>
        </tr>
        {% endfor %}
    {% else %}
        {% for value in rows[0] %}
        <th>{{ value }}</th>
        {% endfor %}
        </tr>

        {% for i in range(1, rows|length) %}
            <tr>
            {% if tags|length != 0 %}
                <th>{{ tags[i-1] }}</th>
            {% endif %}
            {% for value in rows[i] %}
                <td>{{ value }}</td>
            {% endfor %}
            </tr>
        {% endfor %}
    {% endif %}
    </tbody>
</table>
