Ross
71 lines
4.1 KiB
HTML
71 lines
4.1 KiB
HTML
<article class="card-item" id="card-{{ card.pk }}">
|
|
<div class="toptrump-card">
|
|
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}');">
|
|
{% if card.image %}
|
|
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
|
|
{% endif %}
|
|
</div>
|
|
<div class="title-band">{{ card.name }}</div>
|
|
<div class="card-body">
|
|
<div class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
|
|
{% if card.facts_list %}
|
|
<ul class="fact-list is-size-7">
|
|
{% for fact in card.facts_list|slice:":2" %}
|
|
<li>{{ fact }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
<div style="margin-top:0.5rem">
|
|
<div class="stat-row">
|
|
<div class="stat-label">Speed <small class="is-size-7">(km/h)</small></div>
|
|
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.speed_percent }}%"></div></div>
|
|
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
|
<div>{{ card.speed_display }}</div>
|
|
<div class="is-size-7" style="font-weight:500">
|
|
{% for t in card.speed_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
|
<span style="margin-left:6px">(orig: {{ card.speed_orig }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<div class="stat-label">Weight <small class="is-size-7">(kg)</small></div>
|
|
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.weight_percent }}%"></div></div>
|
|
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
|
<div>{{ card.weight_display }}</div>
|
|
<div class="is-size-7" style="font-weight:500">
|
|
{% for t in card.weight_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
|
<span style="margin-left:6px">(orig: {{ card.weight_orig }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<div class="stat-label">Height <small class="is-size-7">(m)</small></div>
|
|
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.height_percent }}%"></div></div>
|
|
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
|
<div>{{ card.height_display }}</div>
|
|
<div class="is-size-7" style="font-weight:500">
|
|
{% for t in card.height_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
|
<span style="margin-left:6px">(orig: {{ card.height_orig }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<div class="stat-label">Intelligence <small class="is-size-7">(score)</small></div>
|
|
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.intelligence_percent }}%"></div></div>
|
|
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
|
<div class="is-size-7" style="font-weight:600">
|
|
{% for t in card.intelligence_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
|
</div>
|
|
<div class="is-size-7" style="font-weight:500">(orig: {{ card.intelligence_orig }})</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttons" style="margin-top:0.6rem">
|
|
<button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
|
|
<button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</button>
|
|
<button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|