Ross
116 lines
3.9 KiB
HTML
116 lines
3.9 KiB
HTML
<div class="card-form card">
|
|
{% if card %}
|
|
<form method="post" enctype="multipart/form-data" action="{% url 'cards:edit' card.pk %}" hx-post="{% url 'cards:edit' card.pk %}" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">
|
|
{% else %}
|
|
<form method="post" enctype="multipart/form-data" action="{% url 'cards:create' %}" hx-post="{% url 'cards:create' %}" hx-target="#cards-list .grid" hx-swap="afterbegin">
|
|
{% endif %}
|
|
{% csrf_token %}
|
|
{{ form.non_field_errors }}
|
|
<div class="field">
|
|
<label class="label">{{ form.name.label }}</label>
|
|
<div class="control">
|
|
{{ form.name }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label">{{ form.era.label }}</label>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">{{ form.era }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">{{ form.diet.label }}</label>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">{{ form.diet }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">{{ form.description.label }}</label>
|
|
<div class="control">
|
|
{{ form.description }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">{{ form.facts.label }}</label>
|
|
<div class="control">
|
|
{{ form.facts }}
|
|
<p class="help">One fact per line — will be shown as bullet points on the card.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">{{ form.image.label }}</label>
|
|
<div class="control">
|
|
<div class="file has-name">
|
|
<label class="file-label">
|
|
{{ form.image }}
|
|
<span class="file-cta">
|
|
<span class="file-icon">📁</span>
|
|
<span class="file-label">Choose a file…</span>
|
|
</span>
|
|
<span class="file-name" style="margin-left:0.5rem">No file chosen</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
const script = document.currentScript;
|
|
const formRoot = script && script.parentElement ? script.parentElement : document;
|
|
const fileInputs = formRoot.querySelectorAll('input[type=file]');
|
|
fileInputs.forEach(function(fi){
|
|
fi.addEventListener('change', function(){
|
|
const wrapper = fi.closest('.file');
|
|
if(!wrapper) return;
|
|
const label = wrapper.querySelector('.file-name');
|
|
if(!label) return;
|
|
if(fi.files.length === 0) label.textContent = 'No file chosen';
|
|
else label.textContent = fi.files.length > 1 ? fi.files.length + ' files selected' : fi.files[0].name;
|
|
});
|
|
const outerLabel = fi.closest('.file').querySelector('.file-label');
|
|
if(outerLabel && !outerLabel.contains(fi)){
|
|
outerLabel.addEventListener('click', function(e){ fi.click(); });
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label">{{ form.speed.label }}</label>
|
|
<div class="control">{{ form.speed }}</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">{{ form.weight.label }}</label>
|
|
<div class="control">{{ form.weight }}</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">{{ form.intelligence.label }}</label>
|
|
<div class="control">{{ form.intelligence }}</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">{{ form.height.label }}</label>
|
|
<div class="control">{{ form.height }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button class="button is-primary" type="submit">Save</button>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-light" type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|