{% extends 'base.html' %}

{% block content %}
<div class="panel panel-default">
  <div class="panel-heading">
    <span class="h3">BackOffice - EventTypes</span>
  </div>
  <div class="panel-body">
    <p><i>EventTypes</i> define categories or types of events, like "Music Act" or "Workshop" or "Talk". They are not camp specific, so they are not editable here.</p>
  {% if not event_type_list %}
      <p class="lead">
        No EventTypes found. Is this the twillight zone?
      </p>
  {% else %}
  <p>
    <a class="btn btn-default" href="{% url 'backoffice:index' camp_slug=camp.slug %}"><i class="fas fa-undo"></i> Backoffice</a>
  </p>
  <table class="table table-hover datatable">
    <thead>
    <tr>
        <th>Name</th>
        <th class="text-center">Sessions</th>
        <th class="text-center">Slots</th>
        <th class="text-center">Events</th>
        <th>Actions</th>
     </tr>
    </thead>
    <tbody>
    {% for type in event_type_list %}
    <tr>
      <td>{{ type.icon_html }} <a href="{% url 'backoffice:event_type_detail' camp_slug=camp.slug slug=type.slug %}">{{ type.name }}</a></td>
      <td class="text-center"><span class="badge">{{ type.event_sessions_count }}</span></td>
      <td class="text-center"><span class="badge">{{ type.event_slots_count }}</span></td>
      <td class="text-center"><span class="badge">{{ type.event_count }}</span></td>
      <td>
        <div class="btn-group-vertical">
          <a href="{% url 'backoffice:event_type_detail' camp_slug=camp.slug slug=type.slug %}" class="btn btn-primary"><i class="fas fa-search"></i> Details</a>
        </div>
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endif %}
  <p>
    <a class="btn btn-default" href="{% url 'backoffice:index' camp_slug=camp.slug %}"><i class="fas fa-undo"></i> Backoffice</a>
  </p>
  </div>
</div>
{% endblock content %}