Ross
30 lines
1.6 KiB
HTML
30 lines
1.6 KiB
HTML
<article class="box card-item" id="card-{{ card.pk }}"
|
|
{% if background and background.image %}style="background-image: url('{{ background.image.url }}'); background-size: cover; background-position: center; position: relative;"{% endif %}>
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<p class="title is-5">{{ card.name }}</p>
|
|
<p class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div>{{ card.description|linebreaksbr }}</div>
|
|
<table class="table is-fullwidth is-narrow">
|
|
<tbody>
|
|
<tr><th>Speed</th><td>{{ card.speed }}</td></tr>
|
|
<tr><th>Weight</th><td>{{ card.weight }}</td></tr>
|
|
<tr><th>Intelligence</th><td>{{ card.intelligence }}</td></tr>
|
|
<tr><th>Height</th><td>{{ card.height }}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="buttons">
|
|
<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-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
|
|
</div>
|
|
</div>
|
|
{% if card.image %}
|
|
<figure class="image is-96x96" style="position:absolute; right:0.75rem; top:0.75rem; width:96px; height:96px; background:transparent;">
|
|
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="width:96px; height:96px; object-fit:cover; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.3);">
|
|
</figure>
|
|
{% endif %}
|
|
</article>
|