{% 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='heading__subtitle'>{% trans %}Salut à Toi association membership request{% endtrans %}</h1>
    <p class='instructions--head'>{% trans %}Please fill the form below if you're willing to join the Salut à Toi association.{% endtrans %}</p>
    <div>
        {% call form.form(class="form--paper form__panel--center") %}
            <h3 class="center">{% trans %}Identity{% endtrans %}</h3 class="center">
            {{ field.text("firstname",
                          _("firstname"),
                          placeholder=_("Given name"),
                          required=true,
                          class="form__field--big") }}
            {{ field.text("name",
                          _("name"),
                          placeholder=_("Family name"),
                          required=true,
                          class="form__field--big") }}
            {{ field.textarea("address",
                              _("address"),
                              placeholder=_("Address, post code, city"),
                              required=true,
                              class="form__field--big") }}
            <h3 class="center">{% trans %}Contacts{% endtrans %}</h3 class="center">
            {{ field.email("email",
                          _("email address"),
                          placeholder=_("please double check your email address"),
                          required=true,
                          class="form__field--big") }}
            {{ field.text("jid",
                          "Jabber ID",
                          placeholder=_("XMPP identifier (may be your SàT login)"),
                          class="form__field--big") }}
            <h3 class="center">{% trans %}Subscription{% endtrans %}</h3 class="center">
            {{ field.select("subscription",
                            (("0", _("0€")),
                            ("10", _("10€")),
                            ("20", _("20€")),
                            ("30", _("30€")),
                            ("50", _("50€")),
                            ("80", _("80€")),
                            ("100", _("100€"))),
                            selected=["10"],
                            required=true,
                            class="form__field--big",
            ) }}
            <h3 class="center">{% trans %}Reference{% endtrans %}</h3 class="center">
            {{ field.text("reference",
                          _("reference (in case of renewal)"),
                          placeholder=_("Your adherent number. You may let empty if you don't know it."),
                          class="form__field--big") }}
            <h3 class="center">{% trans %}Comment{% endtrans %}</h3 class="center">
            {{ field.textarea("comment",
                              _("comment"),
                              placeholder=_("This is a free field if you have anything to say or request."),
                              class="form__field--big") }}

            {{ field.checkbox("mailing_list",
                              _("I would like to subscribe to the adherents' mailing list (low traffic)."),
                              checked=true) }}
            {{ field.checkbox("documents_read",
                              _("I have read the %(statutes)s and %(rules)s and I agree with both of them",
                                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,
                                ),
                              checked=false,
                              required=true) }}
            {{ field.submit(_("join the association"), id="membership_submit") }}
        {% 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 %}