{% extends "admin/base.html" %}
{% block title %}Pages{% endblock %}

{% block content %}
<div class="mb-8 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-white mb-2">Pages</h1>
        <p class="text-white/50 text-sm">Manage dynamic site pages</p>
    </div>
    <a href="/admin/pages/editor"
        class="bg-cyan text-black px-4 py-2 font-bold hover:bg-white transition-colors uppercase tracking-wider text-xs">
        + Create Page
    </a>
</div>

<div class="terminal-box p-6">
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="border-b border-white/10 text-white/40 text-xs uppercase tracking-wider">
                    <th class="py-3 font-medium">Title</th>
                    <th class="py-3 font-medium">Slug</th>
                    <th class="py-3 font-medium">Status</th>
                    <th class="py-3 font-medium">Order</th>
                    <th class="py-3 font-medium text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="text-white/80 text-sm">
                {% for page in pages %}
                <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                    <td class="py-3 font-bold text-white">{{ page.title }}</td>
                    <td class="py-3 text-cyan">/{{ page.slug }}</td>
                    <td class="py-3">
                        {% if page.is_published %}
                        <span
                            class="text-green-400 text-xs border border-green-400/30 px-2 py-0.5 bg-green-400/10">Published</span>
                        {% else %}
                        <span class="text-white/40 text-xs border border-white/20 px-2 py-0.5">Draft</span>
                        {% endif %}
                        {% if page.show_in_menu %}
                        <span class="text-cyan text-xs ml-2" title="Shown in Menu">≡</span>
                        {% endif %}
                    </td>
                    <td class="py-3">{{ page.menu_order }}</td>
                    <td class="py-3 text-right space-x-2">
                        <a href="/{{ page.slug }}" class="text-xs text-white/40 hover:text-white">View</a>
                        <a href="/admin/pages/editor?id={{ page.id }}"
                            class="text-xs text-cyan hover:underline">Edit</a>
                        <form method="POST" action="/admin/pages/delete/{{ page.id }}" class="inline"
                            onsubmit="return confirm('Are you sure you want to delete this page?');">
                            <button type="submit" class="text-xs text-red-400 hover:text-red-300">Delete</button>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="py-8 text-center text-white/30">
                        No pages found. Create one to get started.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}