{% extends "layouts/workspace_settings.html" %}
{% block page_title %}Social Accounts{% endblock %}
{% block content %}
<div class="max-w-4xl">
    <!-- Header -->
    <div class="flex flex-wrap items-center justify-between gap-3 mb-6 sm:mb-8">
        <div>
            <h2 class="text-xl font-semibold text-stone-900">Social Accounts</h2>
            <p class="text-sm text-stone-500 mt-1">Manage connected social media accounts for this workspace.</p>
        </div>
        <a href="{% url 'social_accounts:connect' workspace_id=workspace_id %}"
           class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Connect Account
        </a>
    </div>

    {% if accounts %}
    <!-- Connected accounts grid -->
    <div class="space-y-3" id="accounts-list">
        {% for account in accounts %}
        {% include "social_accounts/partials/_account_card.html" with account=account workspace_id=workspace_id %}
        {% endfor %}
    </div>

    <!-- Summary footer -->
    <div class="mt-6 pt-4 border-t border-stone-200">
        <p class="text-xs text-stone-400">
            {{ accounts|length }} account{{ accounts|length|pluralize }} connected.
            Health checks run automatically every 6 hours.
        </p>
    </div>

    {% else %}
    <!-- Empty state -->
    <div class="text-center py-16 px-6">
        <div class="mx-auto w-16 h-16 rounded-2xl bg-orange-50 flex items-center justify-center mb-5">
            <svg class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
        </div>
        <h3 class="text-base font-semibold text-stone-900 mb-2">No accounts connected yet</h3>
        <p class="text-sm text-stone-500 max-w-sm mx-auto mb-6">Connect your social media accounts to start publishing content, tracking engagement, and managing your inbox.</p>
        <a href="{% url 'social_accounts:connect' workspace_id=workspace_id %}"
           class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Connect Your First Account
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}