{% extends "portal_base.html" %}
{% block title %}Social accounts · Portal{% endblock %}
{% block topbar_title %}Social accounts{% endblock %}
{% block portal_content %}
<div class="panel">
  <div class="panel-h"><h2>Add account</h2></div>
  <div class="panel-b">
    <div class="connect-grid">
      <button type="button" class="connect-card" disabled>
        <span class="platform-icon meta">f</span>
        <div>
          <strong>Facebook Page</strong>
          <p>Connect a Page you manage. OAuth wiring comes next.</p>
        </div>
      </button>
      <button type="button" class="connect-card" disabled>
        <span class="platform-icon ig">IG</span>
        <div>
          <strong>Instagram Business</strong>
          <p>Requires a Facebook Page linked to an IG business account.</p>
        </div>
      </button>
      <button type="button" class="connect-card" disabled>
        <span class="platform-icon li">in</span>
        <div>
          <strong>LinkedIn</strong>
          <p>Personal or organization page. Tokens expire — re-auth when prompted.</p>
        </div>
      </button>
    </div>
  </div>
</div>

<div class="panel">
  <div class="panel-h"><h2>Connected accounts</h2></div>
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr>
          <th>Account</th>
          <th>Platform</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for account in accounts %}
        <tr {% if not account.is_active %}class="row-warn"{% endif %}>
          <td>
            <strong>{{ account.label }}</strong><br>
            <span class="muted">{{ account.external_id }}</span>
          </td>
          <td>
            <span class="platform-pill {% if account.platform == 'facebook' %}meta{% elif account.platform == 'instagram' %}ig{% else %}li{% endif %}">
              {{ account.get_platform_display }}
            </span>
          </td>
          <td>
            {% if account.is_active %}
            <span class="badge badge-delivered">Active</span>
            {% else %}
            <span class="badge badge-failed">Inactive</span>
            {% endif %}
          </td>
          <td class="muted">Connect / disconnect in functionality pass</td>
        </tr>
        {% empty %}
        <tr><td colspan="4" class="empty-state">No accounts connected yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="split">
  <div class="panel">
    <div class="panel-h"><h2>When to re-auth</h2></div>
    <div class="panel-b">
      <ul class="plain-list">
        <li>LinkedIn access tokens expire on a short cycle</li>
        <li>Meta password changes or app review updates</li>
        <li>Publishing fails with an auth error</li>
      </ul>
    </div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Health checks</h2></div>
    <div class="panel-b">
      <p class="muted">Token test buttons wire up with the connectors next.</p>
      <a class="btn btn-ghost btn-sm" href="{% url 'social:composer' %}">Open composer →</a>
    </div>
  </div>
</div>
{% endblock %}