{% import 'script/css.js' as css %}

{% block item %}
<article id="{{ item.id }}" class="box" onclick="this.classList.toggle('clicked')">
    <header>
        {% block header %}
        <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
            {% block metadata %}
            <div class="metadata">
            <span class="author">{{item.author}}</span>
            <span class="blog_data">{{item.published | blog_date}}</span>
            </div>

            {% endblock metadata %}
        {% endblock header %}
    </header>

    <div class="content">
        {% block content %}
        {{ item.content_xhtml or item.content or ''}}
        {% endblock content %}
    </div>

    <div class="expand_box">
        <p>
            Click to to expand…
        </p>
    </div>
</article>
{% endblock item %}