{% extends "tactics/layout.html" %}

{% block title %}Economy Calculator - Tactics{% endblock %}

{% block tactics_content %}
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Economy Calculator</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Input Form -->
        <div class="space-y-4">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Current Round State</h3>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Round Result</label>
                <select class="mt-1 block w-full rounded-md border-gray-300 dark:bg-slate-700 dark:text-white">
                    <option>Won (Elimination/Time)</option>
                    <option>Won (Bomb Defused)</option>
                    <option>Lost (Elimination)</option>
                    <option>Lost (Bomb Planted)</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Surviving Players</label>
                <input type="number" min="0" max="5" value="0" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-slate-700 dark:text-white">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Current Loss Bonus</label>
                <select class="mt-1 block w-full rounded-md border-gray-300 dark:bg-slate-700 dark:text-white">
                    <option>$1400 (0)</option>
                    <option>$1900 (1)</option>
                    <option>$2400 (2)</option>
                    <option>$2900 (3)</option>
                    <option>$3400 (4+)</option>
                </select>
            </div>
            
            <button class="w-full px-4 py-2 bg-yrtv-600 text-white rounded-md">Calculate Next Round</button>
        </div>

        <!-- Output -->
        <div class="bg-gray-50 dark:bg-slate-700 p-6 rounded-lg">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Prediction</h3>
            
            <div class="space-y-4">
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-300">Team Money (Min)</span>
                    <span class="font-bold text-gray-900 dark:text-white">$12,400</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-300">Team Money (Max)</span>
                    <span class="font-bold text-gray-900 dark:text-white">$18,500</span>
                </div>
                
                <div class="border-t border-gray-200 dark:border-slate-600 pt-4">
                    <span class="block text-sm text-gray-500 dark:text-gray-400">Recommendation</span>
                    <span class="block text-xl font-bold text-green-600 dark:text-green-400">Full Buy</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}