{% load rest_framework %}

<form method="POST" action="{{ request.get_full_path }}" class="space-y-4"
      x-data="{
          contentType: 'application/json',
          showPreview: false,
          formData: ''
      }">
    {% csrf_token %}

    {# Content Type Selector #}
    <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Content Type
        </label>

        <select x-model="contentType"
                name="_content_type"
                class="w-full px-4 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
            <option value="application/json">JSON (application/json)</option>
            <option value="application/x-www-form-urlencoded">Form Data (application/x-www-form-urlencoded)</option>
            <option value="multipart/form-data">Multipart Form Data</option>
            <option value="text/plain">Plain Text</option>
        </select>
    </div>

    {# Request Body Editor #}
    <div class="space-y-2">
        <div class="flex items-center justify-between">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Request Body
            </label>

            {# Format JSON button #}
            <button type="button"
                    @click="try { formData = JSON.stringify(JSON.parse(formData), null, 2); showToast('JSON formatted!', 'success'); } catch(e) { showToast('Invalid JSON', 'error'); }"
                    x-show="contentType === 'application/json'"
                    class="text-xs px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-all">
                Format JSON
            </button>
        </div>

        <div class="relative">
            <textarea x-model="formData"
                      name="content"
                      rows="12"
                      placeholder='{ "key": "value" }'
                      class="w-full px-4 py-3 font-mono text-sm bg-gray-900 dark:bg-black text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all resize-y"></textarea>

            {# Character count #}
            <div class="absolute bottom-2 right-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-800/80 px-2 py-1 rounded"
                 x-text="formData.length + ' characters'"></div>
        </div>

        {# JSON validation hint #}
        <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center"
           x-show="contentType === 'application/json'">
            <svg class="w-3 h-3 mr-1" 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>
            Use the "Format JSON" button to validate and beautify your JSON
        </p>
    </div>

    {# Additional Headers #}
    <div class="space-y-2" x-data="{ showHeaders: false }">
        <button type="button"
                @click="showHeaders = !showHeaders"
                class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 :class="showHeaders ? 'rotate-90' : ''">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            Additional Headers (optional)
        </button>

        <div x-show="showHeaders" x-transition class="space-y-2 pl-5">
            <div class="grid grid-cols-2 gap-3">
                <input type="text"
                       placeholder="Header name"
                       class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm">
                <input type="text"
                       placeholder="Header value"
                       class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm">
            </div>
        </div>
    </div>

    {# Submit Buttons #}
    <div class="flex items-center space-x-2 pt-4 border-t border-gray-200 dark:border-gray-700">
        <button type="submit"
                class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium flex items-center justify-center space-x-2">
            <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="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>Send Request</span>
        </button>

        <button type="reset"
                @click="formData = ''"
                class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg font-medium">
            Clear
        </button>
    </div>

    {# Quick JSON Templates #}
    <div class="p-4 bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg"
         x-show="contentType === 'application/json' && !formData">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Quick Templates:</p>
        <div class="flex flex-wrap gap-2">
            <button type="button"
                    @click="formData = '{\n  \n}'"
                    class="px-3 py-1 text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-all">
                Empty Object
            </button>
            <button type="button"
                    @click="formData = '[\n  \n]'"
                    class="px-3 py-1 text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-all">
                Empty Array
            </button>
        </div>
    </div>
</form>