{% load string_formating %}

<div class="row">
    <div class="col-11 col-md-10 col-lg-8 col-xl-6 mx-auto my-3">

        <div class="row">
            <div class="col h5 text-center text-app-primary">
                {{ report.title }}
            </div>
        </div>
        {% if report.description %}
            <div class="row">
                <div class="col text-center text-muted fs--1 mb-3">
                    {{ report.description }}
                </div>
            </div>
        {% endif %}

        <form class="form" method="GET">
            <input class="form-control" type="hidden" name="report_key_stack"
                   value="{{ request.GET.report_key_stack }}">
            <input class="form-control" type="hidden" name="report_should_run" value="True">

            {% for argument, params in report_run_arguments.items %}
                <div class="row">
                    <div class="col">
                        <label class="form-label">
                            {{ argument|underscores_to_spaces|title }} <span class="text-danger">*</span>
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col mb-2 ps-4">
                        {% if params.annotation == 'date' %}
                            <input class="form-control" type="date" name="{{ argument }}" value="{{ params.default|date:'Y-m-d' }}">
                        {% elif params.annotation == 'datetime' %}
                            <input class="form-control" type="datetime-local" name="{{ argument }}" value="{{ params.default|date:'Y-m-d\\TH:i:s' }}">
                        {% elif params.annotation == 'str' %}
                            <input class="form-control" type="text" name="{{ argument }}" value="{{ params.default }}">
                        {% elif params.annotation == 'int' %}
                            <input class="form-control" type="number" name="{{ argument }}"
                                   value="{{ params.default }}">
                        {% elif params.annotation == 'float' %}
                            <input class="form-control" type="number" name="{{ argument }}"
                                   value="{{ params.default }}">
                        {% elif params.annotation == 'bool' %}
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" {% if params.default %}checked{% endif %} id="flexSwitchCheckDefault">
                            </div>
                        {% elif params.annotation == 'multi_select' %}
                            <select class="form-select" multiple size="8" name="{{ argument }}" aria-selected="{{ params.default }}">
                                {% for key, val in params.choices %}
                                    <option value="{{ key }}">{{ val }}</option>
                                {% endfor %}
                            </select>
                        {% elif params.annotation == 'select' %}
                            <select class="form-select" name="{{ argument }}" aria-selected="{{ params.default }}">
                                {% for key, val in params.choices %}
                                    <option value="{{ key }}">{{ val }}</option>
                                {% endfor %}
                            </select>
                        {% else %}
                            <br>
                            <span class="text-danger">Unsupported parameter type: {{ params.annotation }}</span>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}

            <div x-data="{
                loading: false
            }" class="row">
                <div class="col mt-3 text-center" x-show="!loading">
                    <input class="btn btn-app-primary" @click="loading = true" type="submit" value="Run Report">
                </div>
                <div class="col mt-3 text-center text-app-primary" x-show="loading">
                    <span class="spinner-border" role="status" aria-hidden="true"></span>
                </div>
            </div>
            <div class="row">
                <div class="col mt-3 text-center text-muted fs--1">
                    This report has been informative {{ report_run_count }} times!
                </div>
            </div>
        </form>

    </div>
</div>