{% extends "admin_base.html" %}

{% block title %}Edit Toxicity Level{% endblock %}

{% block admin_content %}
<div class="max-w-xl mx-auto bg-gray-50 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4">Edit Toxicity Level</h2>
    <form method="POST" enctype="multipart/form-data" class="space-y-4">
        <div>
            <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
            <input type="text" name="name" id="name" value="{{ toxicity.name }}" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
        </div>
        <div>
            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
            <textarea name="description" id="description" rows="3"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ toxicity.description }}</textarea>
        </div>
        <div>
            <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
            <input type="file" name="icon" id="icon" accept=".svg"
                class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
            {% if toxicity.icon %}
            <div class="mt-2">
                <span class="text-xs text-gray-500">Current icon:</span>
                <img src="{{ url_for('static', filename='icons/' ~ toxicity.icon) }}" alt="Icon" class="w-8 h-8 inline-block align-middle">
            </div>
            {% endif %}
        </div>
        <button type="submit"
            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Save Changes
        </button>
    </form>
</div>
{% endblock %}