{% assign post = site.categories['coverstory'].first %}
{% if page.is_post == true %}
  {% assign post = page %}
{% endif %}

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="header" class="container-fluid {% if page.is_post %}post-header{% endif %}">
  {% if post.image != nil %}
  <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""></div>
  {% endif %}
  {% unless page.is_post == true %}
  <div class="cover center-both text-center">
   <a  href="{{ post.url }}" class="cover-link"> <h1 class="title">{{ post.title }}</h1></a>
  </div>
   {% endunless %}

  <div class="left">
  {% if page.is_post and post.next %}
    <a class="center-both scroll-buttons" href="{{ post.next.url }}">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
  {% endif %}
  </div>

  <div class="right">
  {% if page.is_post and post.next %}
    <a class="center-both scroll-buttons" href="{{ post.previous.url }}">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
  {% endif %}
  </div>

</div>