{% extends "layout.html" %}
{% block content %}
<div class="card-view card-form-view">
<section class="card-preview-stage" aria-labelledby="PreviewHeading">
<div class="preview-heading">
<p id="PreviewHeading" class="eyebrow">Live preview</p>
<p id="PreviewStatus" class="preview-status" role="status"
aria-live="polite">Loading card preview…</p>
</div>
<canvas id="GLCanvas" aria-label="New card preview"></canvas>
<p class="preview-hint">Move the pointer over the card to tilt it.</p>
</section>
<aside class="card-info-panel card-form-panel"
aria-labelledby="CardFormHeading">
<a class="back-link" href="{{ back_url }}">← All cards</a>
<p class="card-view-id">{{ display_id }}</p>
<h1 id="CardFormHeading">{{ heading }}</h1>
{% if has_errors %}
<div class="error-summary" role="alert" tabindex="-1">
<h2>Check your card details</h2>
<p>
{% if length(error_control_id) > 0 %}
<a href="#{{ error_control_id }}">{{ error_message }}</a>
{% else %}
{{ error_message }}
{% endif %}
</p>
{% if files_need_reselection %}
<p>Uploaded files were discarded and must be selected again.</p>
{% endif %}
</div>
{% endif %}
<form id="CardForm" class="card-form" method="post"
action="{{ action_url }}" enctype="multipart/form-data">
<input name="csrf_token" type="hidden" value="{{ csrf_token }}">
<section class="form-section" aria-labelledby="IdentityHeading">
<h2 id="IdentityHeading">Identity</h2>
{% if mode == "edit" %}
<input name="revision" type="hidden" value="{{ revision }}">
{% endif %}
<label class="form-field" for="CardGame">
<span>Game</span>
<select id="CardGame" name="game"
{% if mode == "edit" %}disabled{% endif %}>
<option value="">Loose card</option>
{% for item in games %}
<option value="{{ item.short_name }}"
{% if item.short_name == selected_game %}
selected
{% endif %}>
{{ item.display_name }}
</option>
{% endfor %}
</select>
</label>
<label class="form-field" for="CardName">
<span>Name</span>
<input id="CardName" name="name" type="text"
maxlength="200" autocomplete="off"
value="{{ name }}" required>
</label>
{% if show_rarity %}
<label class="form-field" for="CardRarity">
<span>Rarity</span>
<input id="CardRarity" name="rarity" type="number"
min="0" step="1" value="{{ rarity }}" required>
</label>
{% else %}
<p>Rarity is assigned by an administrator before this card
enters the pull pool.</p>
{% endif %}
</section>
{% for game in games %}
<fieldset class="form-section game-fields"
data-game="{{ game.short_name }}"
{% if game.short_name != selected_game %}hidden{% endif %}>
<legend>{{ game.display_name }} details</legend>
<input name="game_revision" type="hidden"
value="{{ game.revision }}"
{% if game.short_name != selected_game %}
disabled
{% endif %}>
{% for field in game.fields %}
<label class="form-field" for="{{ field.control_id }}">
<span>{{ field.label }}</span>
{% if field.is_string %}
<textarea id="{{ field.control_id }}"
name="game.{{ field.key }}" rows="4"
{% if field.has_error %}
aria-invalid="true"
aria-describedby="{{ field.error_id }}"
{% endif %}
{% if game.short_name != selected_game %}
disabled
{% endif %}>{{ field.value }}</textarea>
{% else if field.is_choice %}
<select id="{{ field.control_id }}"
name="game.{{ field.key }}"
{% if field.has_error %}
aria-invalid="true"
aria-describedby="{{ field.error_id }}"
{% endif %}
{% if game.short_name != selected_game %}
disabled
{% endif %}>
<option value="">Not set</option>
{% for choice in field.choices %}
<option value="{{ choice }}"
{% if choice == field.value %}selected{% endif %}>
{{ choice }}
</option>
{% endfor %}
</select>
{% else %}
<input id="{{ field.control_id }}"
name="game.{{ field.key }}" type="text"
inputmode="numeric" value="{{ field.value }}"
{% if field.has_error %}
aria-invalid="true"
aria-describedby="{{ field.error_id }}"
{% endif %}
{% if game.short_name != selected_game %}
disabled
{% endif %}>
{% endif %}
{% if field.has_error %}
<small id="{{ field.error_id }}" class="field-error">
{{ field.error_message }}
</small>
{% endif %}
</label>
{% endfor %}
</fieldset>
{% endfor %}
{% if length(series) > 0 %}
<fieldset class="form-section">
<legend>Series</legend>
{% for item in series %}
<label class="form-field series-choice"
data-game="{{ item.game }}"
{% if item.game != selected_game %}hidden{% endif %}>
<input name="series_id" type="checkbox"
value="{{ item.id }}"
{% if item.selected %}checked{% endif %}
{% if item.game != selected_game %}disabled{% endif %}>
<span>{{ item.name }}</span>
</label>
{% endfor %}
</fieldset>
{% endif %}
<fieldset class="form-section image-source-section">
<legend>Card images</legend>
{% if mode == "edit" %}
<label class="form-field" for="CardFrontAction">
<span>Front artwork</span>
<select id="CardFrontAction" name="front_action">
<option value="keep">Keep current</option>
<option value="replace">Replace</option>
</select>
</label>
<label class="form-field" for="CardFoilAction">
<span>Foil control</span>
<select id="CardFoilAction" name="foil_action">
<option value="keep">
{% if has_foil %}
Keep current
{% else %}
No foil
{% endif %}
</option>
<option value="replace">
{% if has_foil %}
Replace
{% else %}
Add foil
{% endif %}
</option>
{% if has_foil %}
<option value="remove">Remove</option>
{% endif %}
</select>
</label>
{% endif %}
<div class="source-toggle">
<label>
<input type="radio" name="source_mode"
value="files" checked>
<span>Local files</span>
</label>
<label>
<input type="radio" name="source_mode"
value="urls">
<span>Image URLs</span>
</label>
</div>
<div id="FileSourceFields" class="source-fields">
<input id="CardThumbnailFile" name="thumbnail"
type="file" hidden disabled>
<label class="form-field image-field"
for="CardFrontFile">
<span>Front artwork</span>
<input id="CardFrontFile" name="front" type="file"
accept="image/png,image/jpeg,image/webp,.avif"
{% if mode == "create" %}required{% endif %}>
<small id="CardFrontFileMeta">No file selected</small>
</label>
<label class="form-field image-field"
for="CardFoilFile">
<span>Foil control <em>Optional</em></span>
<input id="CardFoilFile" name="foil" type="file"
accept="image/png,image/jpeg,image/webp,.avif">
<small id="CardFoilFileMeta">No file selected</small>
</label>
</div>
<div id="UrlSourceFields" class="source-fields" hidden>
<label class="form-field" for="CardFrontUrl">
<span>Front artwork URL</span>
<input id="CardFrontUrl" name="front_url" type="url"
inputmode="url" disabled>
</label>
<label class="form-field" for="CardFoilUrl">
<span>Foil control URL <em>Optional</em></span>
<input id="CardFoilUrl" name="foil_url" type="url"
inputmode="url" disabled>
</label>
<p class="form-hint">
The remote server must allow cross-origin image
access. URLs will be fetched by your browser.
</p>
</div>
</fieldset>
<section class="form-section"
aria-labelledby="DescriptionHeading">
<h2 id="DescriptionHeading">Description</h2>
<label class="form-field" for="CardShortDescription">
<span>Short description <em>Optional</em></span>
<textarea id="CardShortDescription"
name="short_description"
rows="3">{{ short_description }}</textarea>
</label>
<label class="form-field" for="CardLongDescription">
<span>Long description <em>Optional</em></span>
<textarea id="CardLongDescription"
name="long_description"
rows="7">{{ long_description }}</textarea>
</label>
<p class="form-hint">Descriptions support Markdown.</p>
</section>
<button class="form-submit" type="submit">
{{ submit_label }}
</button>
<p id="CardFormStatus" class="form-status" role="status"
aria-live="polite"></p>
</form>
</aside>
</div>
<script id="CardPageData" type="application/json">
{
"mode": "{{ mode }}",
"front_url": "{{ front_url }}",
"foil_url": {% if has_foil %}"{{ 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 }}",
"thumbnail_long_side": {{ thumbnail_long_side }}
}
</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>
<script src="{{ url_for("static", "card_form_logic.js") }}"></script>
<script src="{{ url_for("static", "card_form.js") }}"></script>
{% endblock %}