{% extends "base.html" %}
{% block title %}{{ set.code }} — {{ set.name }}{% endblock %}
{% block content %}
<a href="/series/{{ set.serie.name|urlencode }}" style="color:var(--text-muted);text-decoration:none;font-size:0.9rem;">
    &larr; {{ set.serie.name }}
</a>

<h1 style="margin-top:12px;">
    <span class="tag">{{ set.code }}</span>
    {{ set.name }}
</h1>

{% if set.release_date %}
<p style="color:var(--text-muted);margin-bottom:6px;">Udgivet: {{ set.release_date }}</p>
{% endif %}
<p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:20px;">{{ set.cards|length }} kort</p>

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Navn</th>
            <th>Kode</th>
            <th>Billede</th>
        </tr>
    </thead>
    <tbody>
        {% for card in set.cards %}
        <tr>
            <td style="font-weight:600;">{{ card.number }}</td>
            <td>
                <a href="/card/{{ set.code }}/{{ card.number }}" style="color:var(--text);text-decoration:none;">
                    {{ card.name }}
                </a>
            </td>
            <td><span class="tag">{{ card.full_code }}</span></td>
            <td>
                {% if card.image_url %}
                <a href="/card/{{ set.code }}/{{ card.number }}">
                    <img src="{{ card.image_url }}" alt="{{ card.name }}"
                         style="height:60px;border-radius:6px;object-fit:contain;">
                </a>
                {% else %}
                <span style="color:var(--text-muted);font-size:0.8rem;">Intet billede</span>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% if set.cards|length == 0 %}
<div class="card" style="text-align:center;color:var(--text-muted);">
    <p>Ingen kort i dette sæt endnu.</p>
</div>
{% endif %}
{% endblock %}