{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}

{% block media %}
    <link rel="alternate" type="application/atom+xml" href="{{ url('blog_atom') }}" title="Atom Blog Feed">
    <link rel="alternate" type="application/rss+xml" href="{{ url('blog_rss') }}" title="RSS Blog Feed">
    <link rel="alternate" type="application/atom+xml" href="{{ url('comment_atom') }}" title="Atom Comment Feed">
    <link rel="alternate" type="application/rss+xml" href="{{ url('comment_rss') }}" title="RSS Comment Feed">
    <link rel="alternate" type="application/atom+xml" href="{{ url('problem_atom') }}" title="Atom Problem Feed">
    <link rel="alternate" type="application/rss+xml" href="{{ url('problem_rss') }}" title="RSS Problem Feed">
    {% include "blog/media-css.html" %}
    <style>
        @media (max-width: 800px) {
            .title {
                clear: both;
            }
        }
        .post {
            margin: 0 2%;
        }
        .time {
            margin-left: 0;
        }

        .post:first-child {
            margin-top: 0.6em;
        }

        .comment-count {
            font-size: 12px;
        }

        .comment-icon {
            padding: 0.1em 0.2em 0 0.5em;
        }

        .comment-count-link {
            color: #555;
        }

        .own-open-tickets .title a, .open-tickets .title a {
            display: block;
        }

        .own-open-tickets .object, .open-tickets .object {
            margin-left: 1em;
            font-style: italic;
        }

        .open-tickets .user {
            margin-left: 1em;
        }

        .no-clarifications-message {
            font-style: italic;
            text-align: center;
        }

        h3 a {
            color: lightcyan;
        }
    </style>
{% endblock %}

{% block js_media %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('.time-remaining').each(function () {
                count_down($(this));
            });

            $('.blog-sidebar').hide();
            $('#blog-tab').find('a').click(function (e) {
                e.preventDefault();
                $('#blog-tab').addClass('active');
                $('#event-tab').removeClass('active');
                $('.blog-content').show();
                $('.blog-sidebar').hide();
            });
            $('#event-tab').find('a').click(function (e) {
                e.preventDefault();
                $('#event-tab').addClass('active');
                $('#blog-tab').removeClass('active');
                $('.blog-content').hide();
                $('.blog-sidebar').show();
            });
        });
    </script>
{% endblock %}

