{% extends 'lara_django_base/base.html' %}
{% load static icons %}

{% block head_title %}Icon System Demo{% endblock %}

{% block body %}
<div class="container mx-auto p-8">
    <h1 class="text-3xl font-bold mb-8">SVG Icon System Demo</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        
        <!-- Method 1: Template Tag -->
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-semibold mb-4">Method 1: Template Tag</h2>
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    {% icon 'home' %}
                    <span>Home (default size)</span>
                </div>
                <div class="flex items-center gap-3">
                    {% icon 'dashboard' class_name='w-6 h-6 text-blue-600' %}
                    <span>Dashboard (large, blue)</span>
                </div>
                <div class="flex items-center gap-3">
                    {% icon 'bell' class_name='w-5 h-5 text-yellow-500' title='Notifications' %}
                    <span>Bell with accessibility title</span>
                </div>
            </div>
            <div class="mt-4 p-3 bg-gray-100 rounded text-sm">
                <code>{% verbatim %}{% icon 'home' %}{% endverbatim %}</code><br>
                <code>{% verbatim %}{% icon 'dashboard' class_name='w-6 h-6 text-blue-600' %}{% endverbatim %}</code>
            </div>
        </div>

        <!-- Method 2: Include Template -->
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-semibold mb-4">Method 2: Include Template</h2>
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    {% include 'lara_django_base/includes/icon.html' with name='table' %}
                    <span>Table (using include)</span>
                </div>
                <div class="flex items-center gap-3">
                    {% include 'lara_django_base/includes/icon.html' with name='people-circle' class='w-6 h-6 text-green-600' %}
                    <span>People (large, green)</span>
                </div>
                <div class="flex items-center gap-3">
                    {% include 'lara_django_base/includes/icon.html' with name='gear-fill' class='w-5 h-5 text-gray-600' title='Settings' %}
                    <span>Settings with title</span>
                </div>
            </div>
            <div class="mt-4 p-3 bg-gray-100 rounded text-sm">
                <code>{% verbatim %}{% include 'lara_django_base/includes/icon.html' with name='table' %}{% endverbatim %}</code>
            </div>
        </div>

        <!-- Available Icons Grid -->
        <div class="md:col-span-2 bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-semibold mb-4">Available Icons</h2>
            <div class="grid grid-cols-4 md:grid-cols-8 gap-4">
                {% for icon_name in 'menu,dashboard,home,table,people-circle,bell,pen-to-square,grid,collection,calendar3,chat-quote-fill,cpu-fill,gear-fill,tools,chevron-right,geo-fill,mail'|split:',' %}
                <div class="flex flex-col items-center p-2 border rounded hover:bg-gray-50">
                    {% icon icon_name class_name='w-6 h-6 text-gray-700' %}
                    <span class="text-xs mt-1 text-center">{{ icon_name }}</span>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Performance Comparison -->
        <div class="md:col-span-2 bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-semibold mb-4">Performance Benefits</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="p-4 bg-red-50 border border-red-200 rounded">
                    <h3 class="font-semibold text-red-800 mb-2">❌ Old Method (Inline SVG)</h3>
                    <ul class="text-sm text-red-700 space-y-1">
                        <li>• Icons in every HTML response</li>
                        <li>• No browser caching</li>
                        <li>• Larger page size</li>
                        <li>• Harder to maintain</li>
                        <li>• Repeated SVG code</li>
                    </ul>
                </div>
                <div class="p-4 bg-green-50 border border-green-200 rounded">
                    <h3 class="font-semibold text-green-800 mb-2">✅ New Method (External Sprite)</h3>
                    <ul class="text-sm text-green-700 space-y-1">
                        <li>• Single file cached by browser</li>
                        <li>• Smaller HTML responses</li>
                        <li>• Easy to maintain centrally</li>
                        <li>• Better performance</li>
                        <li>• Consistent icon system</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Ensure icons are properly sized and aligned */
svg {
    flex-shrink: 0;
}
</style>
{% endblock %}