{% extends "base.html" %}
{% block page_title %}Connect Mastodon{% 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-indigo-50 flex items-center justify-center text-indigo-600">
                {% include "social_accounts/partials/_platform_icon.html" with platform="mastodon" size="5" %}
            </div>
            <h2 class="text-xl font-semibold text-stone-900">Connect Mastodon</h2>
        </div>
        <p class="text-sm text-stone-500">Mastodon is federated, enter your profile URL to begin the connection process.</p>
    </div>

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

        <div>
            <label for="instance_url" class="block text-sm font-semibold text-stone-700 mb-1.5">Profile URL</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                    <span class="text-sm text-stone-400">https://</span>
                </div>
                <input type="text" id="instance_url" name="instance_url" placeholder="mastodon.social@yourusername" required
                       class="w-full pl-[4rem] pr-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">
            </div>
            <p class="text-xs text-stone-400 mt-1.5">The Mastodon instance where your account lives</p>
        </div>

        <div class="p-3.5 bg-indigo-50 rounded-xl border border-indigo-100">
            <div class="flex gap-2.5">
                <svg class="w-4 h-4 text-indigo-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <p class="text-xs text-indigo-700">After entering your instance URL, you'll be redirected to your Mastodon instance to authorize access. We request <strong>read</strong>, <strong>write</strong>, and <strong>follow</strong> permissions.</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">
                Continue to Mastodon
                <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 %}