{% extends "settings/index.html" %}

{% block header_text %}<h2 style="color:#fff">Profile Pages</h2>{% endblock %}

{% block main %}
<section style="padding: 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h2 style="margin: 0;">Your Profile Pages</h2>
        <a href="/settings/profile_pages/create.html" class="button" style="text-decoration: none;">
            <i class="fa-solid fa-plus"></i> New Page
        </a>
    </div>

    {% if pages %}
    <div id="pages-list">
        {% for page in pages %}
        <div class="page-item" data-uid="{{ page.uid }}" style="border: 1px solid #444; border-radius: 8px; padding: 15px; margin-bottom: 15px; background: #2d2d2d;">
            <div style="display: flex; justify-content: space-between; align-items: start;">
                <div style="flex: 1;">
                    <h3 style="margin: 0 0 5px 0;">
                        {{ page.title }}
                        {% if not page.is_published %}
                        <span style="opacity: 0.6; font-size: 0.85em; font-weight: normal;">(Draft)</span>
                        {% endif %}
                    </h3>
                    <p style="margin: 5px 0; color: #888; font-size: 0.9em;">
                        Slug: <code style="background: #1d1d1d; padding: 2px 6px; border-radius: 3px;">{{ page.slug }}</code>
                    </p>
                    <p style="margin: 5px 0; color: #888; font-size: 0.9em;">
                        Order: {{ page.order_index }}
                    </p>
                </div>
                <div style="display: flex; gap: 10px;">
                    <a href="/user/{{ user.uid.value }}/{{ page.slug }}.html" class="button" style="text-decoration: none;">
                        <i class="fa-solid fa-eye"></i> View
                    </a>
                    <a href="/settings/profile_pages/{{ page.uid }}/edit.html" class="button" style="text-decoration: none;">
                        <i class="fa-solid fa-edit"></i> Edit
                    </a>
                    <form method="post" action="/settings/profile_pages/{{ page.uid }}/delete.html" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this page?');">
                        <button type="submit" class="button" style="background: #c42;">
                            <i class="fa-solid fa-trash"></i> Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div style="margin-top: 30px; padding: 15px; background: #2d2d2d; border-radius: 8px; border: 1px solid #444;">
        <h3>Page Order</h3>
        <p style="color: #888;">Drag and drop pages to reorder them (coming soon), or use the order index field when editing.</p>
    </div>
    {% else %}
    <div style="text-align: center; padding: 40px; background: #2d2d2d; border-radius: 8px; border: 1px solid #444;">
        <p style="color: #888; font-size: 1.1em; margin-bottom: 20px;">You haven't created any profile pages yet.</p>
        <a href="/settings/profile_pages/create.html" class="button" style="text-decoration: none;">
            <i class="fa-solid fa-plus"></i> Create Your First Page
        </a>
    </div>
    {% endif %}
</section>

<style>
    .button {
        display: inline-block;
        padding: 8px 16px;
        background: #0d6efd;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9em;
    }

    .button:hover {
        background: #0b5ed7;
    }

    .button i {
        margin-right: 5px;
    }

    .page-item {
        transition: background 0.2s;
    }

    .page-item:hover {
        background: #353535 !important;
    }
</style>
{% endblock %}