{% load analytics_extras %}
<div style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px;">
    <div style="text-align: center; max-width: 420px;">
        <div style="position: relative; width: 72px; height: 72px; margin: 0 auto 20px;">
            <div style="width: 72px; height: 72px; border-radius: var(--radius-2xl); background: var(--primary-soft); display: flex; align-items: center; justify-content: center;">
                {% include "partials/_platform_icon.html" with platform=active_account.platform size="lg" %}
            </div>
            <span style="position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--success-500); border: 3px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;">✓</span>
        </div>
        <h2 style="font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.01em;">
            {{ active_account.account_name }} is connected
        </h2>
        <p style="font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px;">
            We started collecting analytics when you connected this account. Metrics for this {% if active_account.platform == "youtube" %}channel{% else %}account{% endif %} usually appear within <strong>24–48 hours</strong> of your first published post.
        </p>
        <div style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-full); margin-top: 12px;">
            <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500);"></span>
            <span style="font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500;">Awaiting first full sync</span>
        </div>
        <div style="margin-top: 28px; display: flex; gap: 10px; justify-content: center;">
            <a href="{% url 'composer:create_landing' workspace_id=workspace.id %}" class="btn-brand" style="width: auto; padding: 9px 20px;">Create a post</a>
        </div>
    </div>
</div>