Ross
56 lines
2.5 KiB
HTML
56 lines
2.5 KiB
HTML
{% extends 'cards/base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div style="display:flex; align-items:center; gap:12px; margin-bottom:12px;">
|
|
<a class="button is-light" href="{% url 'cards:list' %}">← Back to list</a>
|
|
<h2 class="title" style="margin:0">Print cards</h2>
|
|
</div>
|
|
<p class="subtitle">Select which cards to include and choose a design. Click <strong>Open printable view</strong> to open the print preview in a new tab (you can then print to PDF or to an A4 printer).</p>
|
|
|
|
<form id="print-form" method="post" action="{% url 'cards:print_preview' %}" target="_blank">
|
|
{% csrf_token %}
|
|
<div style="display:flex; gap:12px; align-items:center; margin-bottom:10px;">
|
|
<div>
|
|
<label class="label">Design</label>
|
|
<div class="select">
|
|
<select name="design">
|
|
<option value="1">Design 1</option>
|
|
<option value="2">Design 2</option>
|
|
<option value="3">Design 3</option>
|
|
<option value="4">Design 4</option>
|
|
<option value="5">Design 5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="label">Scale</label>
|
|
<div class="control"><input class="input" type="number" name="scale" value="1" step="0.05" min="0.5" max="2"></div>
|
|
</div>
|
|
<div style="margin-left:auto">
|
|
<button class="button is-primary" type="submit">Open printable view</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px;">
|
|
{% for card in cards %}
|
|
<label style="display:flex; align-items:center; gap:10px; padding:6px; border:1px solid rgba(0,0,0,0.04); border-radius:6px;">
|
|
<input type="checkbox" name="cards" value="{{ card.pk }}" checked>
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
{% if card.image %}
|
|
<img src="{{ card.image.url }}" style="width:72px; height:56px; object-fit:cover; border-radius:6px;">
|
|
{% else %}
|
|
<div style="width:72px; height:56px; background:#f2f2f2; border-radius:6px"></div>
|
|
{% endif %}
|
|
<div>
|
|
<div style="font-weight:700">{{ card.name }}</div>
|
|
<div class="is-size-7">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|