{%- assign info = include.info -%}

<ul class="grid">
  {%- for item in info.items -%}
    {%- assign session = site.data.sessions[item] -%}
    <li class="card-tab {{ info.theme }}">

      {%- if session.type -%}
        <div class="top-bar">{{ session.type }}</div>
      {%- elsif session.sequence -%}
        <div class="top-bar">{{ site.data.course.session_tag }}</div>
      {%- else -%}
        <div class="top-bar">&nbsp;</div>
      {%- endif -%}

      {%- if session.sequence -%}
        <div class="tab">{{ session.sequence }}</div>
      {%- elsif session.icon -%}
        <div class="tab material-symbols-outlined">{{ session.icon }}</div>
      {%- endif -%}

      {%- if session.due -%}
        <div class="header">
          <span data-date="{{ session.due }}" class="material-symbols-outlined alarm">alarm_on</span>
          {{ session.due | date: '%b %e, %y' }}
        </div>
      {%- elsif session.type -%}
        <div class="header">{{ session.header }}</div>
      {%- else -%}
        <div class="header">&nbsp;</div>
      {%- endif -%}

      <div class="body">
        {%- if session.url -%}
          <h3><a href="/session/{{ session.url }}">{{ session.title }}</a></h3>
        {%- else -%}
          <h3>{{ session.title }}</h3>
        {%- endif -%}

        {%- if session.part -%}
          <div class="item">
          Part {{ session.part }}
          </div>
        {%- endif -%}
      </div>
    </li>
  {%- endfor -%}
</ul>

<script defer>
  const due = document.querySelectorAll('.alarm');
  due.forEach( el => {
      const d = new Date(el.dataset.date.split('-')).getTime();
      if (d < Date.now()) {
        el.parentNode.removeChild(el);
      }
    });
</script>