{% 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;
    }

    #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">
    function changeTabParameter(newTab) {
      const url = new URL(window.location);
      const searchParams = new URLSearchParams(url.search);
      searchParams.set('tab', newTab);
      url.search = searchParams.toString();
      return url.href;
    }

    function submitFormWithParams($form, method) {
      const currentUrl = new URL(window.location.href);
      const searchParams = new URLSearchParams(currentUrl.search);
      const formData = $form.serialize();

      const params = new URLSearchParams(formData);

      if (searchParams.has('tab')) {
        params.set('tab', searchParams.get('tab'));
      }

      const fullUrl = currentUrl.pathname + '?' + params.toString();

      if (method === "GET") {
        window.location.href = fullUrl;
      }
      else {
        var $formToSubmit = $('<form>')
          .attr('action', fullUrl)
          .attr('method', 'POST')
          .appendTo('body');

        $formToSubmit.append($('<input>').attr({
          type: 'hidden',
          name: 'csrfmiddlewaretoken',
          value: $.cookie('csrftoken')
        }));

        $formToSubmit.submit();
      }
    }

    $(document).ready(function () {
      $('#active-url').attr('href', changeTabParameter('active'));
      $('#current-url').attr('href', changeTabParameter('current'));
      $('#future-url').attr('href', changeTabParameter('future'));
      $('#past-url').attr('href', changeTabParameter('past'));

      var $form = $('form#filter-form');

      $('#show_orgs').click(function () {
        submitFormWithParams($form, "POST");
      });
      $('#go').click(function() {
        submitFormWithParams($form, "GET");
      });
      $('.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);
      });

      $form.on('keypress', function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
        }
      });

      $('#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 %}

{% from "contest/macros.html" import contest_head, time_left, user_count, contest_join, contest_format_user %}

{% block middle_content %}
  <div class="tabs tabs-no-flex" style="width: 100%;margin-left: auto;margin-right: auto;">
    <ul>
      {% if request.user.is_authenticated %}
        <li class="{{'active' if current_tab=='active'}}">
          <a id='active-url'>{{ _('Active') }}
            {% if active_count %}
              ({{active_count}})
            {% endif %}
          </a>
        </li>
      {% endif %}
      <li class="{{'active' if current_tab=='current'}}">
        <a id='current-url'>{{ _('Ongoing') }}
          {% if current_count %}
            ({{current_count}})
          {% endif %}
        </a>
      </li>
      <li class="{{'active' if current_tab=='future'}}">
        <a id='future-url'>{{ _('Upcoming') }}
          {% if future_count %}
            ({{future_count}})
          {% endif %}
        </a>
      </li>
      <li class="{{'active' if current_tab=='past'}}">
        <a id='past-url'>{{ _('Past') }}</a>
      </li>
    </ul>
  </div>

  {% if request.user.is_authenticated and current_tab == 'active' %}
    {% if contests %}
      {% for participation in contests %}
        {% 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, request) }}
            </div>
            <div class="participate-button">
              {{ contest_join(contest, request) }}
            </div>
          </div>
        {% endwith %}
      {% endfor %}
      {% if page_obj and page_obj.num_pages > 1 %}
        <div style="margin-top: 10px;">
          {% include "list-pages.html" %}
        </div>
      {% endif %}
    {% else %}
      <i> {{ _('There is no active contest at this time.') }} </i>
    {% endif %}
  {% endif %}

  {% if current_tab == 'current' %}
    {% if contests %}
      {% for contest in 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, request) }}
          </div>
          <div class="participate-button">
            {{ contest_join(contest, request) }}
          </div>
        </div>
      {% endfor %}
      {% if page_obj and page_obj.num_pages > 1 %}
        <div style="margin-top: 10px;">
          {% include "list-pages.html" %}
        </div>
      {% endif %}
    {% else %}
      <i> {{ _('There is no ongoing contest at this time.') }} </i>
    {% endif %}
  {% endif %}

  {% if current_tab == 'future' %}
    {% if contests %}
      {% for contest in 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, request, show_user=False) }}
          </div>
        </div>
      {% endfor %}
      {% if page_obj and page_obj.num_pages > 1 %}
        <div style="margin-top: 10px;">
          {% include "list-pages.html" %}
        </div>
      {% endif %}
    {% else %}
      <i>{{ _('There is no scheduled contest at this time.') }}</i>
    {% endif %}
  {% endif %}

  {% if current_tab == 'past' %}
    {% if contests %}
      {% for contest in 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, request) }}
          </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 %}
      <i> {{ _('There is no past contest.') }} </i>
    {% endif %}
  {% endif %}
{% endblock %}