{% 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">
        <a id="create" class="btn btn-blue" href="{{ create_url }}">
          <i class="fa fa-plus"></i>
          {% trans %}Create{% endtrans %}
        </a>
      </div>
    </div>

    <div id="posters">
      {% 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"
            tooltip="{%- for screen in poster.screens.all() -%}
                       {{ screen }}
                     {% endfor %}"
          >
            <img src="{{ poster.file.url }}" alt="{{ poster.name }}">
          </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>
          <div class="actions">
            {% if poster.is_editable %}
              <a class="btn btn-blue" href="{{ get_edit_url(poster) }}">
                <i class="fa fa-pen-to-square"></i>
                {% trans %}Edit{% endtrans %}
              </a>
            {% endif %}
            {% if not poster.is_moderated and user.has_perm("com.moderate_poster") %}
              <form action="{{ url("com:poster_moderate", object_id=poster.id) }}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-green">
                  <i class="fa fa-check"></i>
                  {% trans %}Moderate{% endtrans %}
                </button>
              </form>
            {% endif %}
          </div>
        </div>
      {% else %}
        <div id="no-posters">{% trans %}No posters{% endtrans %}</div>
      {% endfor %}
    </div>

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

  </div>
{% endblock %}