{% extends "base.html" %}
{% block title %}إدارة صور الهيدر{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h2>صور الهيدر</h2>
  <a href="{{ url_for('add_hero') }}" class="btn btn-success">إضافة صورة</a>
</div>

<div class="row">
  {% for img in images %}
  <div class="col-md-4 mb-4 fade-in">
    <div class="card">
      <img src="{{ url_for('static', filename=img.filename) }}" class="product-img" alt="{{ img.caption or 'صورة الهيدر' }}">
      <div class="card-body text-center">
        <h5>{{ img.caption or 'بدون تعليق' }}</h5>
        <div class="form-check form-switch d-inline-block">
          <input class="form-check-input" type="checkbox" id="switch-{{ img.id }}" {% if img.active %}checked{% endif %} disabled>
          <label class="form-check-label" for="switch-{{ img.id }}">مفعلة</label>
        </div>
        <div class="d-flex justify-content-center gap-2 mt-2">
          <a href="{{ url_for('edit_hero', id=img.id) }}" class="btn btn-sm btn-outline-warning">تعديل</a>
          <a href="{{ url_for('delete_hero', id=img.id) }}" class="btn btn-sm btn-outline-danger" data-confirm-delete="hero">حذف</a>
        </div>
      </div>
    </div>
  </div>
  {% else %}
  <p class="text-center  ">لا توجد صور.</p>
  {% endfor %}
</div>
{% endblock %}