{% extends "layout/basic.html" %}
{% import "components/contest.html" as contest with context %}
{% macro render_important_contest(view, title, tdoc) %}
<div class="section immersive--content section--contest {{ view }}">
  <div class="media">
    <div class="media__body middle">
      <div class="section__body">
        <div>
          <h2 class="status_title">{{ _(title) }}</h2>
        </div>
        <h1>{{ tdoc['title'] }}</h1>
        <ul class="info">
          <li>
            <span class="icon icon-award"></span>
            {{ _('Rule') }}: {{ vj4.constant.contest.RULE_TEXTS[tdoc['rule']] }}
          </li>
          <li>
            <span class="icon icon-calendar"></span>
            {{ _('Start at') }}: {{ contest.render_time(tdoc['begin_at']) }}
          </li>
          <li>
            <span class="icon icon-schedule--fill"></span>
            {{ _('Duration') }}: {{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}
          </li>
          <li>
            <span class="icon icon-user--multiple"></span>
            {{ _('Partic.') }}: {{ tdoc['attend']|default(0) }}
          </li>
        </ul>
      </div>
    </div>
    <div class="media__right middle">
      <div class="section__body">
        <a href="/t/{{ tdoc._id }}" class="detail-button">{{ _('View Details') }}</a>
        <div class="typo text-center">
        {% if tsdict[tdoc['doc_id']]['attend'] == 1 %}
          <p><span class="icon icon-check"></span> {{ _('Attended') }}</p>
        {% else %}
          <p><span class="icon icon-schedule"></span> {{ _('Not Attended') }}</p>
        {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}
{% block content %}
<div class="row">
  <div class="medium-9 columns">
  {% for tdoc in tdocs %}
  {% if handler.is_ongoing(tdoc) %}
    {{ render_important_contest('live', 'Live...', tdoc) }}
  {% elif handler.is_upcoming(tdoc) %}
    {{ render_important_contest('ready', 'Ready (☆▽☆)', tdoc) }}
  {% endif %}
  {% endfor %}
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{% if not rule %}{{ _('All Contests') }}{% else %}{{ _('All {0} Contests').format(_(vj4.constant.contest.RULE_TEXTS[rule])) }}{% endif %}</h1>
        <div class="section__tools">
          <form method="get" name="filter-form">
            {{ _('Show') }}:
            <select class="inline compact select" name="rule">
              <option value="0"{% if not rule %} selected{% endif %}>{{ _('All') }}</option>
            {% for k, v in vj4.constant.contest.RULE_TEXTS.items() %}
              <option value="{{ k }}"{% if rule == k %} selected{% endif %}>{{ _('All {0} Contests').format(_(v)) }}</option>
            {% endfor %}
            </select>
            <button type="submit" class="button hasjs--hide">
              {{ _('Go') }}
            </button>
          </form>
        </div>
      </div>
      <div class="section__body no-padding">
      {% if not tdocs %}
        {{ nothing.render('There are no contests...') }}
      {% else %}
        <ol class="section__list contest__list">
        {% for tdoc in tdocs %}
          <li class="section__list__item contest__item contest-type--{{ vj4.constant.contest.RULE_ID[tdoc['rule']] }}">
            <div class="media">
              <div class="media__left medium">
                <div class="contest__date numbox">
                  <div class="numbox__num large">{{ datetime_span(tdoc['begin_at'], false, '%d') }}</div>
                  <div class="numbox__text">{{ datetime_span(tdoc['begin_at'], false, '%Y-%m') }}</div>
                </div>
              </div>
              <div class="media__body medium">
                <h1 class="contest__title"><a href="/t/{{ tdoc._id }}" data-emoji-enabled>{{ tdoc['title'] }}</a></h1>
                <ul class="supplementary list">
                  <li>
                    <a href="?rule={{ tdoc['rule'] }}" class="contest-type-tag"><span class="icon icon-award"></span>{{ vj4.constant.contest.RULE_TEXTS[tdoc['rule']] }}</a>
                  </li>
                  <li>
                    <span class="icon icon-schedule--fill text-blue"></span> {{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}
                  </li>
                  <li>
                    <span class="icon icon-user--multiple"></span> {{ tdoc['attend']|default(0) }}
                  </li>
                {% if tsdict[tdoc['doc_id']]['attend'] == 1 %}
                  <li class="contest__info-attended">
                    <span class="icon icon-check"></span> {{ _('Attended') }}
                  </li>
                {% endif %}
                </ul>
              </div>
            </div>
          </li>
        {% endfor %}
        </ol>
        {{ paginator.render(page, tpcount, add_qs=qs) }}
      {% endif %}
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
  {% if handler.has_perm(perm.PERM_CREATE_CONTEST) %}
    <div class="section side">
      <div class="section__header">
        <h1 class="section__title">
          {{ _('Create Contest') }}
        </h1>
      </div>
      <div class="section__body">
        <p><a href="{{ reverse_url('contest_create') }}" class="expanded primary button">{{ _('Create a contest') }}</a></p>
      </div>
    </div>
  {% endif %}
  </div>
</div>
{% endblock %}