{% extends "base.html" %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <!-- Admin Header -->
    <div class="flex items-center bg-gradient-to-r from-[#b7c7a3] to-[#6b8f71] rounded-xl p-7 mb-6 shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14 text-[#4e6b50] mr-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 2C7 2 2 7 2 12c0 5 5 10 10 10s10-5 10-10c0-5-5-10-10-10zm0 0c0 4 4 8 8 8" />
        </svg>
        <div>
            <h1 class="text-3xl font-bold text-[#3e5637] mb-1 tracking-tight">Admin Panel</h1>
            <p class="text-[#4e6b50]">Welcome to Verpot Je Lot's plant care management dashboard.</p>
        </div>
    </div>
    <!-- Navigation (now outside background wrapper) -->
    <nav class="admin-panel-nav grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-8">
        <a href="{{ url_for('manage_plants') }}" class="nav-plants flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#e6ebe0]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Plants</span>
            </div>
            <span class="badge-plant text-xs font-semibold px-2 py-0.5 rounded">{{ plant_count }}</span>
        </a>
        <a href="{{ url_for('manage_environments') }}" class="nav-environments flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#e0f0eb]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Environments</span>
            </div>
            <span class="badge-env text-xs font-semibold px-2 py-0.5 rounded">{{ environment_count }}</span>
        </a>
        <a href="{{ url_for('manage_climates') }}" class="nav-climates flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#f7f2e6]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Climates</span>
            </div>
            <span class="badge-climate text-xs font-semibold px-2 py-0.5 rounded">{{ climate_count }}</span>
        </a>
        <a href="{{ url_for('manage_lights') }}" class="nav-lights flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#fffbe6]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Light Requirements</span>
            </div>
            <span class="badge-light text-xs font-semibold px-2 py-0.5 rounded">{{ light_count }}</span>
        </a>
        <a href="{{ url_for('manage_toxicities') }}" class="nav-toxicities flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#fff4e6]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Toxicity Levels</span>
            </div>
            <span class="badge-toxicity text-xs font-semibold px-2 py-0.5 rounded">{{ toxicity_count }}</span>
        </a>
        <a href="{{ url_for('manage_sizes') }}" class="nav-sizes flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#e6f7f5]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Size Categories</span>
            </div>
            <span class="badge-size text-xs font-semibold px-2 py-0.5 rounded">{{ size_count }}</span>
        </a>
        <a href="{{ url_for('manage_care_difficulties') }}" class="nav-difficulties flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#f3e6ff]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Care Difficulties</span>
            </div>
            <span class="badge-difficulty text-xs font-semibold px-2 py-0.5 rounded">{{ difficulty_count }}</span>
        </a>
        <a href="{{ url_for('manage_growth_rates') }}" class="nav-growth flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#f7fae6]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Growth Rates</span>
            </div>
            <span class="badge-rate text-xs font-semibold px-2 py-0.5 rounded">{{ rate_count }}</span>
        </a>
        <a href="{{ url_for('manage_products') }}" class="nav-products flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#f7efe6]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Products</span>
            </div>
            <span class="badge-product text-xs font-semibold px-2 py-0.5 rounded">{{ product_count }}</span>
        </a>
        <a href="{{ url_for('manage_sections') }}" class="nav-sections flex items-center justify-between p-4 rounded-lg transition-colors hover:bg-[#e6f0f7]">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18m9-9H3" />
                </svg>
                <span class="font-medium">Sections</span>
            </div>
            <span class="badge-section text-xs font-semibold px-2 py-0.5 rounded">{{ section_count }}</span>
        </a>
    </nav>
    <!-- Only admin content is inside the background wrapper now -->
    <div class="bg-[#f5f7f2] shadow-lg rounded-xl p-8 mb-6">
        {% block admin_content %}{% endblock %}
    </div>
</div>
{% endblock %}