{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}

{%
    call onsQuestion({
        "title": "How would you like us to contact you?",
        "legendIsQuestionTitle": true,
        "classes": "ons-u-mt-no"
    })
%}
    {{
        onsCheckboxes({
            "checkboxesLabel": "Select all that apply",
            "dontWrap": true,
            "name": "contact",
            "checkboxes": [
                {
                    "id": "post-example-checkbox-with-revealed-select-expanded",
                    "label": {
                        "text": "By post"
                    },
                    "value": "post"
                },
                {
                    "id": "email-example-checkbox-with-revealed-select-expanded",
                    "label": {
                        "text": "By email"
                    },
                    "value": "email"
                },
                {
                    "id": "phone-example-checkbox-with-revealed-select-expanded",
                    "label": {
                        "text": "By phone"
                    },
                    "value": "phone",
                    "checked": true,
                    "other": {
                        "otherType": "select",
                        "id": "phone-time-example-checkbox-with-revealed-select-expanded",
                        "name": "phone-time",
                        "label": {
                            "text": "Choose preferred time of day"
                        },
                        "options": [
                            {
                                "value": "",
                                "text": "Select an option",
                                "disabled": true,
                                "selected": true
                            },
                            {
                                "value": "anytime",
                                "text": "Anytime of day"
                            },
                            {
                                "value": "morning",
                                "text": "Morning"
                            },
                            {
                                "value": "afternoon",
                                "text": "Afternoon"
                            },
                            {
                                "value": "evening",
                                "text": "Evening"
                            }
                        ]
                    }
                }
            ]
        })
    }}
{% endcall %}