{% block body %}
    {% block before_posts %}{% endblock %}
    <div id="mobile" class="tabs">
        <ul>
            <li id="blog-tab" class="tab active"><a href="#">
                <i class="tab-icon fa fa-info-circle"></i> {{ _('Blog') }}
            </a></li>
            <li id="event-tab" class="tab"><a href="#"><i class="tab-icon fa fa-rss"></i> {{ _('Events') }}</a></li>
        </ul>
    </div>
    <div id="blog-container">
        <div class="blog-content sidebox">
            <h3>{{ _('News') }} <i class="fa fa-terminal"></i></h3>
            <div class="sidebox-content">
                {% for post in posts %}
                    <section class="{% if post.sticky %}sticky {% endif %}post">
                        <span style="float:right;">
                        <span class="time">
                            {%- if post.sticky %}<i title="Sticky" class="fa fa-star fa-fw"></i>{% endif -%}
                            {% with authors=post.authors.all() %}
                                {%- if authors -%}
                                    <span class="post-authors">{{ link_users(authors) }}</span>
                                {%- endif -%}
                            {% endwith %}
                            {{ relative_time(post.publish_on, abs=_('posted on {time}'), rel=_('posted {time}')) -}}
                        </span><span class="comment-data">
                            <a href="{{ url('blog_post', post.id, post.slug) }}#comments" class="comment-count-link">
                                <i class="fa fa-comments comment-icon"></i><span class="comment-count">
                                    {{- post_comment_counts[post.id] or 0 -}}
                                </span>
                            </a>
                        </span>
                        </span>
                        <h2 class="title">
                            <a href="{{ url('blog_post', post.id, post.slug) }}">{{ post.title }}</a>
                        </h2>
                        
                        <div class="summary content-description">
                            {% cache 86400 'post_summary' post.id %}
                                {{ post.summary|default(post.content, true)|markdown('blog', 'svg', lazy_load=True)|reference|str|safe }}
                            {% endcache %}
                        </div>
                    </section>
                {% endfor %}
            </div>
            {% if page_obj.num_pages > 1 %}
                <div style="margin-bottom:10px;margin-top:10px">{% include "list-pages.html" %}</div>
            {% endif %}
        </div>

        <div class="blog-sidebar">
            {% if request.in_contest and request.participation.contest.use_clarifications %}
                <div class="blog-sidebox sidebox">
                    <h3>{{ _('Clarifications') }} <i class="fa fa-question-circle"></i></h3>
                    <div class="sidebox-content">
                        {% if has_clarifications %}
                            <ul>
                                {% for clarification in clarifications %}
                                    <li class="clarification">
                                        <a href="{{ url('problem_detail', clarification.problem.code) }}"
                                           class="problem">
                                            {{ clarification.problem.name }}
                                        </a>
                                        <span class="time">{{ relative_time(clarification.date) }}</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <p class="no-clarifications-message">
                                {{ _('No clarifications have been made at this time.') }}
                            </p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            {% if current_contests %}
                <div class="blog-sidebox sidebox">
                    <h3>{{ _('Ongoing contests') }} <i class="fa fa-trophy"></i></h3>
                    <div class="sidebox-content">
                        {% for contest in current_contests %}
                            <div class="contest">
                                <div class="contest-list-title">
                                    <a href="{{ url('contest_view', contest.key) }}">{{ contest.name }}</a>
                                </div>
                                <div class="time">
                                    {{ _('Ends in %(countdown)s.', countdown=contest.time_before_end|as_countdown) }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if future_contests %}
                <div class="blog-sidebox sidebox">
                    <h3>{{ _('Upcoming contests') }} <i class="fa fa-trophy"></i></h3>
                    <div class="sidebox-content">
                        {% for contest in future_contests %}
                            <div class="contest">
                                <div class="contest-list-title">
                                    <a href="{{ url('contest_view', contest.key) }}">{{ contest.name }}</a>
                                </div>
                                <div class="time">
                                    {{ _('Starting in %(countdown)s.', countdown=contest.time_before_start|as_countdown) }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            <div class="blog-sidebox sidebox">
                <h3>{{ _('Comment stream') }} <i class="fa fa-comments"></i></h3>
                <div class="sidebox-content">
                    <ul>
                        {% for comment in comments %}
                            <li>
                                <span style="padding-left:0.25em" class="poster">
                                    {{ link_user(comment.author) }}
                                </span> &rarr;
                                <a href="{{ comment.link }}#comment-{{ comment.id }}">{{ page_titles[comment.page] }}</a>
                            </li>{% endfor %}
                    </ul>
                    <span class="rssatom">
                        <a href="{{ url('comment_rss') }}"><span><i class="fa fa-rss"></i></span> RSS</a>
                        /
                        <a href="{{ url('comment_atom') }}">Atom</a>
                    </span>
                </div>
            </div>
            <div class="blog-sidebox sidebox">
                <h3>{{ _('New problems') }} <i class="fa fa-puzzle-piece"></i>
                </h3>
                <div class="sidebox-content">
                    <ul class="problem-list">
                        {% for problem in new_problems %}
                            <li><a href="{{ url('problem_detail', problem.code) }}">{{ problem.name }}</a></li>
                        {% endfor %}
                    </ul>
                    <span class="rssatom">
                        <a href="{{ url('problem_rss') }}"><span><i class="fa fa-rss"></i></span> RSS</a>
                        /
                        <a href="{{ url('problem_atom') }}">Atom</a>
                    </span>
                </div>
            </div>
            {% if perms.judge.test_site and own_open_tickets %}
                <div class="blog-sidebox sidebox">
                    <h3>{{ _('My open tickets') }} <i class="fa fa-question-circle"></i></h3>
                    <div class="sidebox-content">
                        <ul class="own-open-tickets">
                            {% for ticket in own_open_tickets %}
                                <li>
                                    <div class="title">
                                        <a href="{{ url('ticket', ticket.id) }}">{{ ticket.title }}</a>
                                    </div>
                                    <div class="object">
                                        <a href="{{ ticket.linked_item.get_absolute_url() }}">
                                            {{ ticket.linked_item|item_title }}</a>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endif %}

            {% if perms.judge.test_site and open_tickets %}
                <div class="blog-sidebox sidebox">
                    <h3>{{ _('New tickets') }} <i class="fa fa-exclamation-circle"></i></h3>
                    <div class="sidebox-content">
                        <ul class="open-tickets">
                            {% for ticket in open_tickets %}
                                <li>
                                    <div class="title">
                                        <a href="{{ url('ticket', ticket.id) }}">{{ ticket.title }}</a>
                                    </div>
                                    <div class="object">
                                        <a href="{{ ticket.linked_item.get_absolute_url() }}">
                                            {{ ticket.linked_item|item_title }}</a>
                                    </div>
                                    <div>{{ link_user(ticket.user) }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {% block after_posts %}{% endblock %}
{% endblock %}

{% block bodyend %}
    {{ super() }}
    {% if REQUIRE_JAX %}
        {% include "mathjax-load.html" %}
    {% endif %}
    {% include "comments/math.html" %}
{% endblock %}