{% extends "course/base.html" %}

{% block two_col_media %}
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
{% endblock %}

{% block middle_content %}
  <div class="container">
    {% if course_contests %}
      {% for course_contest in course_contests %}
        <div class="course-contest-card">
          <div>
            <h5><a href="{{url('contest_view', course_contest.contest.key)}}">{{ loop.index }}. {{ course_contest.contest.name }}</a></h5>
            <p><strong>{{_("Order")}}:</strong> {{ course_contest.order }}</p>
            <p><strong>{{_("Points")}}:</strong> {{ course_contest.points }}</p>
            <p><strong>{{_("Start")}}:</strong> {{ course_contest.contest.start_time|date(_("H:i d/m/Y")) }}</p>
            <p><strong>{{_("End")}}:</strong> {{ course_contest.contest.end_time|date(_("H:i d/m/Y")) }}</p>
          </div>
          <a href="{{url('edit_course_contest', course.slug, course_contest.contest.key)}}" class="button">{{ _('Edit') }}</a>
        </div>
      {% endfor %}
    {% else %}
      <p style="text-align: center;">{{_("No contests available")}}.</p>
    {% endif %}
    <a href="{{url('add_course_contest', course.slug)}}">
      <button>{{ _('Add') }}</button>
    </a>
  </div>
{% endblock %}