{% extends "base.html" %}
{% block page_title %}Connect Bluesky{% endblock %}
{% block content %}
<div class="max-w-lg">
    <!-- Header -->
    <div class="mb-8">
        <a href="{% url 'social_accounts:connect' 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
        </a>
        <div class="flex items-center gap-3 mb-2">
            <div class="w-10 h-10 rounded-xl bg-sky-50 flex items-center justify-center text-sky-500">
                {% include "social_accounts/partials/_platform_icon.html" with platform="bluesky" size="5" %}
            </div>
            <h2 class="text-xl font-semibold text-stone-900">Connect Bluesky</h2>
        </div>
        <p class="text-sm text-stone-500">Bluesky uses app passwords for authentication. You can create one in your Bluesky account settings.</p>
    </div>

    <form method="post" action="{% url 'social_accounts:connect_bluesky' workspace_id=workspace_id %}" class="space-y-5">
        {% csrf_token %}

        <div>
            <label for="handle" class="block text-sm font-semibold text-stone-700 mb-1.5">Handle</label>
            <input type="text" id="handle" name="handle" placeholder="yourname.bsky.social" required
                   class="w-full px-4 py-2.5 text-sm border-2 border-stone-200 rounded-xl bg-white text-stone-900 placeholder-stone-400 focus:border-orange-500 focus:ring-0 focus:outline-none transition-colors">
            <p class="text-xs text-stone-400 mt-1.5">Your full Bluesky handle including domain</p>
        </div>

        <div>
            <label for="app_password" class="block text-sm font-semibold text-stone-700 mb-1.5">App Password</label>
            <input type="password" id="app_password" name="app_password" placeholder="xxxx-xxxx-xxxx-xxxx" required
                   class="w-full px-4 py-2.5 text-sm border-2 border-stone-200 rounded-xl bg-white text-stone-900 placeholder-stone-400 focus:border-orange-500 focus:ring-0 focus:outline-none transition-colors">
            <p class="text-xs text-stone-400 mt-1.5">Generate one in Bluesky at Settings &rarr; Privacy and Security &rarr; App Passwords</p>
        </div>

        <div class="p-3.5 bg-sky-50 rounded-xl border border-sky-100">
            <div class="flex gap-2.5">
                <svg class="w-4 h-4 text-sky-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                <p class="text-xs text-sky-700">App passwords are separate from your main password. They can be revoked at any time without affecting your Bluesky account.</p>
            </div>
        </div>

        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold text-white bg-orange-500 rounded-full shadow-[0_4px_14px_rgba(249,115,22,0.28)] hover:bg-orange-600 transition-all duration-200 cursor-pointer">
                Connect Bluesky
                <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="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
            </button>
            <a href="{% url 'social_accounts:connect' workspace_id=workspace_id %}" class="px-4 py-2.5 text-sm font-semibold text-stone-600 hover:text-stone-800 transition-colors">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}