{% 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 }}">
            {% if info.begin and info.end %}
              {{ info.begin | date: site.acc.date_format }} - {{ info.end | date: site.acc.date_format }}
            {% else %}
              {{ info.date }}
            {% endif %}
          </a>
        </div>
        <div class="body">
          {% 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>
                {% if session.due %}
                  <small class="due" title="Due {{ session.due | date: site.acc.date_format }}">
                    <span class="material-symbols-outlined">alarm_on</span>
                    {{ session.due | date: site.acc.date_format }}
                  </small>
                {% endif %}
              </div>

              {% 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>