{% extends "templates/base.html" %}

{% block main-content %}
    <div class="container">
      <div class="page-header" id="banner">

      <div class="row">
        <div class="col-sm-8 blog-main">

          <div class="blog-post">
            <div class="page-header">
              {% if post-data.header-image %}
                <img src="{{ page-data.base-path }}/{{ post-data.header-image }}" />
              {% endif %}
              <h2 class="blog-post-title">{{ post-data.title }}</h2>
              {% if post-data.subtitle %}
              <p class="blog-post-subtitle">{{ post-data.subtitle }}</p>
              {% endif %}
              <div class="blog-post-meta">
                <p class="date">{{ post-data.month }}
                                {{ post-data.date.day }},
                                {{ post-data.date.year }}</p>
                <p class="author">by <a href="{{ page-data.base-path }}/authors/#{{ post-data.author }}">{{ post-data.author }}</a></p>
                {% if post-data.excerpt %}
                <p class="lead well">
                  {{ post-data.excerpt|safe }}
                </p>
                {% endif %}
              </div>
            </div>
            {{ post-data.body|safe }}
          </div>

          {% if post-data.char-count > 2500 %}
          <div class="row">
            <div class="col-xs-6">
              {% if post-data.prev-post %}
              <a href="{{ post-data.prev-post }}">
                <i class="fa fa-arrow-circle-o-left fa-2x"
                   aria-hidden="true"></i>
              </a>
              {% else %}
                <i class="fa fa-arrow-circle-o-left fa-2x nav-arrow-disabled"
                   aria-hidden="true"></i>
              {% endif %}
            </div>
            <div class="col-xs-6 text-right">
              {% if post-data.next-post %}
              <a href="{{ post-data.next-post }}">
                <i class="fa fa-arrow-circle-o-right fa-2x"
                   aria-hidden="true"></i>
              </a>
              {% else %}
                <i class="fa fa-arrow-circle-o-right fa-2x nav-arrow-disabled"
                   aria-hidden="true"></i>
              {% endif %}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">Previous Post</div>
            <div class="col-xs-6 text-right">Next Post</div>
          </div>
          {% endif %}

        </div>

        <aside class="col-sm-4 blog-aside">

          <div class="aside-widget">
            <header>
              <h3>Category</h3>
            </header>
            <div class="body">
              <p>
                <a href="{{ page-data.base-path }}/categories/#{{post-data.category}}">{{ post-data.category }}</a>
              </p>
            </div>
          </div>

          <div class="aside-widget tags-widget">
            <header>
              <h3>Tags</h3>
            </header>
            <div class="body">
              <ul>
                {% for tag in tags %}
                <li>
                  <a href="{{ page-data.base-path }}/tags/#{{tag}}">{{ tag }}</a>
                </li>
                {% endfor %}
              </ul>
            </div>
          </div>

          <div class="aside-widget">
            <header>
              <h3>Post Data</h3>
            </header>
            <div class="body">
              <p>Words: {{ post-data.word-count }}</p>
              <p>Characters: {{ post-data.char-count }}</p>
              </p>
            </div>
          </div>

          <div class="aside-widget">
            <header>
              <h3>Neighboring Posts</h3>
            </header>
            <div class="body">
              <div class="row">
                <div class="col-xs-6">Previous</div>
                <div class="col-xs-6">Next</div>
              </div>
              <div class="row">
                <div class="col-xs-6">
                  {% if post-data.prev-post %}
                  <a href="{{ post-data.prev-post }}">
                    <i class="fa fa-arrow-circle-o-left fa-2x"
                       aria-hidden="true"></i>
                  </a>
                  {% else %}
                    <i class="fa fa-arrow-circle-o-left fa-2x nav-arrow-disabled"
                       aria-hidden="true"></i>
                  {% endif %}
                </div>
                <div class="col-xs-6">
                  {% if post-data.next-post %}
                  <a href="{{ post-data.next-post }}">
                    <i class="fa fa-arrow-circle-o-right fa-2x"
                       aria-hidden="true"></i>
                  </a>
                  {% else %}
                    <i class="fa fa-arrow-circle-o-right fa-2x nav-arrow-disabled"
                       aria-hidden="true"></i>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </aside>

      </div>

    </div>
    </div>
{% endblock %}