{% set pageTitle = page.title or config.subtitle or '' %}

{% if is_archive() %}
  {% set pageTitle = 'Archives' %}
{% elif is_tag() %}
  {% set pageTitle = 'Tag: ' + page.tag %}
{% elif is_category() %}
  {% set pageTitle = 'Category: ' + page.category %}
{% endif %}

{% if is_month() %}
  {% set pageTitle = pageTitle + ': ' + page.month + '/' + page.year %}
{% elif is_year() %}
  {% set pageTitle = pageTitle + ': ' + page.year %}
{% endif %}

{% if pageTitle == '' %}
  {% set pageTitle = config.title %}
{% endif %}

{% set theme_data = site.data.theme %}

<!doctype html>
<html lang="{{ config.language }}">
  <head>
    <meta charset="UTF-8">
    <title>{{ pageTitle }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    {% if theme.stylesheets !== undefined and theme.stylesheets.length > 0 %}
      {# stylesheet list from _config.yml #}
      {% for url in theme.stylesheets %}
        <link rel="stylesheet" href="{{ url }}" media="print" onload="this.media='all'; this.onload=null;">
        <noscript><link rel="stylesheet" href="{{ url }}"></noscript>
      {% endfor %}
    {% endif %}
    <link rel="stylesheet" href="{{url_for('/materialize/css/materialize.css')}}"/>
    {% block add_head %}{% endblock %}
    </head>

    <body>
      <ul id="nav-mobile" class="sidenav">
        {% for key, path in theme_data.menu %}
          <li>
            <a href="{{ path }}">{{ key }}</a>
          </li>
        {% endfor %}
      </ul>
      <nav class="light-blue lighten-1" role="navigation">
        <a href="#" data-target="nav-mobile" class="sidenav-trigger">
          <div class="mdi mdi-menu"></div>
        </a>
        <div class="nav-wrapper">
          <ul class="right hide-on-med-and-down">
            {% for key, path in site.data.theme.menu %}
              <li>
                <a href="{{ path }}">{{ key }}</a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </nav>

      <main id="content" class="container xscontainer">
        {% block body %}{% endblock %}
      </main>

        <footer class="page-footer light-blue darken-4">
          <div class="container">
            <div class="row">
              {% if site.data.theme.about_this_blog %}
                <div class="col s12 m4">
                  <h5 class="white-text">About {{ config.title }}</h5>
                  <p>{{ site.data.theme.about_this_blog }}</p>
                </div>
              {% endif %}
              {% if site.data.theme.footer_links %}
                <div class="col s6 m4">
                  <h5 class="white-text">
                    Links
                  </h5>
                  <ul>
                    {% for name, link in site.data.theme.footer_links %}
                      <li>
                        <a class="grey-text text-lighten-3" href="{{ link }}">{{ name }}</a>
                      </li>
                    {% endfor %}
                    {% if theme.my_mastodon %}
                      <li>
                        <a class="grey-text text-lighten-3" rel="me" href="{{ site.data.theme.my_mastodon }}">My Mastodon</a>
                      </li>
                    {% endif %}
                  </ul>
                </div>
              {% endif %}
              {% if theme.theme_self_claim %}
                <div class="col s6 m4">
                  <p>This blog uses Classical Material Design theme.</p>
                </div>
              {% endif %}
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container truncate">
              © Copyright {{ site.data.theme.copyright_year_string }}
              {{ config.author }}.
              {{ site.data.theme.copyright_addtional }}
            </div>
          </div>
        </footer>
        {% if theme.scripts !== undefined and theme.scripts.length > 0 %}
          {# scripts list from config.yml #}
          {% for url in theme.scripts %}
            <script src="{{ url }}"></script>
          {% endfor %}
        {% endif %}
        {% block add_scripts %}{% endblock %}
      </body>
    </html>
