<section id="member-fragment-container">
  {% if form.user %}
    <h4>{% trans %}Add a new member{% endtrans %}</h4>
  {% else %}
    <h4>{% trans %}Join club{% endtrans %}</h4>
  {% endif %}

  <form
    hx-post="{{ url('club:club_new_members', club_id=club.id) }}"
    hx-disable="find input[type='submit']"
    hx-swap="outerHTML"
    hx-target="#member-fragment-container"
    id="add_club_members_form"
  >
    {% csrf_token %}
    {{ form.non_field_errors() }}
    <fieldset>
      {% if form.user %}
        <div>
          {{ form.user.label_tag() }}
          <span class="helptext">{{ form.user.help_text }}</span>
          {{ form.user }}
          {{ form.user.errors }}
        </div>
      {% endif %}
      <div>
        {{ form.role.label_tag() }}
        {{ form.role }}
        {{ form.role.errors }}
      </div>
      <div>
        {{ form.description.label_tag() }}
        {{ form.description }}
        {{ form.description.errors }}
      </div>
    </fieldset>
    <button type="submit" class="btn btn-blue">
      <i class="fa fa-user-plus"></i>
      {%- if form.user -%}
        {% trans %}Add{% endtrans %}
      {%- else -%}
        {% trans %}Join{% endtrans %}
      {%- endif -%}
    </button>
  </form>
</section>
