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

{% block post_css %}
<link href="/blog/assets/css/blog.css" rel="stylesheet">
{% endblock %}

{% 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">
              <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="#">{{ 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>

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">

          <div class="sidebar-module sidebar-module-inset">
            <p class="social">
              <a href="/blog/atom.xml">
                <i class="fa fa-feed fa-lg first"></i>
              </a>
              <a href="http://twitter.com/clozhang">
                <i class="fa fa-twitter fa-lg"></i>
              </a>
              <a href="http://github.com/clozhang">
                <i class="fa fa-github fa-lg"></i>
              </a>
              <a href="http://clozhang.slack.com">
                <i class="fa fa-slack fa-lg"></i>
              </a>
              <a href="https://groups.google.com/forum/#!forum/clozhang">
                <i class="fa fa-envelope fa-lg last"></i>
              </a>
            </p>
          </div>

          <div class="sidebar-module">
            <h4>Category</h4>
            <p>
              <a href="/blog/categories/#{{post-data.category}}">{{ post-data.category }}</a>
            </p>
          </div>

          <div class="sidebar-module">
            <h4>Tags</h4>
            <p>
              {% for tag in tags %}
              <a href="/blog/tags/#{{tag}}">{{ tag }}</a>
              {% endfor %}
            </p>
          </div>

          <div class="sidebar-module">
            <h4>Post Data</h4>
            <p>Words: {{ post-data.word-count }}</p>
            <p>Characters: {{ post-data.char-count }}</p>
            </p>
          </div>

          <div class="sidebar-module">
            <h4>Neighboring Posts</h4>
            <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>
      </div>

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

Notes:
 * add dragon.blog function for generating linked tags
 * auto-convert excerpt as Markdown
 * add post age