<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>{% trans %}Slideshow{% endtrans %}</title>
    <link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
    <link href="{{ static('css/slideshow.scss') }}" rel="stylesheet" type="text/css" />
    <script type="module" src="{{ static('bundled/base-bundle-index.ts') }}"></script>
    <script type="module" src="{{ static('bundled/com/slideshow-index.ts') }}"></script>
  </head>
  <body x-data="slideshow([
                {% for poster in posters %}
                  {
                  url: '{{ poster.file.url }}',
                  displayTime: {{ poster.display_time }}
                  },
                {% endfor %}
                ])">
    <div
      id="slideshow"
      @click="toggleFullScreen"
      hover="{% trans %}Click to expand{% endtrans %}"
      @keyup.f.window="toggleFullScreen"
    >

      <div id="slides">
        <template x-for="(poster, index) in posters">
          <div class="slide" :class="{
                                     current: index === current,
                                     previous: index !== current && index === previous,
                                     }">
            <img :src="poster.url">
          </div>
        </template>
      </div>

      <div id="progress_bullets">
        <template x-for="(poster, index) in posters">
          <div class="bullet" :class="{active: current === index}"></div>
        </template>
      </div>

      <progress :value="progress" max="100" x-show="posters.length > 1 && progress > 0"></progress>

    </div>
  </body>
</html>
