{% extends "partners/base.html" %}
{% load i18n %}
{% load bootstrap4 %}
{% load splitter %}
{% block "dashboardcontent" %}
<div class="col-12 col-md-10 col-lg-10 dashboard-content booking-trips">
    <h2 class="dash-content-title">Deine Bilder</h2>
    <div class="dash-content-title"><small>für {{ establishment.name }}</small></div>
    <button
        class="position-relative btn-primary text-center"
        type="button"
        data-target="#create-image" data-toggle="modal"
      >Bild hochladen</button>

<!-- Carousel wrapper -->
<div
  id="carouselMultiItemExample"
  class="carousel slide carousel-dark text-center"
  data-ride="carousel"
>
  <!-- Controls -->
  <div class="d-flex justify-content-center mb-4">
    <button
      class="carousel-control-prev position-relative btn-secondary"
      type="button"
      data-target="#carouselMultiItemExample"
      data-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Zurück</span>
    </button>
    <button
      class="carousel-control-next position-relative btn-secondary"
      type="button"
      data-target="#carouselMultiItemExample"
      data-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Weiter</span>
    </button>
  </div>
  <!-- Inner -->
  <div class="carousel-inner py-4">
    {% splitter object_list 3 as chunks %}
    {% for chunk in chunks %}
    <!-- Single item -->
    <div class="carousel-item {% if forloop.first %}active{% endif %}">
      <div class="container">
        <div class="row">
          {% for image in chunk %}
          <div class="col-lg-4 {% if forloop.first %}d-none d-lg-block{% endif %}">
            <div class="card">
              <img src="{{ image.url }}" class="card-img-top" alt="{{ image.title }}" />
              <div class="card-body">
                <h5 class="card-title">{{ image.title }}</h5>
                <p class="card-text">{{ image.comment }}</p>
                <a href="#!" class="btn btn-primary">Löschen</a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endfor %}
    
  </div>
  <!-- Inner -->
</div>
<!-- Carousel wrapper -->
</div>
{% endblock %}

{% block "modal" %}
<div id="create-image" class="modal custom-modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Bild hochladen</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div><!-- end modal-header -->
            
            <div class="modal-body">
                <form enctype="multipart/form-data" method="POST"> 
                {% csrf_token %}
                {% bootstrap_form form %}
                <button class="btn btn-orange btn-block">Hochladen...</button>
                </form>
            </div><!-- end modal-bpdy -->
        </div><!-- end modal-content -->
    </div><!-- end modal-dialog -->
</div><!-- end edit-profile -->

<!-- Modal 1 --> <!-- TODO: You know... -->
<div
    class="modal fade"
    id="exampleModal1"
    tabindex="-1"
    aria-labelledby="exampleModal1Label"
    aria-hidden="true"
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="ratio ratio-16x9">
            <iframe
                src="https://www.youtube.com/embed/A3PDXmYoF5U"
                title="YouTube video"
                allowfullscreen width="100%" height="100%"
            ></iframe>
            </div>

            <div class="text-center py-3">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                Schließen
            </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}