{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
{% import 'input/form.html' as form with context %}
{% import 'input/field.html' as field with context %}

{% block body %}
    <h1 class='title is-4'>{% trans %}Salut à Toi association membership request{% endtrans %}</h1>
    <article class="message is-info">
        <div class="message-body">{% trans %}Please fill the form below if you're willing to join the Salut à Toi association.{% endtrans %}</div>
    </article>
    <div>
        {% call form.form() %}
            {{ field.text("firstname",
                          _("firstname"),
                          placeholder=_("Given name"),
                          required=true,
                          ) }}
            {{ field.text("name",
                          _("name"),
                          placeholder=_("Family name"),
                          required=true,
                          ) }}
            {{ field.textarea("address",
                              _("address"),
                              placeholder=_("Address, post code, city"),
                              required=true,
                              ) }}
            {{ field.email("email",
                          _("email address"),
                          placeholder=_("please double check your email address"),
                          required=true,
                          ) }}
            {{ field.text("jid",
                          "Jabber ID",
                          placeholder=_("XMPP identifier (may be your SàT login)"),
                          ) }}
            <label class="has-text-weight-bold">
                {% trans %}Subscription{% endtrans %}
                {{ field.select("subscription",
                                (("0", _("0€")),
                                ("10", _("10€")),
                                ("20", _("20€")),
                                ("30", _("30€")),
                                ("50", _("50€")),
                                ("80", _("80€")),
                                ("100", _("100€"))),
                                selected=["10"],
                                required=true,
                ) }}
            </label>
            {{ field.text("reference",
                          _("reference (in case of renewal)"),
                          placeholder=_("Your adherent number. You may let empty if you don't know it."),
                          ) }}
            {{ field.textarea("comment",
                              _("comment"),
                              placeholder=_("This is a free field if you have anything to say or request."),
                              ) }}
            {{ field.checkbox("mailing_list",
                              checked=true) }}
                              {% trans %}I would like to subscribe to the adherents' mailing list (low traffic).{% endtrans %}
            {{ field.checkbox("documents_read",
                              checked=false,
                              required=true) }}
                              {% trans statutes='<a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/statuts.pdf">'|safe + _("statutes") + '</a>'|safe, rules='<a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/r%C3%A8glement%20int%C3%A9rieur.pdf">'|safe + _("rules") + '</a>'|safe %}I have read the {{statutes}} and {{rules}} and I agree with both of them{% endtrans %}
            {{ field.submit(_("join the association"), id="membership_submit", class="mt-3") }}
        {% endcall %}
    </div>

<script>
    /* Q&D way to have form submit disabled if documents_read is not checked

    TODO: do this in a cleaner way
    */
    let membership_submit = document.getElementById("membership_submit");
    let documents_read = document.getElementById("documents_read")

    documents_read.addEventListener(
        "click",
        function() {
            membership_submit.disabled = !documents_read.checked;
        }
    );

    membership_submit.disabled=true;
</script>
{% endblock body %}