{% extends "index.html" %}

{% block title %}{{ page.title }}{% endblock title %}

{# <!-- Choosing cover image --> #}
{% if page.cover %}
    {% if page.cover|lower|truncate(4, True, '') == "http" %}
        {% set default_cover = page.cover %}
    {% else %}
        {% set default_cover = SITEURL+"/"+page.cover %}
    {% endif %}
{% elif page.og_image %}
    {% if page.og_image|lower|truncate(4, True, '') == "http" %}
        {% set default_cover = page.og_image %}
    {% else %}
        {% set default_cover = SITEURL+"/"+page.og_image %}
    {% endif %}
{% elif HEADER_COVER %}
  {% set default_cover = SITEURL+"/"+HEADER_COVER %}
{% endif %}

{% block header %}
    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header id="post-header" class="has-cover">
      <div class="inner">
        <nav id="navigation">
          {% if SITE_LOGO %}
            <span class="blog-logo">
                <a href="{{ SITEURL }}"><img src="{{SITE_LOGO}}" alt="Blog Logo" /></a>
            </span>
          {% else %}
            <span id="home-button" class="nav-button">
                <a class="home-button" href="{{ SITEURL }}" title="Home"><i class="ic ic-arrow-left"></i> Home</a>
            </span>
          {% endif %}
          <span id="menu-button" class="nav-button">
            <a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
          </span>
        </nav>
        <h1 class="post-title">{{ page.title }}</h1>
        {% if default_cover %}
            <div class="post-cover cover" style="background-image: url('{{ default_cover }}')">
        {% elif HEADER_COLOR %}
            <div class="post-cover cover" style="background-color: {{ HEADER_COLOR }}">
        {% else %}
            <div class="post-cover cover" style="background-image: url('{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg')">
        {% endif %}
      </div>
    </header>
{% endblock header %}

{% block content %}
  <!-- Post content -->
  <main class="content" role="main">
      <article class="post">
      <div class="inner">
          <section class="post-content">
              {{page.content}}
          </section>
      </div>
      </article>
  </main>
{% endblock content %}