{% extends "base.html" %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Input Form Column -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 shadow-xl overflow-hidden">
        <div class="bg-gray-850 px-6 py-4 border-b border-gray-700">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <span class="mr-2">🎯</span> Conjunction Analysis
            </h2>
        </div>

        <form hx-post="/ui/analyze" hx-target="#results-container" hx-indicator="#loading-indicator" class="p-6 space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-400 mb-1">Primary NORAD ID</label>
                <input type="text" name="primary_id" value="25544" required
                       class="w-full bg-gray-900 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
                <p class="text-xs text-gray-500 mt-1">Default: ISS (Zarya)</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-400 mb-1">Secondary NORAD ID</label>
                <input type="text" name="secondary_id" value="43205" required
                       class="w-full bg-gray-900 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-400 mb-1">Hard Body Radius (km)</label>
                <input type="number" name="hbr" value="0.02" step="0.001" required
                       class="w-full bg-gray-900 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
            </div>

            <button type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-3 px-4 rounded-lg shadow-lg hover:shadow-blue-500/30 transition-all active:scale-[0.98] flex items-center justify-center">
                <span class="mr-2">🚀</span> Calculate Risk
            </button>
        </form>
    </div>

    <!-- Results Column -->
    <div class="lg:col-span-2">
        <div id="results-container" class="bg-gray-800 rounded-xl border border-gray-700 shadow-xl h-full flex flex-col items-center justify-center min-h-[400px] p-8 text-center relative overflow-hidden">

            <!-- Loading Indicator (Hidden by default, shown by HTMX) -->
            <div id="loading-indicator" class="htmx-indicator absolute inset-0 bg-gray-800/90 backdrop-blur-sm flex flex-col items-center justify-center z-10">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
                <p class="text-blue-400 font-medium">Fetching TLEs & Propagating Physics...</p>
            </div>

            <div class="text-gray-500">
                <div class="text-6xl mb-4">🌌</div>
                <h3 class="text-xl font-medium text-gray-400 mb-2">Awaiting Parameters</h3>
                <p class="max-w-md mx-auto">Enter NORAD IDs and calculate risk to generate high-precision B-Plane projections and 3D encounter charts.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}