{% extends "base.html" %}
{% load justmyresource %}

{% block title %}Icon Browser - django-justmyresource Example{% endblock %}

{% block content %}
<div class="pack-selector">
    <form method="get" action="{% url 'home' %}">
        <label for="pack">Select Resource Pack:</label>
        <select name="pack" id="pack" onchange="this.form.submit()">
            {% if not selected_pack %}
                <option value="">-- Select a pack --</option>
            {% endif %}
            {% for pack in packs %}
                <option value="{{ pack }}" {% if pack == selected_pack %}selected{% endif %}>
                    {{ pack }}
                </option>
            {% endfor %}
        </select>
    </form>
</div>

{% if selected_pack %}
    {% if resources %}
        <div class="icon-grid">
            {% for resource in resources %}
                <div class="icon-card">
                    <div class="icon">
                        {% icon resource.name %}
                    </div>
                    <div class="icon-name">{{ resource.display_name }}</div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <p>No icons found in this pack.</p>
        </div>
    {% endif %}
{% else %}
    <div class="empty-state">
        <p>Select a resource pack from the dropdown above to view its icons.</p>
    </div>
{% endif %}
{% endblock %}