{% comment %}
  用法: {% include "includes/carousel.html" with carousel_id="mainBanner" slides=carousel_data height="500px" show_caption=True %}

  参数说明:
  - carousel_id: 唯一ID，用于区分页面上的多个轮播图 (必填)
  - slides: 列表，包含字典 {'image_url': '...', 'title': '...', 'description': '...'} (必填)
  - height: 轮播图高度，默认 400px (可选)
  - show_caption: 是否显示文字描述，默认 True (可选)
  - object_fit: 图片填充模式，默认 'cover' (可选: cover, contain, fill)
{% endcomment %}

{% load static %}

<div id="{{ carousel_id }}" class="carousel slide" data-ride="carousel">

  <!-- 1. 指示器 (Indicators) -->
  {% if slides|length > 1 %}
  <ol class="carousel-indicators">
    {% for slide in slides %}
    <li data-target="#{{ carousel_id }}" data-slide-to="{{ forloop.counter0 }}"
        {% if forloop.first %}class="active"{% endif %}></li>
    {% endfor %}
  </ol>
  {% endif %}

  <!-- 2. 图片区域 (Inner) -->
  <div class="carousel-inner" style="height: {{ height|default:'400px' }}; background: #f8f9fa;">
    {% for slide in slides %}
    <div class="carousel-item {% if forloop.first %}active{% endif %}" style="height: 100%;">

      <!-- 图片 -->
      <img src="{{ slide.image_url }}"
           class="d-block w-100 h-100"
           alt="{{ slide.title|default:'Slide image' }}"
           style="object-fit: {{ object_fit|default:'cover' }}; width: 100%; height: 100%;">

      <!-- 文字描述 (可选) -->
      {% if show_caption|default:True and slide.title %}
      <div class="carousel-caption d-none d-md-block"
           style="background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 20px; bottom: 20px;">
        <h5 class="text-white text-shadow">{{ slide.title }}</h5>
        {% if slide.description %}
        <p class="text-white text-shadow">{{ slide.description }}</p>
        {% endif %}
      </div>
      {% endif %}

    </div>
    {% empty %}
    <!-- 空状态占位 -->
    <div class="carousel-item active" style="height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
      <span>暂无轮播图片</span>
    </div>
    {% endfor %}
  </div>

  <!-- 3. 控制按钮 (Controls) - 仅当多于1张图时显示 -->
  {% if slides|length > 1 %}
  <button class="carousel-control-prev" type="button" data-target="#{{ carousel_id }}" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#{{ carousel_id }}" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
  {% endif %}

</div>

<style>
  /* 可选：增加文字阴影以确保在亮色图片上可见 */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  }
  /* 修复 Bootstrap 默认 carousel-item 高度问题 */
  .carousel-inner {
    position: relative;
    overflow: hidden;
  }
  .carousel-item {
    height: 100%;
  }
</style>