{% from "./form-items/_macros.html" import button %}

<div id="form">
    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
        {% include "./form-items/webform-steps.html" %}

        <div class="form-item m2d-message">
            <div class="form-item extra-spacing">
                <label>
                    Send your message to:
                    <span class="form-required" title="This field is required.">*</span>
                </label>
                <div class="form-checkboxes">
                    <div class="form-group">
                        <div class="form-item group-item" aria-controls="message-12345" aria-expanded="false">
                            <input class="form-checkbox" type="checkbox" id="id-12345" value="target-12345"
                                name="m2d-message.targets_selected">
                            <label class="option" for="id-12345">
                                <span>The Lady Jane Doe</span>
                            </label>
                        </div>
                        <div class="group-item message" id="message-12345" hidden>
                            <h3>Message for Lady Jane Doe</h3>
                            <div>
                                <p>Dear Lady Doe</p>
                            </div>
                            <p>Do something!</p>
                            <div>
                                <p>Best regards,<br>Kitty Cat</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-item group-item" aria-controls="message-67890" aria-expanded="true">
                            <input class="form-checkbox" type="checkbox" id="id-67890" value="target-67890"
                                name="m2d-message.targets_selected" checked>
                            <label class="option" for="id-67890">
                                <span>Lord John Smith</span>
                            </label>
                        </div>
                        <div class="group-item message" id="message-67890">
                            <h3>Message for Lord John Smith</h3>
                            <div>
                                <p>Dear Lord Smith</p>
                            </div>
                            <p>Do something!</p>
                            <div>
                                <p>Best regards,<br>Kitty Cat</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-item">
                <label class="" for="message"> Your message </label>
                <textarea id="message" name="m2d-message.message" rows="5">Do something!</textarea>
            </div>
        </div>

        {{ button("Send message", class="expanded primary button large") }}
    </form>
</div>