<!-- this row is the general widget container -->
<div class="row element d-flex justify-content-{{ position }} {{ hide }} {{ css_class_container }} {{ align }}"
id="{{ name }}-container" style="{{ height }}">

<!-- this column is used to control the overall width of the widget -->
<div class="{{ element_width }}">

<!-- this row contains the components of an input element (i.e. labels and input fields) -->
<div class="row input-element">

<!-- if there is a toplab, it is rendered here -->
{% if toplab %}
{% if leftlab %} <div class="{{ leftlab.col_breaks }}""></div> {% endif %} <!-- for spacing -->
<div class="{{ input_breaks }} toplab" for="{{ name }}">
{{ toplab.web_widget }}
</div>
{% if rightlab %} <div class="{{ rightlab.col_breaks }}""></div> {% endif %} <!-- for spacing -->
{% endif %}

<!-- if there is a left label, it is rendered here -->
{% if leftlab %}
<div class="{{ leftlab.col_breaks }} {{ leftlab.vertical_alignment }} leftlab" for="{{ name }}">
{{ leftlab.web_widget }}
</div>
{% endif %}

<!-- this is where the actual input field gets rendered -->
<div class="{{ input_breaks }} {{ input_valign }} {% if prexix or suffix %}input-group{% endif %}">

{# Prefix #}
{% if prefix %}
<div class="input-group-prepend">
    {{ prefix }}
</div>
{% endif %}

<!-- This is where the element HTML is injected -->
{{ html | safe}}

{# Suffix #}
{% if suffix %}
<div class="input-group-append">
    {{ suffix }}
</div>
{% endif %}
</div>

<!-- if there is a right label, it is rendered here -->
{% if rightlab %}
<div class="{{ rightlab.col_breaks }} {{ rightlab.vertical_alignment }} rightlab" for="{{ name }}">
{{ rightlab.web_widget }}
</div>
{% endif %}

<!-- if there is a bottom, it is rendered here -->
{% if bottomlab %}
{% if leftlab %} <div class="{{ leftlab.col_breaks }}""></div> {% endif %} <!-- for spacing -->
<div class="{{ input_breaks }} bottomlab" for="{{ name }}">
{{ bottomlab.web_widget }}
</div>
{% if rightlab %} <div class="{{ rightlab.col_breaks }}""></div> {% endif %} <!-- for spacing -->
{% endif %}

<!-- Experimenter Messages -->
{% if corrective_hints %}
<div class="col-12 mt-2" id="{{ name }}-corrective-hints">
{% for hint in corrective_hints %}
<div class="alert alert-{{ hint.level }}">
<div class="row">
<div class="col-1 text-center" style="font-size: 18pt;">
<i class="fas fa-arrow-alt-circle-up"></i>
</div>
<div class="col corrective-hint">
{% if hint.title %}
<strong>{{hint.title}}</strong> <br>
{% endif %}
{{ hint.msg }}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}

</div>


</div>
</div>
