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

<div style="display:flex;gap:32px;margin-top:20px;flex-wrap:wrap;">
    <div style="flex:0 0 auto;max-width:400px;">
        {% if card.image_url %}
        <img src="{{ card.image_url }}" alt="{{ card.name }}"
             style="width:100%;border-radius:12px;border:2px solid var(--border);box-shadow:0 4px 20px var(--shadow);">
        {% else %}
        <div class="card" style="width:320px;height:440px;display:flex;align-items:center;justify-content:center;
                    text-align:center;color:var(--text-muted);">
            <div>
                <p style="font-size:3rem;margin-bottom:12px;">🃏</p>
                <p>Intet billede tilgængeligt</p>
            </div>
        </div>
        {% endif %}
    </div>

    <div style="flex:1;min-width:200px;">
        <h1 style="margin-bottom:4px;">
            <span class="tag">{{ card.full_code }}</span>
        </h1>
        <h2 style="font-size:1.8rem;margin:0 0 20px 0;color:var(--text);">{{ card.name }}</h2>

        <div class="card" style="margin-bottom:16px;">
            <table style="margin:0;">
                <tr>
                    <td style="font-weight:600;width:100px;">Sæt</td>
                    <td>
                        <a href="/sets/{{ card.set.code }}" style="color:var(--text);">
                            {{ card.set.code }} — {{ card.set.name }}
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="font-weight:600;">Serie</td>
                    <td>
                        <a href="/series/{{ card.set.serie.name|urlencode }}" style="color:var(--text);">
                            {{ card.set.serie.name }}
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="font-weight:600;">Nummer</td>
                    <td>{{ card.number }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
{% endblock %}