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

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

{% block main %}
<section style="padding: 20px;">
    <div class="settings-topbar">
        <h2>Your Profile Pages</h2>
        <a href="/settings/profile_pages/create.html" class="btn btn-primary">
            <i class="fa-solid fa-plus"></i> New Page
        </a>
    </div>

    {% if pages %}
    <div class="settings-list">
        {% for page in pages %}
        <div class="settings-list-item">
            <div class="settings-list-info">
                <div class="settings-list-title">
                    <i class="fa-solid fa-file-lines"></i>
                    {{ page.title }}
                    {% if not page.is_published %}
                    <span class="settings-list-badge">(Draft)</span>
                    {% endif %}
                </div>
                <div class="settings-list-meta">
                    <span>Slug: <code>{{ page.slug }}</code></span>
                </div>
            </div>
            <div class="settings-list-actions">
                <a href="/user/{{ user.uid.value }}/{{ page.slug }}.html" class="btn btn-sm">
                    <i class="fa-solid fa-eye"></i> View
                </a>
                <a href="/settings/profile_pages/{{ page.uid }}/edit.html" class="btn btn-sm btn-secondary">
                    <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="btn btn-sm btn-danger">
                        <i class="fa-solid fa-trash"></i> Delete
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="settings-empty">
        <p>You haven't created any profile pages yet.</p>
        <a href="/settings/profile_pages/create.html" class="btn btn-primary">
            <i class="fa-solid fa-plus"></i> Create Your First Page
        </a>
    </div>
    {% endif %}
</section>
{% endblock %}