{% extends 'base.html' %}
{% block title %}Pages{% endblock %}
{% block page_title %}Facebook Pages{% endblock %}
{% block topbar_actions %}
  <div style="display:flex;gap:10px;align-items:center;">
    <a href="{{ url_for('auth.facebook_login') }}" class="btn btn-secondary btn-sm" style="background:#1877f2;color:white;border-color:#1877f2">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
      Connect Facebook
    </a>
    <form method="POST" action="{{ url_for('pages.sync_pages') }}" style="display:inline">
      <button type="submit" class="btn btn-primary btn-sm">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-5.88L1 10"/></svg>
        Sync Roles
      </button>
    </form>
  </div>
{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Connected Pages</h1>
    <p>Manage your Facebook Business Pages</p>
  </div>
</div>

{% if pages %}
<div class="grid-auto">
  {% for page in pages %}
  <div class="page-card">
    <div class="page-avatar">
      {% if page.picture_url %}
        <img src="{{ page.picture_url }}" alt="{{ page.page_name }}" />
      {% else %}
        {{ page.page_name[0].upper() }}
      {% endif %}
    </div>
    <div class="page-info">
      <div class="page-name">{{ page.page_name }}</div>
      <div class="page-id">ID: {{ page.page_id }}</div>
      <div style="margin-top:6px">
        {% if page.is_active %}
          <span class="badge badge-success">Active</span>
        {% else %}
          <span class="badge badge-muted">Inactive</span>
        {% endif %}
      </div>
    </div>
    <div class="page-actions">
      <form method="POST" action="{{ url_for('pages.toggle_page', page_id=page.id) }}">
        <button type="submit" class="btn btn-sm {% if page.is_active %}btn-warning{% else %}btn-success{% endif %}" title="{{ 'Deactivate' if page.is_active else 'Activate' }}">
          {% if page.is_active %}
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
          {% else %}
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          {% endif %}
        </button>
      </form>
      <form method="POST" action="{{ url_for('pages.delete_page', page_id=page.id) }}">
        <button type="submit" class="btn btn-sm btn-danger" data-confirm="Remove this page permanently?" title="Remove">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
        </button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
  <h3>No pages connected</h3>
  <p>Click "Sync From Facebook" to load your pages after connecting your account.</p>
  <a href="{{ url_for('auth.facebook_login') }}" class="btn btn-primary">Connect Facebook Account</a>
</div>
{% endif %}
{% endblock %}