{%- assign course = site.data.course -%}
<ul class="grid">
  {%- for segment in course.segments -%}
    {%- assign info = site.data.syllabus[segment] -%}
    {%- if info -%}
      <li class="card-tab {{ info.theme }}">
        <div class="top-bar">{{ info.segment[0] }}</div>
        <div class="tab">{{ info.segment[1] }}</div>
        <div class="header">
          <a href="/segment/{{ segment }}">
            {%- include date_range.html info=info -%}
          </a>
        </div>
        <div class="body">
          {%- if info.desc -%}
            <h4>{{ info.desc }}</h4>
          {%- endif -%}
          {%- if info.image -%}
            <img src="/assets/loading.svg" data="{{ info.thumb | default: info.image }}" alt="{{ info.title }}" />
          {%- endif -%}
          {%- for item in info.items -%}
            {%- assign session = site.data.sessions[item] -%}
            <div class="item">
              <div class="middle-align">
                <span class="material-symbols-outlined">{{ session.icon }}</span>
                <h3>{{ session.header }}</h3>
              </div>
              {%- if session.due -%}
                <small class="due"
                  data-date="{{ session.due }}"
                  title="Due {{ session.due | date: site.acc.date_format }}">
                  <span class="material-symbols-outlined">alarm_on</span>
                  {{ session.due | date: '%b %e' }}
                </small>
              {%- endif -%}

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

              {%- if session.part -%}
                <small>(Part {{ session.part }})</small>
              {%- endif -%}
            </div>
          {%- endfor -%}
        </div>
        <div class="control">
          <a class="button" href="/segment/{{ segment }}">
            {{ info.title }}&nbsp;
            <span class="middle-align material-symbols-outlined">rocket_launch</span>
          </a>
        </div>
      </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

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