{% extends "base.html" %}

{% block image_header %}
{% if BLOG_PAGE_IMAGE_HEADER %}
<img src="{{ BLOG_PAGE_IMAGE_HEADER }}">
{% endif %}
{% endblock image_header %}

{% block content_placeholder %}
<div class="twelve alt columns">
    {% block content %}{% endblock content %}
</div>

<!-- Sidebar -->
<div class="four columns">
    {% if 'about' in SIDEBAR_DISPLAY and SIDEBAR_ABOUT %}
    <!-- About  -->
    <div class="widget no-mg-top">
        <h3 class="headline">About</h3><span class="line"></span>
        <div class="clearfix"></div>
        <p>{{ SIDEBAR_ABOUT }}</p>
    </div>
    {% endif %}

    {% if 'categories' in SIDEBAR_DISPLAY %}
    <!-- Categories -->
    <div class="widget{% if 'about' not in SIDEBAR_DISPLAY %} no-mg-top{% endif %}">
        <h3 class="headline">Categories</h3>
        <hr>
        <div class="clearfix"></div>
        <nav class="categories">
            <ul>
                {% for cat, null in categories %}
                <li
                        {% if cat== category %} class="active" {% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{
                    cat
                    }}</a></li>
                {% endfor %}
            </ul>
        </nav>
    </div>
    {% endif %}

    {% if 'tags' in SIDEBAR_DISPLAY %}
    <!-- Tags -->
    <div class="widget{% if 'about' not in SIDEBAR_DISPLAY and 'categories' not in SIDEBAR_DISPLAY %} no-mg-top{% endif %}">
        <h3 class="headline">Tags</h3>
        <hr>
        <div class="clearfix"></div>
        <nav class="tags">
            {%- for tag, articles in tags|sort %}
            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
            {% endfor %}
        </nav>
    </div>
    {% endif %}
    <div class="widget">
        <br>
        <h3 class="headline">Support Me</h3>
        <hr>
        <div class="clearfix"></div>
        <script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
        <script type='text/javascript'>kofiwidget2.init('Buy me a soda', '#46b798', 'Z8Z4RGIA');
        kofiwidget2.draw();</script>
    </div>
    <div class="widget">
        <br>
        <h3 class="headline">Subscribe</h3>
        <hr>
        <div class="clearfix"></div>
        <!-- Trigger/Open The Modal -->
        <div class="btn-container">
            <a title="Subscribe via Email" class="kofi-button" style="background-color:#46b798;"
               href="http://jwkennington.com/pages/subscribe">
                <span class="kofitext">Subscribe via Email</span>
            </a>
        </div>
    </div>
    <div class="widget">
        <br>
        <span class="line"></span>
        <div class="clearfix"></div>
        {% block pv %}
        <b>Page views: </b>
        {% endblock pv %}
    </div>
    <br>

</div>
{% endblock content_placeholder %}