<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <%- include('/head', {head: content.head}) %>
  </head>
  <body>
    <% if (content.header) { %>
    <header class="page-header">
      <% if (!utilities.isWrappedInParagraphTags(content.header)) { %>
      <p>
        <% } %> <%- content.header %> <% if (!utilities.isWrappedInParagraphTags(content.header)) {
        %>
      </p>

      <p><% } %></p>
    </header>

    <% } %>
    <section>
      <div class="timeline-filter-wrapper">
        <header class="timeline-filter">
          <ul>
            <li>
              <input type="checkbox" name="filter-shortcut" id="all" checked />
              <label for="all">All</label>
            </li>
            <% content.filters.forEach(function(filter){ %>
            <li>
              <input type="checkbox" name="filter" id="<%= filter %>" checked />
              <label for="<%= filter %>"><%- utilities.sentenceCase(filter) %> </label>
            </li>
            <% }); %>
          </ul>
        </header>
      </div>
      <article class="timeline">
        <% content.entries.forEach(function(entry){ %>
        <div
          class="timeline-entry"
          data-category="<%= entry.categoriesString %>"
          aria-hidden="false"
        >
          <div class="timeline-icon <%- entry.color || 'grey' %>" title="<%= entry.faicon %>">
            <% if (entry.faicon) { %>
            <i class="fas fa-<%= entry.faicon %>" aria-hidden="true"></i>
            <% } %>
          </div>
          <div class="timeline-description">
            <span class="timestamp"
              ><time datetime="<%- entry.datetime || entry.date %>"
                ><%- utilities.humanizeDate(entry.datetime, entry.date) %></time
              ></span
            >
            <h2>
              <a id="<%= entry.id %>" href="#<%= entry.id %>"><i class="fas fa-link"></i></a><%-
              entry.title %>
            </h2>
            <% if (entry.image) { %>
            <div class="captioned-image image-right">
              <% if (entry.image.link) { %><a href="<%= entry.image.link %>"
                ><% } %>
                <img src="<%= entry.image.src %>" alt="<%= entry.image.src %>" />
                <% if (entry.image.link) { %></a
              ><% } %> <% if (entry.image.caption) { %>
              <span class="caption"><%- entry.image.caption %></span>
              <% } %>
            </div>
            <% } %> <% if (!utilities.isWrappedInParagraphTags(entry.body)) { %>
            <p>
              <% } %> <%- entry.body %> <% if (!utilities.isWrappedInParagraphTags(entry.body)) { %>
            </p>
            <% } %> <% if (entry.links) { %>
            <ul>
              <% entry.links.forEach(function (link) { %>
              <li>
                <a href="<%= link.href %>" target="_blank"><%- link.linkText %></a><%-
                link.extraText %>
              </li>
              <% }) %>
            </ul>
            <% } %>
          </div>
        </div>
        <% }); %>
      </article>
    </section>
    <% if (content.footer) { %>
    <footer class="page-footer">
      <% if (!utilities.isWrappedInParagraphTags(content.footer)) { %>
      <p>
        <% } %> <%- content.footer %> <% if (!utilities.isWrappedInParagraphTags(content.footer)) {
        %>
      </p>
      <% } %>
      <p>
        Built with Molly White's
        <a href="https://github.com/molly/static-timeline-generator" target="_blank"
          >static timeline generator</a
        >.
      </p>
    </footer>
    <% } %>

    <script src="js/classlist-polyfill.js"></script>
    <script src="js/site-js.js"></script>
  </body>
</html>
