{% extends 'base.html' %}

{% block title %}Fanpages | FlowBot{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">Your Fanpages</h2>
        <a href="/admin/core/fanpage/add/" class="btn btn-coral px-4">Add Fanpage</a>
    </div>

    <div class="row g-4">
        {% for page in fanpages %}
        <div class="col-md-4">
            <div class="card h-100 p-4">
                <div class="d-flex justify-content-between mb-3">
                    <span class="badge {% if page.is_active %}bg-success{% else %}bg-secondary{% endif %}">
                        {% if page.is_active %}Active{% else %}Inactive{% endif %}
                    </span>
                    <small class="text-muted">Created {{ page.created_at|date:"M d, Y" }}</small>
                </div>
                <h4 class="fw-bold">{{ page.name }}</h4>
                <p class="text-muted small">Page ID: {{ page.page_id }}</p>
                <hr>
                <div class="d-flex justify-content-between align-items-center mt-auto">
                    <span class="small">{{ page.flows.count }} Flow(s)</span>
                    <a href="/admin/core/fanpage/{{ page.id }}/change/" class="btn btn-sm btn-outline-indigo">Edit Settings</a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="card p-5 text-center">
                <h3 class="text-muted">No Fanpages found</h3>
                <p>Connect your first Facebook Page to start automating!</p>
                <a href="/admin/core/fanpage/add/" class="btn btn-coral mt-3 mx-auto" style="width: fit-content;">Connect Now</a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
