{% extends "layout.html" %}

{% block content %}
<div class="card-view">
    <section class="card-preview-stage" aria-labelledby="PreviewHeading">
        <div class="preview-heading">
            <p id="PreviewHeading" class="eyebrow">Interactive preview</p>
            <p id="PreviewStatus" class="preview-status" role="status"
               aria-live="polite">Loading card preview…</p>
        </div>
        <canvas id="GLCanvas" aria-label="Interactive preview of {{ name }}">
        </canvas>
        <p class="preview-hint">Move the pointer over the card to tilt it.</p>
    </section>

    <aside class="card-info-panel" aria-labelledby="CardHeading">
        <nav class="card-actions" aria-label="Card actions">
            <a class="back-link" href="{{ back_url }}">← All cards</a>
            <a class="back-link" href="{{ edit_url }}">Edit card</a>
            <a class="back-link" href="{{ delete_url }}">Delete card</a>
        </nav>
        <p class="card-view-id">{{ display_id }}</p>
        <h1 id="CardHeading">{{ name }}</h1>

        {% if asset_warning %}
        <div class="asset-warning" role="note">
            <strong>Some card assets are missing.</strong>
            <span>
                Showing a fallback for
                {% for asset in missing_assets %}
                    {{ asset }}{% if not loop.is_last %}, {% endif %}
                {% endfor %}.
            </span>
        </div>
        {% endif %}

        <dl class="card-metadata">
            <div>
                <dt>Game</dt>
                <dd>{{ game }}</dd>
            </div>
            <div>
                <dt>Rarity</dt>
                <dd>{{ rarity }}</dd>
            </div>
            <div>
                <dt>Pull probability</dt>
                <dd>{{ probability }}</dd>
            </div>
            <div>
                <dt>Finish</dt>
                <dd>{% if has_foil %}Foil{% else %}Standard{% endif %}</dd>
            </div>
            {% for field in game_fields %}
            <div>
                <dt>{{ field.label }}</dt>
                <dd class="game-field-value">{{ field.value }}</dd>
            </div>
            {% endfor %}
        </dl>

        <section class="card-info-section" aria-labelledby="SeriesHeading">
            <h2 id="SeriesHeading">Series</h2>
            {% if length(series) == 0 %}
            <p class="muted-copy">Not part of a series.</p>
            {% else %}
            <ul class="series-list">
                {% for series_name in series %}
                <li>{{ series_name }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </section>

        {% if has_short_description %}
        <section class="card-info-section" aria-labelledby="SummaryHeading">
            <h2 id="SummaryHeading">Summary</h2>
            <div class="description-copy">{{ short_description }}</div>
        </section>
        {% endif %}

        {% if has_long_description %}
        <section class="card-info-section"
                 aria-labelledby="DescriptionHeading">
            <h2 id="DescriptionHeading">Description</h2>
            <div class="description-copy">{{ long_description }}</div>
        </section>
        {% endif %}
    </aside>
</div>

<script id="CardPageData" type="application/json">
{
    "mode": "view",
    "front_url": "{{ front_url }}",
    "foil_url": {% if length(foil_url) > 0 %}
        "{{ foil_url }}"
    {% else %}
        null
    {% endif %},
    "model_url": "{{ model_url }}",
    "vertex_shader_url": "{{ shader_vertex_url }}",
    "fragment_shader_url": "{{ shader_fragment_url }}",
    "spectral_lut_url": "{{ spectral_lut_url }}"
}
</script>
{% endblock %}

{% block scripts %}
<script src="{{ url_for("static", "foil/gl-matrix-min.js") }}"></script>
<script src="{{ url_for("static", "foil/libwebgl.js") }}"></script>
<script src="{{ url_for("static", "foil/obj.js") }}"></script>
<script src="{{ url_for("static", "foil/card_preview_math.js") }}"></script>
<script src="{{ preview_script_url }}"></script>
{% endblock %}