{% extends "base.html" %}
{% block page_title %}Connect Social Account{% endblock %}
{% block content %}
<div class="max-w-4xl">
    <!-- Header -->
    <div class="mb-8">
        <a href="{% url 'social_accounts:list' workspace_id=workspace_id %}" class="inline-flex items-center gap-1.5 text-sm text-stone-500 hover:text-stone-700 transition-colors mb-4">
            <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="M15 19l-7-7 7-7"/></svg>
            Back to Social Accounts
        </a>
        <h2 class="text-xl font-semibold text-stone-900">Connect a Platform</h2>
        <p class="text-sm text-stone-500 mt-1">Select a platform to connect your social media account.</p>
    </div>

    <!-- Platform grid -->
    <div class="overflow-y-auto pr-1">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for value, label in platform_choices %}
        <div class="relative bg-white rounded-xl border border-stone-200 p-5 transition-all duration-200 {% if value in configured_platforms %}{% else %}opacity-60{% endif %}">
            <div class="flex items-start gap-4">
                <!-- Platform icon -->
                <div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center
                    {% if value == 'facebook' %}bg-blue-50 text-blue-600
                    {% elif value == 'instagram' %}bg-gradient-to-br from-purple-50 to-pink-50 text-pink-600
                    {% elif value == 'instagram_login' %}bg-gradient-to-br from-purple-50 to-pink-50 text-pink-600
                    {% elif value == 'linkedin_personal' %}bg-blue-50 text-blue-700
                    {% elif value == 'linkedin_company' %}bg-blue-50 text-blue-700
                    {% elif value == 'tiktok' %}bg-stone-900 text-white
                    {% elif value == 'youtube' %}bg-red-50 text-red-600
                    {% elif value == 'pinterest' %}bg-red-50 text-red-500
                    {% elif value == 'threads' %}bg-stone-100 text-stone-800
                    {% elif value == 'bluesky' %}bg-sky-50 text-sky-500
                    {% elif value == 'google_business' %}bg-blue-50 text-blue-500
                    {% elif value == 'mastodon' %}bg-indigo-50 text-indigo-600
                    {% elif value == 'devto' %}bg-stone-100 text-stone-900
                    {% endif %}">
                    {% include "social_accounts/partials/_platform_icon.html" with platform=value size="5" %}
                </div>

                <div class="flex-1 min-w-0">
                    <h3 class="text-sm font-semibold text-stone-900">{{ label }}</h3>
                    <p class="text-xs text-stone-400 mt-0.5">
                        {% if value == 'facebook' %}Your Pages &amp; Groups
                        {% elif value == 'instagram' %}For accounts linked to a Facebook Page
                        {% elif value == 'instagram_login' %}Sign in with Instagram &middot; no Facebook needed
                        {% elif value == 'linkedin_personal' %}Personal profile
                        {% elif value == 'linkedin_company' %}Company pages
                        {% elif value == 'tiktok' %}Video content
                        {% elif value == 'youtube' %}Videos &amp; Shorts
                        {% elif value == 'pinterest' %}Pins &amp; Boards
                        {% elif value == 'threads' %}Text &amp; Media
                        {% elif value == 'bluesky' %}AT Protocol
                        {% elif value == 'google_business' %}Local posts
                        {% elif value == 'mastodon' %}Federated social
                        {% elif value == 'devto' %}Articles &amp; posts
                        {% endif %}
                    </p>
                </div>
            </div>

            {% if value in configured_platforms %}
            <form method="post" action="{% url 'social_accounts:connect' workspace_id=workspace_id %}" class="mt-4">
                {% csrf_token %}
                <input type="hidden" name="platform" value="{{ value }}">
                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-4 py-1.5 text-xs 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-200 cursor-pointer">
                    Connect
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </button>
            </form>
            {% else %}
            <div class="mt-4">
                <span class="w-full inline-flex items-center justify-center px-4 py-2 text-xs font-semibold text-stone-400 bg-stone-100 rounded-full cursor-not-allowed">
                    Not Configured
                </span>
            </div>
            {% endif %}

            {% if value not in configured_platforms %}
            <div class="absolute inset-0 rounded-xl bg-white/40 cursor-not-allowed" title="Platform credentials not configured. Contact your administrator."></div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    </div>
</div>
{% endblock %}