Sith/com/templates/com/poster_list.jinja

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

{% block title %}
  {% trans %}Poster{% endtrans %}
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" href="{{ static('com/css/posters.scss') }}">
{% endblock %}

{% block content %}
  <div id="poster_list" x-data="{ active: null }">

    <div id="title">
      <h3>{% trans %}Posters{% endtrans %}</h3>
      <div id="links" class="right">
        {% if app == "com" %}
          <a id="create" class="link" href="{{ url(app + ":poster_create") }}">{% trans %}Create{% endtrans %}</a>
          <a id="moderation" class="link" href="{{ url("com:poster_moderate_list") }}">{% trans %}Moderation{% endtrans %}</a>
        {% elif app == "club" %}
          <a id="create" class="link" href="{{ url(app + ":poster_create", club.id) }}">{% trans %}Create{% endtrans %}</a>
        {% endif %}
      </div>
    </div>

    <div id="posters">

      {% if poster_list.count() == 0 %}
        <div id="no-posters">{% trans %}No posters{% endtrans %}</div>
      {% else %}

        {% for poster in poster_list %}
          <div class="poster{% if not poster.is_moderated %} not_moderated{% endif %}">
            <div class="name">{{ poster.name }}</div>
            <div
              class="image"
              hover="{% trans %}Click to expand{% endtrans %}"
              @click="active = $el.firstElementChild"
            >
              <img src="{{ poster.file.url }}"></img>
            </div>
            <div class="dates">
              <div class="begin">{{ poster.date_begin | localtime | date("d/M/Y H:m") }}</div>
              <div class="end">{{ poster.date_end | localtime | date("d/M/Y H:m") }}</div>
            </div>
            {% if app == "com" %}
              <a class="edit" href="{{ url(app + ":poster_edit", poster.id) }}">{% trans %}Edit{% endtrans %}</a>
            {% elif app == "club" %}
              <a class="edit" href="{{ url(app + ":poster_edit", club.id, poster.id) }}">{% trans %}Edit{% endtrans %}</a>
            {% endif %}
            <div class="tooltip">
              <ul>
                {% for screen in poster.screens.all() %}
                  <li>{{ screen }}</li>
                {% endfor %}
              </ul>
            </div>
          </div>
        {% endfor %}

      {% endif %}

    </div>

    <div
      id="view"
      @keyup.escape.window="active = null"
      @click="active = null"
      :class="{active: active !== null}"
    >
      <div id="placeholder"><img :src="active?.src"></div>
    </div>

  </div>
{% endblock %}