{% extends "base.html" %}
{% block main %}
  <main class="main">

    <!-- Page Title -->
    <div class="page-title" data-aos="fade">
      <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0">{{name}}</h1>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="../index.html">Home</a></li>
            <li class="current">{{name}}</li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

    <!-- Portfolio Details Section -->
    <section id="portfolio-details" class="portfolio-details section">

      <div class="container" data-aos="fade-up">

        <div class="portfolio-details-slider swiper init-swiper">
          <script type="application/json" class="swiper-config">
            {
              "loop": true,
              "speed": 600,
              "autoplay": {
                "delay": 5000
              },
              "slidesPerView": "auto",
              "navigation": {
                "nextEl": ".swiper-button-next",
                "prevEl": ".swiper-button-prev"
              },
              "pagination": {
                "el": ".swiper-pagination",
                "type": "bullets",
                "clickable": true
              }
            }
          </script>
          <div class="swiper-wrapper align-items-center">
            {% for img in imgs %}
              <span class="closebtn" onclick="this.parentElement.style.display='none';">{{ message }}</span>
              <div class="swiper-slide">
                <img src="{{ img }}" alt="{{ name }} image"/>
              </div>
            {% endfor %}

          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          <div class="swiper-pagination"></div>
        </div>

        {% block desc%}
        <h2>Desc Missing</h2>
        {% endblock %}

      </div>

    </section><!-- /Portfolio Details Section -->

  </main>
{% endblock %}