{% extends 'pages/base.html' %}
{% load static %}

{% block styles %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
    <style>
        H1 {
            font-family: "Sofia", sans-serif;
            font-size: 50pt;
            font-style: italic;
            text-shadow: 3px 3px 3px #ababab;
            margin-left: 20%;
        }
    </style>
{% endblock styles %}

{% block scripts %}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% endblock scripts %}


{% block body %}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for obj in object_list %}
            {% if forloop.first %}
                <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}" class="active"></li>
            {% else %}
                <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}"></li>
            {% endif %}
        {% endfor %}
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        {% for obj in object_list %}
             <div class="carousel-item {% if forloop.first %} active {% endif %}">
                <p>{{ obj.title }}</p>
                <img class="d-block w-100 h-50" class="h-50 d-inline-block" src="{{ obj.cover.url}}" alt="{{obj.title}}">
            </div>
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

{% endblock body %}