{% load i18n %}
{% load fb_versions %}

<!-- Header -->
<header>
    <hgroup>
        <h1>{{ category.name }}</h1>
        <h3 class="subheader">
            {{ category.get_pages|length }}
            {% blocktrans with plural=category.get_pages|length|pluralize %}
                article{{ plural }}
            {% endblocktrans %}
        </h3>
    </hgroup>
</header>
<!-- /Header -->

{% if category.short_description %}
<div class="category-short-description">
    <p>
        {{ category.short_description|safe }}
    </p>
</div>
{% endif %}

{% if category.description %}
<div class="category-description">
    <p>
        {{ category.description|safe }}
    </p>
</div>
{% endif %}

{% for page in category.get_pages %}
    {% if page.is_highlighted %}
    <div class="page-short highlighted">
        <h2>
            <a href="{{ page.get_absolute_url }}" title="{{ page.title }}">
                {{ page.title }}
            </a>
        </h2>

        {% if page.image %}
            <a href="{{ page.get_absolute_url }}" title="{{ page.title }}">
                <img src="{% version page.image 'medium' %}" alt="{{ page.title }}" class="page-image"/>
            </a>
        {% endif %}

        <div class="page-synopsis">
            <p>
                {% if page.synopsis %}
                {{ page.synopsis|safe }}
                {% else %}
                {{ page.content|truncatewords_html:60|safe }}
                {% endif %}
            </p>
        </div>
    </div>
    {% else %}
    <div class="page-short">
        <h4>
            <a href="{{ page.get_absolute_url }}" title="{{ page.title }}">
                {{ page.title }}
            </a>
        </h4>
        {% if page.image %}
            <a href="{{ page.get_absolute_url }}" title="{{ page.title }}">
                <img src="{% version page.image 'small' %}" alt="{{ page.title }}" class="page-image"/>
            </a>
        {% endif %}

        <div class="page-synopsis">
            <p>
                {% if page.synopsis %}
                {{ page.synopsis|truncatewords_html:30|safe }}
                {% else %}
                {{ page.content|truncatewords_html:30|safe }}
                {% endif %}

                <a href="{{ page.get_absolute_url }}" title="{{ page.title }}" class="read-more">
                    {% trans "Read more" %}
                </a>
            </p>
        </div>
    </div>
    {% endif %}
{% endfor %}