cl-deck-builder2/templates/builder/search-results.html
2024-03-05 22:11:33 -05:00

122 lines
3.6 KiB
HTML

{% if length > 1 %}
{% include "pages.html" :url "builder/search" :hx-target "#search-results" :hx-include "[name='search-form']" :class "is-small" %}
{% endif %}
{% if cards %}
<table class="table is-bordered is-fullwidth" style="margin-bottom:0;border-collapse:collapse">
<thead>
<tr>
<th style="width:20%">
{% include "builder/_search_results_th.html" :url "/builder/search" :target "search-results" :name "ID" :sort "id" %}
</th>
<th>
{% include "builder/_search_results_th.html" :url "/builder/search" :target "search-results" :name "Name" :sort "name" %}
</th>
</tr>
</thead>
</table>
{% for card in cards %}
<table class="table is-fullwidth" style="margin-bottom:0;border-collapse:collapse">
<tbody>
<tr class="{{ card.frame-type }} draggable"
onclick="toggle_hidden('i-{{ forloop.counter0 }}-{{ card.passcode }}')" style="cursor:pointer;"
oncontextmenu="htmx.trigger('#c-{{ card.passcode }}-{{ forloop.counter0 }}', 'add-card', {}); return false;">
<td style="width:20%">
<a target="_blank" href="/cards/by-passcode/{{ card.passcode }}"
id="c-{{ card.passcode }}-{{ forloop.counter0 }}"
hx-post="/builder/add/{{ card.passcode }}"
hx-target="#current-deck-list"
hx-trigger="add-card"
hx-include="[name='search-form']">
<img
alt="Card Image for Yu-Gi-Oh! #{{ card.passcode }}"
class="w3-image"
style="max-height: 50px" src="/public/ygoprodeck/{{ card.passcode }}.jpg">
</a>
</td>
<td>
{{ card.name }}
</td>
</tr>
</tbody>
</table>
<div class="table-container is-hidden" id="i-{{ forloop.counter0 }}-{{ card.passcode }}" style="margin-bottom:0;border-collapse:collapse">
<table class="table is-narrow is-hoverable is-fullwidth {{ card.frame-type }}"
style="margin-bottom:0;border-collapse:collapse">
<tbody>
{% if card.archetype %}
<tr>
<th>Archetype</th>
<td>{{ card.archetype }}</td>
</tr>
{% endif %}
{% if card.atk %}
<tr>
<th>ATK</th>
<td>{{ card.atk }}</td>
</tr>
{% endif %}
{% if card.def %}
<tr>
<th>DEF</th>
<td>{{ card.def }}</td>
</tr>
{% endif %}
{% if card.attribute %}
<tr>
<th>Attribute</th>
<td>{{ card.attribute }}</td>
</tr>
{% endif %}
{% if card.desc %}
<tr>
<th>Card Text</th>
<!-- https://stackoverflow.com/a/10937254 -->
<td style="white-space:pre-wrap;word-wrap:break-word">{{ card.desc }}</td>
</tr>
{% endif %}
{% if card.level %}
<tr>
<th>Level</th>
<td>{{ card.level }}</td>
</tr>
{% endif %}
{% if card.race %}
<tr>
<th>Race</th>
<td>{{ card.race }}</td>
</tr>
{% endif %}
{% if card.scale %}
<tr>
<th>Scale</th>
<td>{{ card.scale }}</td>
</tr>
{% endif %}
{% if card.type %}
<tr>
<th>Type</th>
<td>{{ card.type }}</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endfor %}
{% if length > 1 %}
<p>{{ length }} result{% if length > 2 %}s{% endif %} found.</p>
{% include "pages.html" :url "builder/search" :hx-target "#search-results" :hx-include "[name='search-form']" :class "is-small" %}
{% endif %}
<script>
$(function() {
$(".draggable").draggable({
appendTo: "body",
helper: "clone",
stack: ".draggable"
});
});
</script>
{% endif %}