{% extends "three-column-content.html" %}
{% block meta %}
  <meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
{% endblock %}

{% block three_col_media %}
  <style>
    .non-padding-top {
      padding-top: 0;
    }

    .btn-contest {
      display: inline-block;
      padding: 1px 6px;
    }

    .contest-group-header {
      margin-bottom: 1em;
    }

    {% if page_obj and page_obj.number > 1%}
      #ongoing-table {
        display: none;
      }
    {% endif %}

    #search-contest {
      width: 100%;
      height: 2.3em;
    }
    #search-org {
      width: 100%;
    }
  </style>
{% endblock %}

{% block three_col_js %}
  <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var $form = $('form#filter-form');
      $('#show_orgs').click(function () {
        ($('<form>').attr('action', window.location.pathname + '?' + $form.serialize())
            .append($('<input>').attr('type', 'hidden').attr('name', 'csrfmiddlewaretoken')
              .attr('value', $.cookie('csrftoken')))
            .attr('method', 'POST').appendTo($('body')).submit());
      });
      $('#go').click(function() {
        $form.submit();
      });
      $('.time-remaining').each(function () {
        count_down($(this));
      });

      $('.contest-tag').find('a[data-featherlight]').featherlight();

      $('.join-warning').click(function () {
        let q = '{{ _('Are you sure you want to join?') }}\n' +
        '{{ _('Joining a contest for the first time starts your timer, after which it becomes unstoppable.') }}';
        {% if request.in_contest %}
          q += " {{ _('By joining in this contest, you will automatically leave contest') }} \"{{ request.participation.contest.name }}\". ";
        {% endif %}
        return confirm(q);
      });

      $('#search-contest').keypress(function (e) {
        if (e.keyCode == 13)
        $('#go').click();
      });

      $('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});

      // var tooltip_classes = 'tooltipped tooltipped-e';
      //
      // $('.contest-tag').each(function () {
      //     var link = $(this);//
      //     link.mouseenter(function (e) {
      //         link.addClass(tooltip_classes).attr('aria-label', link.attr('data-description'));
      //     }).mouseleave(function (e) {
      //         link.removeClass(tooltip_classes).removeAttr('aria-label');
      //     });
      // });
    });
  </script>
{% endblock %}

{% block left_sidebar %}
  {% include "contest/contest-list-tabs.html" %}
{% endblock %}

{% block right_sidebar %}
  <div class="right-sidebar">
    {% include "contest/search-form.html" %}
  </div>
{% endblock %}

{% macro contest_head(contest) %}
  <a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
    {{contest.name}}
  </a>
  <div class="contest-tags">
    {% if not contest.is_visible %}
      <span class="contest-tag contest-tag-hidden">
        <i class="fa fa-eye-slash"></i> {{ _('hidden') }}
      </span>
    {% endif %}
    {% if contest.is_editable %}
      <span class="contest-tag contest-tag-edit">
        <a href="{{ url('organization_contest_edit', organization.id, organization.slug, contest.key) }}" class="white">
          <i class="fa fa-edit"></i> {{ _('Edit') }}
        </a>
      </span>
    {% endif %}
    {% if contest.is_private %}
      <span class="contest-tag contest-tag-private">
        <i class="fa fa-lock"></i> {{ _('private') }}
      </span>
    {% endif %}
    {% if not hide_contest_orgs %}
      {% if contest.is_organization_private %}
        {% for org in contest.organizations.all() %}
          {% include "organization/tag.html" %}
        {% endfor %}
      {% endif %}
    {% endif %}
    {% if contest.is_rated %}
      <span class="contest-tag contest-tag-rated">
        <i class="fa fa-bar-chart"></i> {{ _('rated') }}
      </span>
    {% endif %}
    {% for tag in contest.tags.all() %}
      <span style="background-color: {{ tag.color }}" class="contest-tag">
        <a href="{{ url('contest_tag', tag.name) }}"
          style="color: {{ tag.text_color }}"
          data-featherlight="{{ url('contest_tag_ajax', tag.name) }}">
          {{- tag.name -}}
        </a>
      </span>
    {% endfor %}
  </div>
{% endmacro %}

{% macro time_left(contest) %}
  <div class="time-left">
    {% if contest.time_limit %}
      <div>
        <b>{{_("Start")}}</b>: {{ contest.start_time|date(_("H:i d/m/Y")) }}
      </div>
      <div>
        <b>{{_("End")}}</b>: {{ contest.end_time|date(_("H:i d/m/Y")) }}
      </div>
    {% else %}
      <div>
        <b>{{_("Start")}}</b>: {{ contest.start_time|date(_("H:i d/m/Y")) }}
      </div>
    {% endif %}
    <div>
      <b>{{_("Length")}}</b>:
      {% if contest.time_limit %}
        {% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }}{% endtrans %}
      {% else %}
        {% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }}{% endtrans %}
      {% endif %}
    </div>
  </div>
{% endmacro %}

{% macro user_count(contest, user) %}
  {% if contest.can_see_own_scoreboard(user) %}
    <a href="{{ url('contest_ranking', contest.key) }}"><i class="fa fa-users"></i> {{ contest.user_count }}</a>
  {% else %}
    <i class="fa fa-users"></i>{{ contest.user_count }}
  {% endif %}
{% endmacro %}

