{% trans_default_domain "admin" %}

<div class="panel">
  <div class="panel-heading">
    <div class="panel-control">
      <div class="btn-group">
        <button class="btn btn-default btn-rounded js-calendar-previous" disabled="disabled">
          <i class="fa fa-2x fa-caret-left" aria-hidden="true"></i>
        </button>
        <button class="btn btn-default btn-rounded js-calendar-next">
          <i class="fa fa-2x fa-caret-right" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <h3 class="panel-title"></h3>
  </div>

  <div class="panel-body">
    <div class="table-responsive">
      {% for monthName, dates in config.data %}
        <table id="calendar-panel-{{ monthName|lower }}"
               class="table table-bordered js-dashboard-calendar dashboard-calendar {{ loop.index0 == 0 ? 'active' : 'hide' }}"
               data-month-name="{{ ('dashboard.elements.calendarElement.enums.'~monthName)|trans ~ ' ' ~ dates|keys|first|date('Y') }}">
          <thead>
          <tr class="text-center bg-primary">
            {% set weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] %}
            {% for day in weekDays %}
              <th class="text-semibold">{{ ('dashboard.elements.calendarElement.enums.'~day)|trans }}</th>
            {% endfor %}
          </tr>
          </thead>

          <tbody>
          <tr class="text-center">
            {% set finalOffset = 0 %}
            {% for date,events in dates %}
            {% if loop.index0 == 0 %}
              {% set initialOffset = date|date('N') - 1 %}
              {% set finalOffset = 7 - (initialOffset + date|date('t')) % 7 %}
              {% if initialOffset - 1 >= 0 %}
                {% for i in 0 .. (initialOffset - 1) %}
                  <td class="calendar-cell"></td>
                {% endfor %}
              {% endif %}
            {% endif %}

            <td class="pad-no calendar-cell {% if date|date('Y-m-d') == date('now')|date('Y-m-d') %}bg-gray{% endif %}">
              <div class="calendar-date">{{ date|date('d') }}</div>
              <div class="pad-all">
                {% for event in events %}
                  {% if event.link is not empty %}
                    <a class="label label-{{ event.colorClass }}" href="{{ event.link }}"
                       target="_blank">{{ event.label }}</a>
                  {% else %}
                    <span class="label label-{{ event.colorClass }}">{{ event.label }}</span>
                  {% endif %}
                {% endfor %}
              </div>
            </td>

            {% set finalIndex = loop.index0 %}

            {% if (loop.index0 + initialOffset) % 7 == 6 %}
          </tr>
          <tr class="text-center">
            {% endif %}
            {% endfor %}

            {% if finalOffset != 7 %}
              {% for i in 0 .. finalOffset-1 %}
                <td class="calendar-cell"></td>
              {% endfor %}
            {% endif %}
          </tr>
          </tbody>
        </table>
      {% endfor %}
    </div>
  </div>
</div>