{% extends "shopyo_base/module_base.html" %}

{% set active_page ='page' %}

{% block pagehead %}
{{ super() }}
<title>All Pages - Shopyo</title>
<!-- Injecting Front-end Theme Styles as requested -->
<link rel="stylesheet" href="{{ shopyo_theme.get_active_front_theme_styles_url() }}">
{% endblock %}

{% block sidebar %}
    {% include 'shopyo_page/blocks/sidebar.html' %}
{% endblock %}

{% block module_content %}
<div class="card">
    <div class="card-body">
        <div class="flex justify-between items-center mb-8">
            <div>
                <div class="flex items-center gap-3">
                    <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">All Pages</h3>
                    <span class="px-2 py-0.5 rounded-md bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[8px] font-black uppercase tracking-widest border border-emerald-100 dark:border-emerald-500/20">
                        {{ shopyo_theme.get_active_front_theme() }} theme active
                    </span>
                </div>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Manage your site's content using front-end styling</p>
            </div>
            <a href="{{ url_for('shopyo_page.dashboard') }}" class="btn btn-primary">
                <i class="fa fa-plus mr-2"></i> New Page
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th class="text-left">Title</th>
                        <th class="text-left">Slug</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for page in pages %}
                    <tr class="group hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
                        <td>
                            <div class="font-black text-slate-700 dark:text-slate-200 uppercase tracking-tight">{{ page.title }}</div>
                        </td>
                        <td>
                            <code class="text-[10px] bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded text-slate-500">/{{ page.slug }}</code>
                        </td>
                        <td class="text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ page.get_dashboard_url() }}" class="p-2 text-slate-400 hover:text-primary transition-colors" title="Edit Page">
                                    <i class="fa fa-edit text-sm"></i>
                                </a>
                                <a href="{{ url_for('shopyo_page.view_page', slug=page.slug) }}" target="_blank" class="p-2 text-slate-400 hover:text-emerald-500 transition-colors" title="View Public Page">
                                    <i class="fa fa-external-link-alt text-sm"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="py-12 text-center">
                            <div class="flex flex-col items-center gap-4">
                                <div class="w-16 h-16 rounded-full bg-slate-50 dark:bg-slate-800 flex items-center justify-center">
                                    <i class="fa fa-file-alt text-2xl text-slate-200 dark:text-slate-700"></i>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">No pages found</p>
                                    <a href="{{ url_for('shopyo_page.dashboard') }}" class="text-xs text-primary font-bold hover:underline mt-1 block">Create your first page</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}