<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
      {%- if is_home -%}
        {{ web_log.name }}{% if web_log.subtitle %} | {{ web_log.subtitle.value }}{% endif %}
      {%- else -%}
        {{ page_title | strip_html }}{% if page_title and page_title != "" %} &raquo; {% endif %}{{ web_log.name }}
      {%- endif -%}
    </title>
    {% page_head -%}
  </head>
  <body>
    <header class="site-header" id="top">
      <div class="header-logo">
        <a href="{{ "" | relative_link }}" hx-boost="true" hx-target="#content" hx-swap="innerHTML show:#top:top"
           hx-indicator="#loadOverlay">
          <img src="{{ "img/bitbadger.png" | theme_asset }}"
               alt="A cartoon badger looking at a computer screen, with his paw on a mouse"
               title="Bit Badger Solutions">
        </a>
      </div>
      <div class="header-title">
        <a href="{{ "" | relative_link }}" hx-boost="true" hx-target="#content" hx-swap="innerHTML show:#top:top"
           hx-indicator="#loadOverlay">
          The Bit Badger Blog
        </a>
      </div>
      <div class="header-spacer">&nbsp;</div>
      <div class="header-social">
        <a href="{{ "feed.xml" | relative_link }}" title="Subscribe to The Bit Badger Blog via RSS">
          <img src="{{ "img/rss.png" | theme_asset }}" alt="RSS">
        </a> &nbsp; &nbsp;
        <a href="https://twitter.com/Bit_Badger" title="Bit_Badger on Twitter">
          <img src="{{ "img/twitter.png" | theme_asset }}" alt="Twitter">
        </a> &nbsp; &nbsp;
        <a href="https://www.facebook.com/bitbadger.solutions" title="Bit Badger Solutions on Facebook">
          <img src="{{ "img/facebook.png" | theme_asset }}" alt="Facebook">
        </a>
      </div>
    </header>
    <div class="content-wrapper" hx-boost="true" hx-target="#content" hx-swap="innerHTML show:#top:top"
         hx-indicator="#loadOverlay">
      <div class="load-overlay" id="loadOverlay">
        <h1>Loading&hellip;</h1>
      </div>
      <main class="content" id="content" role="main">
        {{ content }}
      </main>
      <aside class="blog-sidebar">
        <div>
          <div class="sidebar-head">Linux Resources</div>
          <ul><li><a href="{{ "linux/" | relative_link }}">Browse Resources</a></li></ul>
        </div>
        <div>
          <div class="sidebar-head">Categories</div>
          <ul class="cat-list">
            {% for cat in categories -%}
              {%- assign indent = cat.parent_names | size -%}
              <li class="cat-list-item"{% if indent > 0 %} style="padding-left:{{ indent }}rem;"{% endif %}>
                <a href="{{ cat | category_link }}" class="cat-list-link">{{ cat.name }}</a>
                <span class="cat-list-count">{{ cat.post_count }}</span>
              </li>
            {%- endfor %}
          </ul>
        </div>
      </aside>
    </div>
    <footer class="site-footer">
      <span>
        A production of
        <a href="https://bitbadger.solutions" title="Bit Badger Solutions" target="_blank" rel="noopener"
           class="no-wrap">
          Bit Badger Solutions
        </a>
      </span>
      <span>
        Powered by <a href="https://github.com/bit-badger/myWebLog/tree/v2" target="_blank" rel="noopener">myWebLog</a>
        &bull;
        {% if logged_on %}
          <a href="{{ "admin" | relative_link }}">Dashboard</a>
        {% else %}
          <a href="{{ "user/log-on" | relative_link }}">Log On</a>
        {%- endif %}
      </span>
    </footer>
    {% page_foot %}
  </body>
</html>
