{% extends "base.html" %}
{% block title %}إدارة {{ model_name }}{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h2>{{ model_name | title }}</h2>
  {% if model_name != 'message' %}
  <a href="{{ url_for('add_item', model_name=model_name) }}" class="btn btn-success">إضافة جديد</a>
  {% endif %}
</div>

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>الرقم</th>
        <th>الاسم</th>
        <th>الصورة</th>
        <th>الحالة</th>
        <th>الإجراءات</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.name if item.name else (item.caption if item.caption else '—') }}</td>
        <td>
          {% if item.filename or item.image or item.logo %}
            <img src="{{ url_for('static', filename=item.filename or item.image or item.logo) }}" style="height: 50px; object-fit: cover;">
          {% else %}
            —
          {% endif %}
        </td>
        <td>
          {% if item.active != None %}
            <span class="badge {% if item.active %}bg-success{% else %}bg-warning{% endif %}">
              {% if item.active %}مفعل{% else %}معطل{% endif %}
            </span>
          {% else %}
            —
          {% endif %}
        </td>
        <td>
          <a href="{{ url_for('edit_item', model_name=model_name, id=item.id) }}" class="btn btn-sm btn-outline-warning">تعديل</a>
          <a href="{{ url_for('delete_item', model_name=model_name, id=item.id) }}" class="btn btn-sm btn-outline-danger" data-confirm-delete="{{ model_name }}">حذف</a>
          {% if model_name == 'message' %}
            {% if not item.read %}
            <a href="{{ url_for('mark_message_read', id=item.id) }}" class="btn btn-sm btn-outline-success">وضع كمقروءة</a>
            {% endif %}
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="5" class="text-center  ">لا توجد عناصر.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}