Widget component

<div class="o-widget{% if loading %} -loading{% endif %} card bg-white">
    <div class="card-header px-3 px-xl-4{% if action %} d-flex justify-content-between{% endif %}">
        <div class="d-flex align-items-center">
            {% render '@circle', {icon:icon, color:icon_color, size:icon_size, pointer:false}, true %}
            <div class="ml-3">
                <h4 class="mb-0 limit-lines-1">{{ title }}</h4>
                {% if subtitle %}
                    <small class="text-muted align-items-center limit-lines-1">{{ subtitle }}</small>
                {% endif %}
            </div>
        </div>
        {% if action %}
            <div class="o-widget__action ml-3 d-none d-md-block js-widgetDrag">
                {% render '@circle', {icon:'move', size:icon_size}, true %}
            </div>
        {% endif %}
    </div>
    <div class="card-body py-4 px-3 px-sm-4">
        {% if loading %}
            <div class="d-flex align-items-center h-100 justify-content-center">
                {% render '@loader--rotate' %}
            </div>
        {% else %}
            {% if content == 'my_orders' or content == 'updates' %}
            <ul class="list-group list-group-flush h-100{% if content == 'my_orders' or content == 'updates' %} -spacing{% endif %}">
                {% for i in range(0, 3) -%}
                    {% if content == 'my_orders' %}
                        {% if i == 0 %}
                            {% set list_item_title = "De Vliethorst" %}
                            {% set list_item_sub_title = "Friesland" %}
                            {% set progress = "65" %}
                            {% set sublabel = "Welstand" %}
                        {% elif i == 1 %}
                            {% set list_item_title = "Havenkade" %}
                            {% set list_item_sub_title = "Groningen" %}
                            {% set progress = "20" %}
                            {% set sublabel = "Bestelling" %}
                        {% elif i == 2 %}
                            {% set list_item_title = "De Vliethorst" %}
                            {% set list_item_sub_title = "Flevoland" %}
                            {% set progress = "30" %}
                            {% set sublabel = "Offerte" %}
                        {% endif %}
                    {% elif content == 'updates' %}
                        {% if i == 0 %}
                            {% set list_item_title = "Communiceren via taak" %}
                            {% set list_item_sub_title = "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet" %}
                        {% elif i == 1 %}
                            {% set list_item_title = "Notificaties via pop-ups" %}
                            {% set list_item_sub_title = "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet" %}
                        {% elif i == 2 %}
                            {% set list_item_title = "Fijn Coach" %}
                            {% set list_item_sub_title = "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet" %}
                        {% endif %}
                    {% endif %}
                    <div class="list-group-item d-flex justify-content-between align-items-center cursor-pointer">
                        <div class="d-flex w-100">
                            <div class="w-100{% if content == 'my_orders' %} mr-2{% endif %}">
                                <strong>{{ list_item_title }}</strong>
                                {% if content == 'my_orders' or content == 'updates' %}
                                    <span class="text-muted limit-lines-1">{{ list_item_sub_title }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% if content == 'my_orders' %}
                            {% render '@progress--medium', {progress:progress, label:false, sublabel:sublabel}, true %}
                        {% endif %}
                    </div>
                {% endfor %}
            </ul>
            {% elif content == 'support' %}
                {% for i in range(0, 2) -%}
                    {% if i == 0 %}
                        {% set lines = 1 %}
                        {% set list_item_title = "Veelgestelde vragen over" %}
                        {% set badges = ["Inloggen", "Bestanden", "Notificaties", "Ontwikkelingen", "CRM", "Configurator"] %}
                    {% elif i == 1 %}
                        {% set lines = 1 %}
                        {% set list_item_title = "Een probleem melden" %}
                        {% set badges = [{ title: "Support@fijn.com", icon: "mail-alt" }, { title: "Topdesk", icon: "question-mark"}] %}
                    {% endif %}
                    <div class="card-text px-2{% if i == 1 %} mt-45{% endif %}">
                        <strong>{{ list_item_title }}</strong>
                        <div class="mt-2">
                            {% render '@badge-group', {lines:lines, badges:badges}, true %}
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        {% endif %}
    </div>
    {% if footer %}
        <a href="" class="card-footer d-flex justify-content-center align-items-center">
            <span class="mb-0 pr-2">{{ footer_text }}</span>
            <i class="icon-arrow-right"></i>
        </a>
    {% endif %}
</div>