{# -*- engine:django -*- #}

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

{% load i18n static rules material_form coerce html_helpers %}
{% load render_table from django_tables2 %}

{% block browser_title %}{{ event }}{% endblock %}

{% block extra_head %}
  <link rel="stylesheet" href="{% static 'css/paweljong.css' %}"/>
{% endblock %}

{% block content %}
  <h4>{{ event }}</h4>

  {% has_perm 'paweljong.change_event_rule' user event as can_change_event_rule %}
  {% has_perm 'paweljong.event_checkpoint_rule' user event as can_checkpoint_rule %}

    <p>
     {% if can_change_event_rule %}
      <a href="{% url 'edit_event_by_slug' event.slug %}" class="btn waves-effect waves-light">
        <i class="material-icons left iconify" data-icon="mdi:edit"></i>
        {% trans "Edit" %}
      </a>
     {% endif %}
     {% if can_checkpoint_rule %}
     <a href="/app/paweljong/event/{{ event.slug }}/checkpoint" class="btn waves-effect waves-light">
         <i class="material-icons left iconify" data-icon="mdi:access-point-check"></i>
         {% trans "Checkpoint" %}
       </a>
     {% endif %}
    </p>

    <div class="card">
      <div class="card-content">
        <p>{{ event.description }}</p>
        <table id="event-detail-table">
          <tr>
            <td><i class="material-icons small">event</i></td>
            <td>{{ event.date_start }}</td>
            <td><i class="material-icons small">location_on</i></td>
            <td>{{ event.place }}</td>
          </tr>
          <tr>
            <td><i class="material-icons small">edit_calendar</i></td>
            <td colspan="2">{% trans "Registration open until" %}:</td>
            <td>{{ event.date_registration }}</td>
          </tr>
          <tr>
            <td><i class="material-icons small">money</i></td>
            <td colspan="2">{% trans "Participation fee (all inclusive)" %}</td>
            <td>{{ event.cost }}</td>
          </tr>
          <tr>
            <td><i class="material-icons small">group</i></td>
            <td colspan="2">{{ event.participants_memberships.count }}</td>
            <td>{% trans "of" %} {{ event.max_participants }}</td>
          </tr>
          <tr>
            <td><i class="material-icons iconify" data-icon="vscode-icons:file-type-light-codeowners"></i></td>
            <td colspan="2">{% trans "Owners" %}</td>
            <td>
            {% for membership in event.organisers_memberships.all %}
              <div class="chip">
                <img src="{{ membership.person.avatar_url }}" alt="{{ membership.person }}" id="organisers-chip">
                <a href="{{ membership.person.get_absolute_url }}">{{ membership.person }}</a>
              </div>
            {% endfor %}
            </td>
          </tr>
            <td>{% trans "Average amount paid" %}</td>
            <td colspan="2">{{ average_amount_paid }}</td>
	    <td>{% if average_amount_paid_percent %}{{ average_amount_paid_percent }} &#37;{% endif %}</td>
          <tr>
          </tr>
        </table>
      </div>
    </div>
   </div>
  </div>

  <div class="row">
    <div class="col s3">
      <h5>{% blocktrans %}Additional fields{% endblocktrans %}</h5>
      {% render_table additional_fields_table %}
    </div>
    <div class="col s9">
      <h5>{% blocktrans %}Child groups{% endblocktrans%}</h5>
      {% render_table child_groups_table %}
    </div>
  </div>

  <h5>{% blocktrans %}Registrations{% endblocktrans %}</h5>
  <form method="get">
    {% form form=registrations_filter.form %}{% endform %}
    {% trans "Search" as caption %}
    {% include "core/partials/save_button.html" with caption=caption icon="search" %}
    <button type="reset" class="btn red waves-effect waves-light">
      <i class="material-icons left">clear</i>
      {% trans "Clear" %}
    </button>
  </form>
  {% render_table registrations_table %}

{% endblock %}