{% macro contest_join(contest, request) %}
  {% if request.in_contest and request.participation.contest == contest %}
    <button class="small" disabled>{{ _('In contest') }}</button>
  {% elif request.profile.id in contest.editor_ids or request.profile.id in contest.tester_ids %}
    <form action="{{ url('contest_join', contest.key) }}" method="post">
      {% csrf_token %}
      <input type="submit" class="unselectable button full small"
        value="{{ _('Spectate') }}">
    </form>
  {% else %}
    <form action="{{ url('contest_join', contest.key) }}" method="post">
      {% csrf_token %}
      <input type="submit" class="unselectable button full small join-warning"
        value="{{ _('Join') }}">
    </form>
  {% endif %}
{% endmacro %}

{% macro contest_format_user(contest, show_user=True) %}
  <div style="display: flex; flex-direction: column; height: 100%;">
    <div class="contest-title"> {{ _('Format') }} </div>
    <div style="flex-grow: 1">{{ contest.format.name }}</div>
    {% if show_user %}
      <div class="contest-title">{{ user_count(contest, request.user) }}</div>
    {% endif %}
  </div>
{% endmacro %}

{% block middle_content %}
  <div id="ongoing-table">
    {% if active_participations %}
      <h3 class="toggle open contest-group-header">
        <i class="fa fa-chevron-right fa-fw"></i>
        {{ _('Active Contests') }}
      </h3>
      <div class="toggled">
        {% for participation in active_participations %}
          {% with contest=participation.contest %}
            <div class="list-contest">
              <div class="info-contest">
                <div class="contest-title"> {{ _('Contests') }} </div>
                {{ contest_head(contest) }}
              </div>
              <div class="info-contest">
                <div class="contest-title"> {{ _('Time') }} </div>
                <div class="contest-block">
                  {% if contest.start_time %}
                    {{ time_left(contest) }}
                    {% if contest.time_limit %}
                      <span class="time">
                        {% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
                      </span>
                    {% elif contest.time_before_end %}
                      <span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
                    {% endif %}
                  {% endif %}
                </div>
              </div>
              <div class="info-contest" style="flex: 0.5;">
                {{ contest_format_user(contest) }}
              </div>
              <div class="participate-button">
                {{ contest_join(contest, request) }}
              </div>
            </div>
          {% endwith %}
        {% endfor %}
      </div>
    {% endif %}

    <h3 class="toggle open contest-group-header">
      <i class="fa fa-chevron-right fa-fw"></i>
      {{ _('Ongoing Contests') }}
    </h3>
    {% if current_contests %}
      <div class="toggled">
        {% for contest in current_contests %}
          <div class="list-contest">
            <div class="info-contest">
              <div class="contest-title"> {{ _('Contests') }} </div>
              {{ contest_head(contest) }}
            </div>
            <div class="info-contest">
              <div class="contest-title"> {{ _('Time') }} </div>
              <div class="contest-block">
                {% if contest.start_time %}
                  {{ time_left(contest) }}
                  {% if contest.time_before_end %}
                    <span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
                  {% endif %}
                {% endif %}
              </div>
            </div>
            <div class="info-contest" style="flex: 0.5;">
              {{ contest_format_user(contest) }}
            </div>
            <div class="participate-button">
              {{ contest_join(contest, request) }}
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="toggled">
        <i> {{ _('There is no ongoing contest at this time.') }} </i>
        <br><br>
      </div>
    {% endif %}

    <h3 class="toggle open contest-group-header">
      <i class="fa fa-chevron-right fa-fw"></i>
      {{ _('Upcoming Contests') }}
    </h3>
    {% if future_contests %}
      <div class="toggled">
        {% for contest in future_contests %}
          <div class="list-contest">
            <div class="info-contest">
              <div class="contest-title"> {{ _('Contests') }} </div>
              {{ contest_head(contest) }}
            </div>
            <div class="info-contest">
              <div class="contest-title"> {{ _('Time') }} </div>
              <div class="contest-block">
                {% if contest.start_time %}
                  {{ time_left(contest) }}
                  {% if contest.time_before_start %}
                    <span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
                  {% endif %}
                {% endif %}
              </div>
            </div>
            <div class="info-contest" style="flex: 0.5;">
              {{ contest_format_user(contest, show_user=False) }}
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="toggled">
        <i>{{ _('There is no scheduled contest at this time.') }}</i>
        <br><br>
      </div>
    {% endif %}
  </div>

  <h3 class="toggle open contest-group-header">
    {{ _('Past Contests') }}
  </h3>
  {% if past_contests %}
    {% if page_obj and page_obj.num_pages > 1 %}
      <div style="margin-bottom: 10px;">
        {% include "list-pages.html" %}
      </div>
    {% endif %}

    {% for contest in past_contests %}
      <div class="list-contest">
        <div class="info-contest">
          <div class="contest-title"> {{ _('Contests') }} </div>
          {{ contest_head(contest) }}
        </div>
        <div class="info-contest">
          <div class="contest-title"> {{ _('Time') }} </div>
          <div class="contest-block">
            {{ time_left(contest) }}
          </div>
        </div>
        <div class="info-contest" style="flex: 0.5;">
          {{ contest_format_user(contest) }}
        </div>
        <div class="participate-button">
          {% if request.in_contest and request.participation.contest == contest %}
            <button class="small" disabled>{{ _('In contest') }}</button>
          {% else %}
            <form action="{{ url('contest_join', contest.key) }}" method="post">
              {% csrf_token %}
              <input type="submit" class="unselectable button full small"
                value="{{ _('Virtual join') }}">
            </form>
          {% endif %}
        </div>
      </div>
    {% endfor %}
    {% if page_obj and page_obj.num_pages > 1 %}
      <div style="margin-top: 10px;">
        {% include "list-pages.html" %}
      </div>
    {% endif %}
  {% else %}
    <div class="toggled">
      <i> {{ _('There is no past contest.') }} </i>
      <br>
    </div>
  {% endif %}
{% endblock %}