{% extends 'shopyo_dashboard/dashboard_base.html' %}

{% block title %}{{ content_type.name }} Items{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row justify-between items-end md:items-center gap-4 border-b border-slate-100 dark:border-slate-800 pb-8">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <a href="{{ url_for('contenttype.dashboard') }}" class="text-[10px] font-black text-primary uppercase tracking-[0.2em] hover:opacity-70 transition-opacity">Content</a>
                <i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">{{ content_type.name }}</span>
            </div>
            <h1 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight uppercase">{{ content_type.name }} Items</h1>
        </div>
        <a href="{{ url_for('contenttype.item_add', type_id=content_type.id) }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-primary text-white hover:bg-primary-dark shadow-xl shadow-primary/20 transition-all text-xs font-black uppercase tracking-widest">
            <i class="fas fa-plus"></i>
            Add New Item
        </a>
    </div>

    <!-- Items Table -->
    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800">
                        {% for field in content_type.schema %}
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">{{ field.name }}</th>
                        {% endfor %}
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Created</th>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    {% for item in items %}
                    <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors group">
                        {% for field in content_type.schema %}
                        <td class="px-6 py-4">
                            <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
                                {{ item.data.get(field.name, '')|truncate(100) }}
                            </span>
                        </td>
                        {% endfor %}
                        <td class="px-6 py-4">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                {{ item.created_at.strftime('%Y-%m-%d') }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ url_for('contenttype.item_edit', item_id=item.id) }}" class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-primary/10 hover:text-primary transition-all border border-slate-100/50 dark:border-slate-700/50" title="Edit">
                                    <i class="fas fa-edit text-[10px]"></i>
                                </a>
                                <a href="{{ url_for('contenttype.item_delete', item_id=item.id) }}" class="p-2 rounded-lg bg-rose-50 dark:bg-rose-900/20 text-rose-600 hover:bg-rose-600 hover:text-white transition-all shadow-inner border border-rose-100/50 dark:border-rose-800/50" onclick="return confirm('Delete this item?')" title="Delete">
                                    <i class="fas fa-trash-alt text-[10px]"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="{{ content_type.schema|length + 2 }}" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 rounded-2xl bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-300 dark:text-slate-600 text-xl mb-4">
                                    <i class="fas fa-inbox"></i>
                                </div>
                                <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">No items found</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}