{% extends "admin_base.html" %}

{% block title %}Manage Plant Attributes{% endblock %}

{% block admin_content %}
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-6 text-center">Manage Plant Attributes</h1>
    
    <!-- Light Requirements -->
    <div class="bg-white shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-[#4e6b50]">Light Requirements</h2>
        <form method="POST" action="{{ url_for('manage_light') }}" class="space-y-4">
            <div class="flex gap-4">
                <input type="text" name="name" placeholder="New light requirement" required
                    class="flex-1 rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2">
                <button type="submit" class="btn-main px-6">Add</button>
            </div>
        </form>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for light in lights %}
            <div class="flex items-center justify-between p-3 bg-[#f8f9fa] rounded-lg">
                <span class="text-[#4e6b50]">{{ light.name }}</span>
                <form method="POST" action="{{ url_for('delete_light', light_id=light.id) }}" class="inline">
                    <button type="submit" class="text-red-600 hover:text-red-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Toxicity Levels -->
    <div class="bg-white shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-[#4e6b50]">Toxicity Levels</h2>
        <form method="POST" action="{{ url_for('manage_toxicity') }}" class="space-y-4">
            <div class="flex gap-4">
                <input type="text" name="name" placeholder="New toxicity level" required
                    class="flex-1 rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2">
                <button type="submit" class="btn-main px-6">Add</button>
            </div>
        </form>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for toxicity in toxicities %}
            <div class="flex items-center justify-between p-3 bg-[#f8f9fa] rounded-lg">
                <span class="text-[#4e6b50]">{{ toxicity.name }}</span>
                <form method="POST" action="{{ url_for('delete_toxicity', toxicity_id=toxicity.id) }}" class="inline">
                    <button type="submit" class="text-red-600 hover:text-red-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Size Categories -->
    <div class="bg-white shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-[#4e6b50]">Size Categories</h2>
        <form method="POST" action="{{ url_for('manage_size') }}" class="space-y-4">
            <div class="flex gap-4">
                <input type="text" name="name" placeholder="New size category" required
                    class="flex-1 rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2">
                <button type="submit" class="btn-main px-6">Add</button>
            </div>
        </form>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for size in sizes %}
            <div class="flex items-center justify-between p-3 bg-[#f8f9fa] rounded-lg">
                <span class="text-[#4e6b50]">{{ size.name }}</span>
                <form method="POST" action="{{ url_for('delete_size', size_id=size.id) }}" class="inline">
                    <button type="submit" class="text-red-600 hover:text-red-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Care Difficulty Levels -->
    <div class="bg-white shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-[#4e6b50]">Care Difficulty Levels</h2>
        <form method="POST" action="{{ url_for('manage_care_difficulty') }}" class="space-y-4">
            <div class="flex gap-4">
                <input type="text" name="name" placeholder="New difficulty level" required
                    class="flex-1 rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2">
                <button type="submit" class="btn-main px-6">Add</button>
            </div>
        </form>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for difficulty in difficulties %}
            <div class="flex items-center justify-between p-3 bg-[#f8f9fa] rounded-lg">
                <span class="text-[#4e6b50]">{{ difficulty.name }}</span>
                <form method="POST" action="{{ url_for('delete_care_difficulty', difficulty_id=difficulty.id) }}" class="inline">
                    <button type="submit" class="text-red-600 hover:text-red-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Growth Rate Categories -->
    <div class="bg-white shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4 text-[#4e6b50]">Growth Rate Categories</h2>
        <form method="POST" action="{{ url_for('manage_growth_rate') }}" class="space-y-4">
            <div class="flex gap-4">
                <input type="text" name="name" placeholder="New growth rate category" required
                    class="flex-1 rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2">
                <button type="submit" class="btn-main px-6">Add</button>
            </div>
        </form>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for rate in growth_rates %}
            <div class="flex items-center justify-between p-3 bg-[#f8f9fa] rounded-lg">
                <span class="text-[#4e6b50]">{{ rate.name }}</span>
                <form method="POST" action="{{ url_for('delete_growth_rate', rate_id=rate.id) }}" class="inline">
                    <button type="submit" class="text-red-600 hover:text-red-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}