{% extends "main.html" %}

{% block extrahead %}
{{ super() }}
<meta name="robots" content="max-image-preview:large">
{% endblock %}

{% import "partials/nav-item.html" as item with context %}

<!-- Page content -->
{% block container %}
  <div class="md-content md-content--post" data-md-component="content" itemscope itemtype="https://schema.org/NewsArticle">

    <!-- Sidebar -->
    <div
      class="md-sidebar md-sidebar--post"
      data-md-component="sidebar"
      data-md-type="navigation"
    >
      <div class="md-sidebar__scrollwrap">
        <div class="md-sidebar__inner md-post">
          <nav class="md-nav">

            <!-- Back to overview link -->
            <div class="md-post__back">
              <div class="md-nav__title md-nav__container">
                <a href="{{ page.parent.url | url }}" class=" md-nav__link">
                  {% include ".icons/material/arrow-left.svg" %}
                  <span class="md-ellipsis">
                    {{ lang.t("blog.index") }}
                  </span>
                </a>
              </div>
            </div>

            <!-- Page authors -->
            {% if page.authors %}
              <div class="md-post__authors md-typeset">
                {% for author in page.authors %}
                  <div class="md-profile md-post__profile" itemprop="author" itemscope itemtype="https://schema.org/{{ author.type|default("Person", true) }}">
                    <span class="md-author md-author--long">
                      <img src="{{ author.avatar }}" alt="{{ author.name }}" itemprop="image" />
                    </span>
                    <span class="md-profile__description">
                      <strong itemprop="name">{{ author.name }}</strong><br />
                      <link itemprop="url" href="{{ author.url }}">
                      {{ author.description }}
                    </span>
                  </div>
                {% endfor %}
              </div>
            {% endif %}

            <!-- Page metadata -->
            <ul class="md-post__meta md-nav__list">
              <li class="md-nav__item md-nav__title">
                <div class="md-nav__link">
                  <span class="md-ellipsis">
                    {{ lang.t("blog.meta") }}
                  </span>
                </div>
              </li>

              <!-- Page date -->
              <li class="md-nav__item">
                <div class="md-nav__link">
                  {% include ".icons/material/calendar.svg" %}
                  <time datetime="{{ page.meta.date }}" class="md-ellipsis" title="Original Post Date" itemprop="datePublished">
                    {{- page.meta.date_format -}}
                  </time>
                </div>
              </li>

              <!-- Page date updated -->
              {% if page.meta.date_updated %}
                <li class="md-nav__item">
                  <div class="md-nav__link">
                    {% include ".icons/material/calendar-clock.svg" %}
                    <time datetime="{{ page.meta.date_updated }}" class="md-ellipsis" title="Date Updated" itemprop="dateModified">
                      {{- page.meta.date_updated_format -}}
                    </time>
                  </div>
                </li>
              {% endif %}

              <!-- Page categories -->
              {% if page.categories %}
                <li class="md-nav__item">
                  <div class="md-nav__link">
                    {% include ".icons/material/bookshelf.svg" %}
                    <span class="md-ellipsis">
                      {{ lang.t("blog.categories.in") }}
                      {% for category in page.categories %}
                        <a href="{{ category.url | url }}">
                          {{- category.title -}}
                        </a>
                        {%- if loop.revindex > 1 %}, {% endif -%}
                      {% endfor -%}
                    </span>
                  </div>
                </li>
              {% endif %}

              <!-- Page readtime -->
              {% if page.meta.readtime %}
                {% set time = page.meta.readtime %}
                <li class="md-nav__item">
                  <div class="md-nav__link">
                    {% include ".icons/material/clock-outline.svg" %}
                    <span class="md-ellipsis">
                      {% if time == 1 %}
                        {{ lang.t("readtime.one") }}
                      {% else %}
                        {{ lang.t("readtime.other") | replace("#", time) }}
                      {% endif %}
                    </span>
                  </div>
                </li>
              {% endif %}

              <!-- Post license -->
              <li class="md-nav__item">
                <div class="md-nav__link">
                {% if page.meta.license == "BY" or page.meta.license == "BY-SA" or page.meta.license == "BY-NC" or page.meta.license == "BY-NC-SA" or page.meta.license == "BY-SA" or page.meta.license == "BY-ND" or page.meta.license == "BY-NC-ND" %}
                    {% include ".icons/material/creative-commons.svg" %}
                    <span class="md-ellipsis">
                        <a itemprop="license" href="https://creativecommons.org/licenses/{{ page.meta.license|lower }}/4.0/">{{ page.meta.license }} 4.0</a>
                    </span>
                {% elif page.meta.license == "CC0" %}
                    {% include ".icons/fontawesome/brands/creative-commons-zero.svg" %}
                    <span class="md-ellipsis">
                        <a itemprop="license" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 (Public domain)</a>
                    </span>
                {% elif page.meta.license == "Public domain" %}
                    {% include ".icons/fontawesome/brands/creative-commons-pd.svg" %}
                    <span class="md-ellipsis">
                        <a itemprop="license" href="https://creativecommons.org/publicdomain/zero/1.0/">Public domain</a>
                    </span>
                {% elif page.meta.license %}
                    {% include ".icons/material/scale-balance.svg" %}
                    <span class="md-ellipsis">
                        {{ page.meta.license }}
                    </span>
                {% else %}
                    {% include ".icons/material/copyright.svg" %}
                    <span class="md-ellipsis">
                        All rights reserved
                    </span>
                {% endif %}
                </div>
              </li>
            </ul>

            <!-- Page links -->
            {% if page.links %}
              <ul class="md-nav__list">
                <li class="md-nav__item md-nav__title">
                  <div class="md-nav__link">
                    <span class="md-ellipsis">
                      {{ lang.t("blog.references") }}
                    </span>
                  </div>
                </li>

                <!-- Render page links -->
                {% for nav_item in page.links %}
                  {% set path = "__ref_" ~ loop.index %}
                  {{ item.render(nav_item, path, 1) }}
                {% endfor %}
              </ul>
            {% endif %}
          </nav>

          <!-- Table of contents, if integrated -->
          {% if "toc.integrate" in features %}
            {% include "partials/toc.html" %}
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Page content -->
    <article class="md-content__inner md-typeset">
      {% block content %}
        <!-- Tags -->
        {% if "material/tags" in config.plugins %}
        {% include "partials/tags.html" %}
        {% endif %}

        <!-- Actions -->
        {% include "partials/actions.html" %}

        {% if page.meta and page.meta.cover %}
        <img class="cover" src="/{{ page.meta.cover }}">
        {% endif %}

        <!--
        Hack: check whether the content contains a h1 headline. If it doesn't, the
        page title (or respectively site name) is used as the main headline.
        -->
        {% if "\x3ch1" not in page.content %}
        <h1 itemprop="headline">{{ page.title | d(config.site_name, true)}}</h1>
        {% endif %}

        <!-- Page content -->
        <div itemprop="articleBody">
        {{ page.content }}
        </div>

        <!-- Source file information -->
        {% include "partials/source-file.html" %}

        <!-- Was this page helpful? -->
        {% include "partials/feedback.html" %}

        <hr />

        {% if page.meta.canonical %}
        <div class="admonition note">
          <p itemprop="creditText">This post was originally published at <a href="{{ page.meta.canonical }}">{{ page.meta.canonical }}</a></p>
        </div>
        {% endif %}

        {% if page.authors %}
        <div class="md-post__authors md-typeset">
          {% for author in page.authors %}{% if author.description_long %}
            <div class="md-profile md-post__profile">
              <span class="md-author md-author--long">
                <img src="{{ author.avatar }}" alt="{{ author.name }}" />
              </span>
              <span class="md-profile__description">
                <strong>{{ author.name }}</strong><br />
                {{ author.description }}
              </span>
            </div>
            <div class="md-profile md-post__profile">
              <em>{{ author.description_long }}</em>
            </div>
          {% endif %}{% endfor %}
        </div>
        {% endif %}

        <!-- Comment system -->
        {% include "partials/comments.html" %}
      {% endblock %}
    </article>
  </div>
{% endblock %}