{# LIBRARIES #}
{{ attach_library('ui_patterns/sa_calendar.sa_calendar_lib') }}

{# TEMPLATE #}
{% if alterations and alterations|length %}
<h2 id="{{ tid }}-title" class="sac-list-header {% if hide %}sr-only{% endif %}">
  {{ title }}
</h2>

<div class="table-responsive-md">
  <table id="{{ tid }}-table"
         class="sac-list-table table w-100 {{ tid is same as('calendar') ? 'table-restriped' : 'table-striped'}}" >
    <thead id="{{ tid }}-thead" class="{% if hide %}tr-hidden{% endif %}">
    <tr>
      <th class="date" scope="col">Dates</th>
      <th class="location" scope="col">Alterations</th>
    </tr>
    </thead>
    <tbody>
    {% for alt in alterations %}
      <tr id="nid-{{ alt.nid }}" class="sac-table-row {% if hide %}tr-hidden{% endif %}">
        <td class="date" data-label="Dates">
          <span class="date-display-start">{{ alt.start_date }}</span> to
          <span class="date-display-end">{{ alt.end_date }}</span>
        </td>
        <td class="locations" data-label="Alterations">
          <a class="a-u" href="{{ alt.url }}">{{ alt.label }}</a>
          <br>
          <strong>Locations affected:</strong> {{ alt.location }}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
