{% comment %}
    this is all inside of: <li id="widget__{{ slug }}" class="widget">

    #op-qtype-tooltip div is appended in base.html, and popover is initialized
    in getWidget function in widgets.js
{% endcomment %}
{% load humanize %}

<div class="card">
    <header class="card-header">
        <h6 class="card-title mt-0">
            <div class="d-flex align-items-baseline">
                <i class="fas fa-info-circle op-widget-tooltip-{{ slug }}" title="{{ tooltip|safe }}"></i>
                <div>
                    <span class="op-widget-title">{{ label }}&nbsp;</span>
                    {% if units %}
                        <select class="op-unit-{{ slug }}" name="unit-{{ slug }}" tabindex="0">
                            {% for unit, display_name in units.items %}
                                <option value="{{ unit }}">{{ display_name }}</option>
                            {% endfor %}
                        <select>
                    {% endif %}
                    <span class="spinner"
                        {% if form_type not in range_form_types and form_type not in mult_form_types %}
                            style="display: none"
                        {% endif %}
                    >&nbsp;</span>
                </div>
            </div>
            <span class="float-end border-start border-dark">
                <a href="#card__{{ slug }}" data-bs-toggle="collapse" data-bs-target="#card__{{ slug }}" aria-expanded="true">
                    <i class="icon-action fa fa-chevron-down pull-right"></i>
                </a>
                <a href="#" data-action="close" data-slug="{{ slug }}" class="close_card">
                    <i class="icon-action fa fa-times"></i>
                </a>
            </span>
        </h6>
    </header>

    <div class="collapse show" id="card__{{ slug }}" style="">
        <article class="card-body p-1 widget__{{ slug }}
                            {% if form_type in range_form_types %}
                                 range-widget
                            {% endif %}
                            {% if form_type in mult_form_types %}
                                 mult-widget
                            {% endif %}
                        ">
            <div class="op-widget-main">
                <div id="hint__{{ slug }}" class="op-range-hints"></div>
                <ul class="op-input">
                    {% if intro %}
                        <div class="text-info">
                            {{ intro }}
                        </div>
                    {% endif %}
                    <!-- TESTING AREA -->
                    <!-- Customize inputs in the widget -->
                    {% if customized_input %}
                        {% for group_info, choices in grouped_options.items %}
                            <div class="mult-group-label-container mult-group-{{ group_info.0 }}">
                                <span class="indicator fa fa-plus"></span>
                                <span class="mult-group-label">{{ group_info.0 }}</span>
                                <span class="hints"></span>
                            </div>
                            <ul class="mult-group" data-group="{{ group_info.0 }}">
                                {% include "ui/customized_input.html" with
                                    slug=slug
                                    options=choices
                                    selections=selections
                                %}
                            </ul>
                        {% endfor %}
                        {% include "ui/customized_input.html" with
                            slug=slug
                            options=options
                            selections=selections
                        %}
                    {% else %}
                        {{ form|safe }}
                    {% endif %}
                </ul>
                {% if ranges %}
                        <ul class="dropdown-menu op-preprogrammed-ranges op-scrollable-menu ps-0" aria-labelledby="op-ranges-dropdown-menu" role="menu">
                            {% for range_data_entry in ranges %}
                                <li class="me-0 d-block" data-category="{{ range_data_entry.cat_name|slugify }}">
                                    <a class="dropdown-item bg-light dropdown-toggle collapsed" data-bs-toggle="collapse" href="#{{ range_data_entry.cat_name|slugify }}" role="button" aria-expanded="false" aria-controls="{{ range_data_entry.cat_name|slugify }}">{{ range_data_entry.cat_name }}</a>
                                    <div class="container collapse g-sm-3" id="{{ range_data_entry.cat_name|slugify }}" data-widget="widget__{{ slug }}" data-mininput="{{ slug }}1">
                                        <div class="op-preprogrammed-ranges-data-header row border-bottom border-light">
                                            <div class="col-4">
                                            </div>
                                            <div class="col-4 fw-bold text-end">
                                                {{ range_data_entry.heading1|safe }}
                                            </div>
                                            <div class="col-4 fw-bold text-end">
                                                {{ range_data_entry.heading2|safe }}
                                            </div>
                                        </div>
                                        {% for range_info in range_data_entry.ranges %}
                                            {% for unit, val1, val2 in range_info.valid_units_info %}
                                                <div class="op-preprogrammed-ranges-data-item row" data-min="{{ val1|intcomma }}" data-max="{{ val2|intcomma }}" data-widget="widget__{{ slug }}" data-unit="{{ unit }}" data-name="{{ range_info.name }}">
                                                    <div class="col-4 op-preprogrammed-ranges-data-name">
                                                        {{ range_info.name }}
                                                    </div>
                                                    <div class="col-4 op-preprogrammed-ranges-min-data text-end">
                                                        {% if range_info.field1 %}
                                                            {{ val1|intcomma }}
                                                        {% endif %}
                                                    </div>
                                                    <div class="col-4 op-preprogrammed-ranges-max-data text-end">
                                                        {% if range_info.field2 %}
                                                            {{ val2|intcomma }}
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        {% endfor %}
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                {% endif %}
            </div>
        </article>
    </div><!-- /widget-body -->
</div><!-- /widget-box -->