{% extends 'base.html' %}


{% block title %}{{ blogpost.title }}{% endblock %}
{% block date %}{{ blogpost.date|date:"Y-m-d" }}{% endblock %}

{% block longdescription %}{{ blogpost.preview }}{% endblock %}

{% block description %}by {{ author.name }} // {{ blogpost.subtitle }}{% endblock %}

{% block image %}{{ blogpost.image_thumbnail.url }}{% endblock %}

{% block pagetype %}post{% endblock %}

{% block content %}
<article class="page-content">
    <div class="ui container">
        {% if request.user.is_staff %}
        <div class="ui center aligned basic segment">
            <a href="{% url 'admin:blog_blogpost_change' blogpost.pk %}"
               class="ui blue icon button">
               <i class="edit icon"></i>
               Edit in admin
            </a>
        </div>
        {% endif %}
        <div class="ui grid">
            <div class="eight wide column">
                <h1 class="ui header nfb-article-title">
                    {{ blogpost.title }}
                </h1>
                <h3 class="ui header nfb-article-byline">
                by <strong><a href="{% url 'author' author.slug %}">{{ author.name }}</a></strong>
                    <div class="sub header">
                        {{ blogpost.date }}
                    </div>
                </h3>
                <div class="nfb-article-subtitle">
                    <p>{{ blogpost.subtitle }}</p>
                </div>
            </div>
            <div class="eight wide right aligned column">
                {% if blogpost.image_credit %}
                <div class="nfb-image-credit">
                    <a href="{{ blogpost.image_credit }}">Image credit</a>
                </div>
                {% endif %}
                <img src="{{ blogpost.image.url }}" class="ui big floated right image" />
            </div>
        </div>
        <div class="print-only">
            <h1 class="ui inverted header article-title">
                {{ blogpost.title }}
                <div class="sub header">
                    by {{ author.name }} // {{ blogpost.date|date:"F j, Y" }}
                </div>
            </h1>
        </div>
        {% if not blogpost.published %}
        <div class="ui error message">
            <div class="ui two column grid">
                <div class="column">
                    <div class="header">
                        Not published
                    </div>
                    <p>This post won't yet show up elsewhere on the
                    website.</p>
                    <p>Here's what the thumbnail will look like when it is
                    published:</p>
                    {% if request.user.is_staff %}
                    <a href="{% url 'admin:blog_blogpost_change' blogpost.pk %}"
                       class="ui blue icon button">
                       <i class="edit icon"></i>
                       Edit in admin
                    </a>
                    {% endif %}
                </div>
                <div class="column">
                    {% include 'blog_post_thumb.html' with post=blogpost author=author only %}
                </div>
            </div>
        </div>
        <br /><br />
        {% endif %}
        <hr />
        <div class="article-content section">
            <p>
                {{ blogpost.formatted_content|safe }}
            </p>
        </div>
        <hr />
        <div class="section">
            <h3 class="section-header">author</h3>
            {% include 'author_bio.html' with author=author %}
        </div>
        {% if other_posts %}
        <hr />
        <div class="section">
            <h3 class="section-header">other posts</h3>
            <div class="ui three column stackable grid">
                {% for other_post in other_posts %}
                <div class="column">
                {% include 'blog_post_thumb.html' with post=other_post author=author only %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</article>
{% endblock %}