{% extends "base.html" %}
{% load i18n comments%}

{% block jumbotron_background %}{{ random_photo.url }}{% endblock %}

{% block teaser %}
<h2>{{title}}</h2>
<div id="teaser_text">{{content}}</div>
{% endblock %}

{% block redbox %}
    {% if current_event %}
    <h2>{% trans "Current Event" %}</h2>
    <h3>{{ current_event.name}}</h3>
    <p><img src="{{ STATIC_URL }}icons/date.png"/> {% trans "since" %}
        <time datetime="{{current_event.start|date:'Y-m-d H:i'}}">{{current_event.start|timesince}}</time>
    </p>
    <ul class="list">
        <li class="event"><strong>{% trans "Start" %}:</strong> {{current_event.start|date:'DATETIME_FORMAT'}}</li>
        <li class="location"><strong>{% trans "Location" %}:</strong> {{ current_event.location }}</li>
    </ul>
    <div style="text-align:right"><a class="button" href="{{current_event.get_absolute_url}}">{% trans "More Details" %}
        <img src="{{ STATIC_URL }}icons/date_go.png" alt="&raquo;" width="16" height="16"/></a></div>
    {% else %}
    <h2>{% trans "Next Event" %}</h2>
    <h3>{{ next_event.name}}</h3>
    <p><img src="{{ STATIC_URL }}icons/date.png" alt="" width="16" height="16"/> {% trans "in" %}
        <time datetime="{{next_event.start|date:'Y-m-d H:i'}}">{{next_event.start|timeuntil}}</time>
    </p>
    <ul class="list">
        <li class="event"><strong>{% trans "Start" %}:</strong> {{next_event.start|date:'DATETIME_FORMAT' }}</li>
        <li class="location"><strong>{% trans "Location" %}:</strong> {{ next_event.location }}</li>
    </ul>
    <div style="text-align:right"><a class="button" href="{{next_event.get_absolute_url}}">{% trans "More Details" %}
        <img src="{{ STATIC_URL }}icons/date_go.png" alt="&raquo;" width="16" height="16"/></a></div>
    {% endif %}
    <h3 class="clearfix">{% trans "Upcoming events" %} <a href="{% url 'events-ical' %}"><img
            src="{{STATIC_URL}}img/ical_feed.gif" alt="iCal Feed" title="iCal Feed" width="16" height="16"/></a></h3>
    <ul class="list">
        {% for event in upcoming_events %}
        <li class="event">{{event.start|date:'d. M:'}} <a href="{{ event.get_absolute_url}}">{{event.name}}</a></li>
        {% endfor %}
    </ul>
{% endblock %}

{% block maincontent %}
<div class="grid_8">
    {% for article in recent_article_list %}{% get_comment_count for article as comment_count %}
    <article class="article">
        <header>
            <h2><a href="{{article.get_absolute_url}}">{{article.headline}}</a></h2>
            <ul class="info">
                <li><img src="{{STATIC_URL}}icons/date.png" width="16" height="16" alt="{% trans 'Created on' %}"
                         title="{% trans 'Created on' %}"/>
                    <time datetime="{{article.date_created|date:'Y-m-d H:i'}}">{{ article.date_created|date:'DATE_FORMAT' }}</time>
                </li>
                <li><img src="{{STATIC_URL}}icons/user_red.png" width="16" height="16" alt="{% trans 'Author' %}"
                         title="{% trans 'Author' %}"/> {{ article.author }}
                </li>
                <li><img src="{{STATIC_URL}}icons/comments.png" alt="{% trans 'comments' %}:"
                         title="{% trans 'comments' %}"/> <a href="{{article.get_absolute_url}}#comments">{{comment_count}}
                    {% trans "comments" %}</a></li>
            </ul>
        </header>
        <a href="{{article.get_absolute_url}}"><img src="{{article.posting_image.url}}" alt="{{article.category}}:"
                                                    class="posting_image"/></a>
        {{article.content|truncatewords_html:50}}
        <footer class="more_link"><a href="{{article.get_absolute_url}}" class="button">{% trans "Read More"%} <img
                src="{{STATIC_URL}}icons/page_go.png" alt="&raquo;" width="16" height="16"/></a></footer>
    </article>
    {% endfor %}
</div>

<aside class="grid_4">
    <section>
        <h2>{% trans "Recent Comments" %} <a href="{% url 'feed-latest-comments' %}"><img
                src="{{ STATIC_URL }}img/rss_feed.gif" alt="RSS Feed" title="RSS Feed" width="16" height="16"/></a></h2>
        <ul class="comment_list">
            {% for comment in recent_comment_list %}
            {% url 'membership-details' comment.user.username as user_link%}
            <li>
                {% blocktrans with comment.user as author and comment.submit_date|timesince as since and comment.submit_date|date:'c' as submit_date and comment.content_object as object and comment.get_absolute_url as comment_link%}
                From <a href="{{user_link}}">{{author}}</a> in
                <a href="{{comment_link}}">&ldquo;{{object}}&rdquo;</a>
                since
                <time datetime="{{submit_date}}">{{since}}</time>
                {% endblocktrans %}
            </li>
            {% endfor %}
        </ul>
    </section>

    <section>
        <h2>{% trans 'Kasu in the social network' %}</h2>

        <p style="text-align: center">
            <a href="https://www.facebook.com/Kasu.at"><img src="{{STATIC_URL}}img/facebook.png" alt="Facebook"
                                                            title="{% trans 'Visit us on' %} Facebook"/></a>
            <a href="https://twitter.com/KasuAustria"><img src="{{STATIC_URL}}img/twitter.png" alt="Twitter"
                                                           title="{% trans 'Visit us on' %} Twitter"/></a>
            <a href="https://plus.google.com/u/0/114092233962732014973/"><img src="{{STATIC_URL}}img/google_plus.png"
                                                                              alt="Google+"
                                                                              title="{% trans 'Visit us on' %} Google+"/></a>
        </p>
    </section>


</aside>
{% endblock %}

{% if perms.content.add_article %}{% block addidional_buttonbar %}
<a href="{% url 'add-article' %}" class="button"><img src="{{ STATIC_URL }}icons/note_add.png" alt="" width="16"
                                                      height="16"/>{% trans "Add Article" %}</a>
{% endblock %}{% endif %}