Sith/election/templates/election/role_form.jinja

{% extends "core/base.jinja" %}

{% block title %}
  {% trans name=object_name %}Election role{% endtrans %}
{% endblock %}

{% block content %}
  {% if object %}
    <h1>{% trans election=election %}Create role for election "{{ election }}"{% endtrans %}</h1>
  {% else %}
    <h1>{% trans election=election %}Edit role for election "{{ election }}"{% endtrans %}</h1>
  {% endif %}
  <form action="" method="post" x-data="{role: null, title: '', description: ''}">
    {% csrf_token %}
    <div class="form-group">
      {{ form.club_role.label_tag() }}
      {{ form.club_role.errors }}
      {{ form.club_role|add_attr("x-model.fill=role,autofocus=true") }}
      <button
        class="btn btn-blue"
        @click.prevent="title = roles[role]?.title ?? '';
                        description = roles[role]?.description ?? '';"
      >
        {% trans %}autofill form{% endtrans %}
      </button>
      <span class="helptext">{{ form.club_role.help_text }}</span>
    </div>
    <div class="form-group">
      {{ form.title.label_tag() }}
      {{ form.title.errors }}
      {{ form.title|add_attr("x-model.fill=title") }}
    </div>
    <div class="form-group">
      {{ form.description.label_tag() }}
      {{ form.description.errors }}
      {{ form.description|add_attr("x-model.fill=description") }}
    </div>
    <div class="form-group">
      {{ form.max_choice.as_field_group() }}
    </div>
    <p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
  </form>
{% endblock %}

{% block script %}
  <script>
    const roles = {
      {%- for role in form.club_role.field.queryset -%}
        {{ role.id }}: { title: {{ role.name|tojson }}, description: {{ role.description|tojson }} },
      {%- endfor -%}
    };
  </script>
{% endblock %}