75 lines
No EOL
2.8 KiB
HTML
75 lines
No EOL
2.8 KiB
HTML
{% extends 'base.html' %}
|
|
{% load card_multiselect %}
|
|
|
|
{% block title %}Create Trade Offer{% endblock title %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto max-w-xl mt-6">
|
|
<h2 class="text-2xl font-bold mb-4">Create a Trade Offer</h2>
|
|
<form method="post" novalidate class="space-y-4">
|
|
{% csrf_token %}
|
|
|
|
{# Use our DRY friend code selector #}
|
|
{% include "trades/_friend_code_select.html" with friend_codes=friend_codes selected_friend_code=selected_friend_code field_name=form.initiated_by.html_name label="Initiated by" %}
|
|
|
|
<!-- Card Selectors: "Have" and "Want" -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="form-control">
|
|
{% card_multiselect "have_cards" "Have:" "Select one or more cards..." available_cards form.initial.have_cards %}
|
|
</div>
|
|
<div class="form-control">
|
|
{% card_multiselect "want_cards" "Want:" "Select one or more cards..." available_cards form.initial.want_cards %}
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-full">Submit</button>
|
|
</form>
|
|
{% if form.errors %}
|
|
<div class="alert alert-error mt-4">
|
|
<strong>Please correct the errors below:</strong>
|
|
<ul class="mt-2">
|
|
{% for field in form %}
|
|
{% for error in field.errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for error in form.non_field_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<script defer>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const initiatedBySelect = document.getElementById('{{ form.initiated_by.html_name }}');
|
|
if (initiatedBySelect) {
|
|
const choicesInstance = new Choices(initiatedBySelect, {
|
|
searchEnabled: false,
|
|
classNames: {
|
|
containerOuter: 'choices',
|
|
containerInner: 'choices__inner',
|
|
input: 'choices__input',
|
|
},
|
|
callbackOnCreateTemplates: function(template) {
|
|
return {
|
|
choice: (classNames, data) => {
|
|
return template(`
|
|
<div class="${classNames.item} ${classNames.itemChoice} bg-accent text-white"
|
|
data-select-text="${this.config.itemSelectText}"
|
|
data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}
|
|
data-id="${data.id}" data-value="${data.value}"
|
|
${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
|
${data.label}
|
|
</div>
|
|
`);
|
|
},
|
|
};
|
|
},
|
|
});
|
|
choicesInstance.containerOuter.element.classList.add('bg-secondary', 'select', 'select-bordered', 'w-full');
|
|
choicesInstance.containerInner.element.classList.add('bg-secondary', 'text-white');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock content %} |