newslettersubscribe.html

<template Modulo>
    <Component name="NewsletterSubscribe">
        <Template>
            <form method="POST">
                <h2>Learn Modulo.js - Sign-Up Component</h2>
                <label><strong>Email:</strong><input [state.bind] name="email" /></label>
                {% if state.email|length lt 4 %}
                    <p><em>Hint: Start by entering your email</em></p>
                {% else %}
                    <label>
                        <input [state.bind] name="subscribe" type="checkbox" />
                        I want to subscribe to receive news and special offers
                    </label>
                {% endif %}
                {% if state.subscribe %}
                    {% for key, value in state.newsletters %}
                        <label style="{% if value %}background-color: #11991133;{% endif %}">
                            <input [state.bind] name="newsletters.{{ key }}" type="checkbox" />
                            {{ key|capfirst }} Enthusiast Newsletter
                        </label>
                    {% endfor %}
                {% endif %}
                <button>Submit</button>
            </form>
        </Template>
        <State
            email=""
            subscribe:=false
            newsletters:={}
            newsletters.kombucha:=true
            newsletters.soda:=false
            newsletters.wine:=true
            newsletters.beer:=false
        ></State>
        <Style>
            label {
                display: block;
            }
            label, input, form, button {
                padding: 10px;
                margin: 10px;
                font-family: sans-serif;
                background-color: #11111111;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-NewsletterSubscribe></x-NewsletterSubscribe>