{% extends 'base/layout.html' %}

{% block content %}
<div class="container mx-auto" style="padding: 2rem 1rem; max-width: 800px;">
    <h1 style="margin-bottom: 1rem;">Add Content to Pack</h1>
    <p style="margin-bottom: 2rem; color: #94a3b8;">Listing: {{ listing.name }}</p>

    <!-- Search Section -->
    <form method="get" style="margin-bottom: 2rem; display: flex; gap: 0.5rem;">
        <input type="text" name="q" value="{{ query|default:'' }}" placeholder="Search for cards..." class="form-input" style="flex-grow: 1;">
        <button type="submit" class="btn" style="background: #3b82f6;">Search</button>
    </form>

    <form method="post">
        {% csrf_token %}
        
        {% if cards %}
        <div style="margin-bottom: 2rem;">
            <h2 style="margin-bottom: 1rem;">Select Cards to Include</h2>
            <div style="max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 1rem;">
                {% for card in cards %}
                <div style="display: flex; align-items: center; gap: 1rem; padding: 0.5rem; border-bottom: 1px solid var(--border-color);">
                    <input type="checkbox" name="cards" value="{{ card.id }}" id="card_{{ card.id }}" style="width: 1.25rem; height: 1.25rem;">
                    <label for="card_{{ card.id }}" style="display: flex; gap: 1rem; align-items: center; flex-grow: 1; cursor: pointer;">
                        {% if card.image_url %}
                            <img src="{{ card.image_url }}" alt="{{ card.name }}" style="width: 32px; height: 44px; object-fit: cover; border-radius: 2px;">
                        {% endif %}
                        <div>
                            <div style="font-weight: bold;">{{ card.name }}</div>
                            <div style="font-size: 0.8rem; color: #94a3b8;">{{ card.set.name }}</div>
                        </div>
                    </label>
                </div>
                {% endfor %}
            </div>
            <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Select multiple cards to create a single pack containing all selected items.</p>
        </div>
        
        <div style="display: flex; gap: 1rem;">
            <button type="submit" class="btn" style="background: #10b981;">Create Pack Instance</button>
            <a href="{% url 'store:manage_pack_inventory' listing.uuid %}" class="btn" style="background: var(--border-color);">Cancel</a>
        </div>
        
        {% elif query %}
            <p>No cards found matching "{{ query }}"</p>
        {% endif %}
    </form>
</div>
{% endblock %}