{% extends "base.html" %}

{% block title %}{{ blogpost.title }}{% endblock %}

{% block content %}

<!-- Hero Title Section -->
<section class="py-20 bg-gradient-to-br from-red-800 to-orange-400 text-white text-center">
  <h1 class="text-5xl font-extrabold mb-4">{{ blogpost.title }}</h1>
  <p class="text-lg italic">Category: {{ blogpost.category }}</p>
  <div class="mt-4 flex justify-center flex-wrap gap-2">
    {% for tag in blogpost.tags.split(',') %}
      <a href="{{ url_for('view_tag', tag=tag.strip()) }}"
         class="bg-white text-gray-800 text-sm px-3 py-1 rounded-full shadow hover:bg-gray-100 transition">
         #{{ tag.strip() }}
      </a>
    {% endfor %}
  </div>
</section>

<!-- Content Section -->
<section class="py-16 bg-black text-white">
  <div class="max-w-4xl mx-auto px-4 space-y-8">

    {% if blogpost.images %}
    <div class="mb-5">
      <h3 class="fs-3 fw-semibold text-orange mb-4">Gallery</h3>
    
      <div id="blogImageCarousel" class="carousel slide shadow rounded overflow-hidden" data-bs-ride="carousel">
        <div class="carousel-inner">
          {% for image in blogpost.images|from_json %}
          <div class="carousel-item {% if loop.first %}active{% endif %}">
            <img src="{{ url_for('static', filename='uploads/' + image) }}" class="d-block w-100" alt="Post Image"
                 style="max-height: 500px; object-fit: cover;">
          </div>
          {% endfor %}
        </div>
    
        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#blogImageCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#blogImageCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
    
        <!-- Optional indicators -->
        <div class="carousel-indicators">
          {% for image in blogpost.images|from_json %}
          <button type="button" data-bs-target="#blogImageCarousel" data-bs-slide-to="{{ loop.index0 }}"
                  {% if loop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ loop.index }}"></button>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}
    


    <!-- Blog Content -->
    <div class="prose lg:prose-lg max-w-none">
      {{ blogpost.content | safe }}
    </div>

    <!-- Back Button -->
    <div class="pt-10 text-center">
      <a href="{{ url_for('blog') }}"
         class="inline-block bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
         ← Back to Blog
      </a>
    </div>
    
  </div>
</section>

{% endblock %}