{% set useSmartTab = (schedules_for_pages | length > 1) %}

<div class="masonry-item col-md-6">
    <div class="bd bgc-white p-20">
        <div class="layers">
            <div class="layer w-100 mB-10">
                <h6 class="lh-1">{{  ('dashboard.widgets.' ~ widget_name ~ '.label')  | trans }}</h6>
            </div>
            <div class="layer w-100">
                <div {% if useSmartTab %} data-smart-tab="true" {% endif %}>
                    {# Pagination #}
                    <ul class="nav">
                        {# info: this might be overkill at some point - iterating twice over the same data once to build the tabs second to show data #}
                        {% if useSmartTab %}
                            {% for index, schedules in schedules_for_pages %}
                                {% set pageNumber = index + 1 %}
                                <li><a class="nav-link" href="#tab-{{ index }}" id="tab-nav-{{ index }}">{{ pageNumber }}</a></li>
                            {% endfor %}
                        {% endif %}
                    </ul>

                    {# Tabs with schedules #}
                    <div class="tab-content">

                        {% for index, schedules in schedules_for_pages %}
                            <div id="tab-{{ index }}" {% if useSmartTab %}class="tab-pane" role="tabpanel" {% endif %}>
                                {% for incomingScheduleDto in schedules %}
                                        <ul class="list-task list-group hoverable-list-gray" data-role="tasklist">
                                            {% set icon_classes  = getClassesForSchedulesNotifications(incomingScheduleDto.daysDiff) %}
                                            {% set badge_classes = getClassesForSchedulesWidget(incomingScheduleDto.daysDiff) %}

                                            <li class="list-group-item bdw-0" data-role="task"
                                                data-toggle-popover="true"                     {# popover attr  #}
                                                data-content="{{ incomingScheduleDto.body }}"  {# popover attr  #}
                                                data-placement="top"                           {# popover attr  #}
                                            >
                                                <div class="peers ai-c">
                                                    <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
                                                    <span class="peer peer-greed">
                                                        <i class="{{ incomingScheduleDto.icon }} {{ icon_classes }}"></i>
                                                        <span class="{{ incomingScheduleDto.daysDiff < 0 ? 'text-danger' : ''}}">
                                                            {{ incomingScheduleDto.title }}
                                                            ({{ incomingScheduleDto.date }})
                                                        </span>
                                                    </span>
                                                        <span class="peer">
                                                        <span class="badge badge-pill fl-r {{ badge_classes }} lh-0 p-10">
                                                            {{ incomingScheduleDto.daysDiff }} days
                                                        </span>
                                                    </span>
                                                    </label>
                                                </div>
                                            </li>
                                        </ul>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>