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

{% block title %}Deep Analysis - 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">Deep Analysis: Chemistry & Depth</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Lineup Selector (Placeholder) -->
        <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg p-8 flex flex-col items-center justify-center text-center">
            <svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Lineup Builder</h3>
            <p class="text-gray-500 dark:text-gray-400">Drag 5 players here to analyze chemistry.</p>
        </div>

        <!-- Synergy Matrix (Placeholder) -->
        <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-lg p-8 flex flex-col items-center justify-center text-center">
            <svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Synergy Matrix</h3>
            <p class="text-gray-500 dark:text-gray-400">Select lineup to view pair-wise win rates.</p>
        </div>
    </div>
</div>
{% endblock %}