{% extends 'admin/base_admin.html' %}
{% block title %}Media Items | ChatLab{% endblock %}
{% block admin_media_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h1 class="page-title">Media Items</h1>
        <p class="page-subtitle">Upload pictures and menus with taglines for the AI to share in chat.</p>
    </div>
    <a href="{% url 'admin_media_create' %}" class="btn btn-primary">
        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Add Media
    </a>
</div>

<div class="glass-card" style="padding: 1.5rem;">
    {% if media_items %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Preview</th>
                        <th>Taglines / Keywords</th>
                        <th>Created</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in media_items %}
                        <tr>
                            <td>
                                {% if item.image %}
                                    <div style="position: relative; display: inline-block;">
                                        <img src="{{ item.image.url }}" alt="Media Image" style="height: 60px; border-radius: 4px; object-fit: cover;">
                                        {% if item.extra_files.exists %}
                                        <span style="position: absolute; top: -5px; right: -10px; background: var(--primary); color: white; border-radius: 10px; padding: 2px 6px; font-size: 0.7rem; font-weight: bold;">+{{ item.extra_files.count }}</span>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    <span class="text-muted">No image</span>
                                {% endif %}
                            </td>
                            <td>{{ item.tags }}</td>
                            <td>{{ item.created_at|date:"M d, Y" }}</td>
                            <td style="text-align: right;">
                                <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                                    <a href="{% url 'admin_media_edit' item.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem;">Edit</a>
                                    <form action="{% url 'admin_media_delete' item.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this media item?');" style="margin:0; display:inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger" style="padding: 0.4rem 0.75rem; font-size: 0.8rem;">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 3rem 1rem;">
            <svg width="48" height="48" fill="none" stroke="var(--text-muted)" viewBox="0 0 24 24" style="margin-bottom: 1rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p style="color: var(--text-muted); margin-bottom: 1.5rem;">No media items found. Upload images to let your chatbot share them.</p>
            <a href="{% url 'admin_media_create' %}" class="btn btn-primary">Add Media</a>
        </div>
    {% endif %}
</div>
{% endblock %}