{% 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">
      <a class="connect-card{% if connect_platform == 'facebook' %} is-active{% endif %}"
         href="{% url 'social:account_list' %}?connect=facebook">
        <span class="platform-icon meta">f</span>
        <div>
          <strong>Facebook Page</strong>
          <p>Connect a Page you manage with a Page access token.</p>
        </div>
      </a>
      <a class="connect-card{% if connect_platform == 'instagram' %} is-active{% endif %}"
         href="{% url 'social:account_list' %}?connect=instagram">
        <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>
      </a>
      <a class="connect-card{% if connect_platform == 'linkedin' %} is-active{% endif %}"
         href="{% url 'social:account_list' %}?connect=linkedin">
        <span class="platform-icon li">in</span>
        <div>
          <strong>LinkedIn</strong>
          <p>Personal or organization page. Tokens expire — reconnect when prompted.</p>
        </div>
      </a>
    </div>

    {% if connect_meta %}
    <div class="connect-form-panel" id="connect-form">
      <h3 style="margin:0 0 8px;font-size:16px">{{ connect_meta.title }}</h3>
      <ol class="connect-steps">
        {% for step in connect_meta.steps %}
        <li>{{ step }}</li>
        {% endfor %}
        {% if connect_meta.docs_url %}
        <li>Reference: <a href="{{ connect_meta.docs_url }}" target="_blank" rel="noopener">platform docs</a></li>
        {% endif %}
      </ol>
      <form method="post" class="form-grid">
        {% csrf_token %}
        <input type="hidden" name="action" value="connect">
        <input type="hidden" name="platform" value="{{ connect_platform }}">
        {% for name, label, placeholder in connect_meta.fields %}
        <div class="field">
          <label for="id_{{ name }}">{{ label }}</label>
          {% if name == 'access_token' %}
          <textarea id="id_{{ name }}" name="{{ name }}" required
                    style="min-height:88px" placeholder="{{ placeholder }}"></textarea>
          {% else %}
          <input id="id_{{ name }}" name="{{ name }}"
                 {% if name != 'page_id' and name != 'label' %}required{% endif %}
                 placeholder="{{ placeholder }}">
          {% endif %}
        </div>
        {% endfor %}
        <div style="display:flex;gap:8px;flex-wrap:wrap">
          <button class="btn btn-primary" type="submit">Save account</button>
          <a class="btn btn-ghost" href="{% url 'social:account_list' %}">Cancel</a>
        </div>
      </form>
    </div>
    {% endif %}
  </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>
            <div style="display:flex;gap:8px;flex-wrap:wrap">
              <a class="btn btn-ghost btn-sm" href="{% url 'social:account_list' %}?connect={{ account.platform }}">Update tokens</a>
              {% if account.is_active %}
              <form method="post" style="display:inline">
                {% csrf_token %}
                <input type="hidden" name="action" value="disconnect">
                <input type="hidden" name="account_id" value="{{ account.pk }}">
                <button class="btn btn-ghost btn-sm" type="submit">Disconnect</button>
              </form>
              {% else %}
              <form method="post" style="display:inline">
                {% csrf_token %}
                <input type="hidden" name="action" value="reactivate">
                <input type="hidden" name="account_id" value="{{ account.pk }}">
                <button class="btn btn-ghost btn-sm" type="submit">Mark active</button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="4" class="empty-state">No accounts connected yet — pick a platform above.</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>Next</h2></div>
    <div class="panel-b">
      <a class="btn btn-primary btn-sm" href="{% url 'social:composer' %}">Open composer →</a>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
{% if connect_platform %}
<script>
document.getElementById('connect-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
</script>
{% endif %}
{% endblock %}