<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="google" content="notranslate" />
    <title>{{ title }}</title>
    <link href="/css/beer.min.css" rel="stylesheet" />
    <link href="/css/site.css" rel="stylesheet" />
    <script type="module" src="/js/beer.min.js"></script>
    <script type="module" src="/js/material-dynamic-colors.min.js"></script>
    <script type="text/javascript" src="/js/site.js"></script>
    <link rel="manifest" href="/manifest.webmanifest" />
    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("/sw.js", { scope: "/" });
        console.log("Service Worker Registered");
      }
    </script>
  </head>

  <body class="dark">
    <nav class="bottom no-margin">
      <a href="" onclick="changeMode()">
        <i>light_mode</i>
        <div>Mode</div>
      </a>
      <a href="/">
        <i>home</i>
        <div>Home</div>
      </a>
      <a href="/new.html">
        <i>add</i>
        <div>New</div>
      </a>
    </nav>
    <main class="responsive">
      <div class="s12 page-title">
        <h2>{{ title }}</h2>
      </div>
      <div class="main">
        {% for post in posts|reverse %}
          <div class="post">
            {% if post.thumbnail_url %}
              <article class="with-image">
                <a href="{{ post.post_url }}">
                  <img
                    class="responsive large article-image"
                    src="{{ post.thumbnail_url }}"
                  />
                </a>
                <div class="article-meta">
                  <h6><a href="{{ post.post_url }}">{{ post.title }}</a></h6>
                  <p>
                    {{ post.date.strftime('%B %d, %Y') }}
                    {% if post.author %}
                      by
                      <a
                        href="/authors/{{ post.author_index }}"
                        class="author_link"
                        >{{ post.author }}</a
                      >
                    {% endif %}
                  </p>

                  {% if post.tags %}
                    <p>
                      {% for tag in post.tags %}
                        <a href="/tags/{{ tag }}.html" class="deemphasisze">
                          {{ tag }}{{ " | " if not loop.last else"" }}
                        </a>
                      {% endfor %}
                    </p>
                  {% endif %}
                </div>
              </article>
            {% else %}
              <article class="without-image">
                <div>
                  <h6><a href="{{ post.post_url }}">{{ post.title }}</a></h6>
                  <p>
                    {{ post.date.strftime('%B %d, %Y') }}
                    {% if post.author %}
                      by
                      <a
                        href="/authors/{{ post.author_index }}"
                        class="author_link"
                        >{{ post.author }}</a
                      >
                    {% endif %}
                  </p>

                  {% if post.tags %}
                    <p>
                      {% for tag in post.tags %}
                        <a href="/tags/{{ tag }}.html" class="deemphasisze">
                          {{ tag }}{{ " | " if not loop.last else"" }}
                        </a>
                      {% endfor %}
                    </p>
                  {% endif %}
                </div>
              </article>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </main>
  </body>
</html>
