{% extends "base.html" %}
{% block page_title %}Connect DEV.to{% 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-stone-100 flex items-center justify-center">
                {% include "social_accounts/partials/_platform_icon.html" with platform="devto" size="6" %}
            </div>
            <h2 class="text-xl font-semibold text-stone-900">Connect DEV.to</h2>
        </div>
        <p class="text-sm text-stone-500">DEV.to authenticates with a personal API key. Generate one under Settings &rarr; Extensions &rarr; DEV Community API Keys.</p>
    </div>

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

        <div>
            <label for="api_key" class="block text-sm font-semibold text-stone-700 mb-1.5">API Key</label>
            <input type="password" id="api_key" name="api_key" placeholder="your DEV.to API key" 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">Create one at DEV.to &rarr; Settings &rarr; Extensions &rarr; DEV Community API Keys.</p>
        </div>

        <div class="p-3.5 bg-stone-50 rounded-xl border border-stone-100">
            <div class="flex gap-2.5">
                <svg class="w-4 h-4 text-stone-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-stone-600">Posts publish as DEV.to articles (title + Markdown body). The API key can be revoked at any time from your DEV.to settings.</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 DEV.to
                <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 %}