{% load tz %}
{% load static %}
{% for post in posts %}
    <div class="post">
        <div class="post-header">
            <h1>
                <a style="color: #f4ebff;" href="#">{{ post.title }}</a>
            </h1>
            <div class="author-info">
                {% with post.author.userprofile_set.first as userprofile %}
                    <span style="background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif');" class="post-profile-image"></span>
                {% endwith %}
                <span>
                    <a href="#" style="font-weight: bold;">
                        {{ post.author.first_name }} {{ post.author.last_name }}
                    </a>
                </span>
                <span>posted in</span>
                <span>
                    <a href="#/{{ post.category.slug }}" style="">
                        {{ post.category }}
                    </a>
                </span>
                <span style="margin-left: 4px;"><b>|</b></span>
                <span style="margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
            </div>
        </div>
        <div class="post-body">
            <img class="post-image {% if forloop.counter|divisibleby:2 %}post-image-r{% else %}post-image-l{% endif %}" src="{% url 'ignis:post_image' '350' post.id %}.gif">
            {{ post.excerpt | safe }}
        </div>
        <div class="post-actions" style="clear: both;">
            <span style="float: left; margin: 8px 0 0 0;">
                <a href="#">Continue Reading</a> | <a href="##comments">{{ post.num_comments }} 
                    Comment{% if not post.num_comments == 1 %}s{% endif %}</a>
            </span>
            {% comment %} tags {% endcomment %}
            <span style="float: right;">
                {% for tag in post.tags.all %}
                    <a class="tag" href="#">{{ tag.name }}</a>
                {% endfor %}
            </span>
        </div>
    </div>
{% endfor %}