{% load static %}
<!-- Slider -->
<div class="carousel w-full">
  {% for vis in data.visualisations.all %}
  <div id="slide{{ forloop.counter }}" class="carousel-item relative w-full {% if forloop.first %}rounded-box mb-3{% endif %}">
    <figure class="mx-18">
      <a href="{% get_media_prefix %}{{ vis.image }}">
        <img src="{% get_media_prefix %}{{ vis.image }}" class="w-full rounded-box" alt="{{ vis.title|default:'visualisation-image' }}">
      </a>
    </figure>
    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
      <a href="#slide{% if forloop.first %}{{ forloop.length }}{% else %}{{ forloop.counter|add:'-1' }}{% endif %}" class="btn btn-circle">❮</a>
      <a href="#slide{% if forloop.last %}1{% else %}{{ forloop.counter|add:'1' }}{% endif %}" class="btn btn-circle">❯</a>
    </div>
  </div>
  {% empty %}
  <div class="carousel-item relative w-full rounded-box mb-3">
    <figure class="mx-18">
      <img
        src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
        class="w-full rounded-box"
        alt="No visualisations available" />
    </figure>
  </div>
  {% endfor %}
</div>
<div class="border border-gray-100 rounded-lg p-6 mb-6">
    {% for vis in data.visualisations.all %}
    <h2 class="text-xl font-bold mb-4">Visualisation {{ forloop.counter }}</h2>
    <ul class="mb-6">
        <li class="">Name: {{ vis.name_display }} ({{ vis.name }}) </li>
        <li class="mb-2">Description: {{ vis.description | truncatewords:64 }}</li>
    </ul>
    {% endfor %}
</div>

<!-- End Slider -->