<div class="c-donate-widget">

    <!-- START MAIN FORM -->
    <div class="c-donate-widget__form js-donate-widget__form is-active">
        <h3 class="c-donate-widget__title ">Donate now</h3>
        <p class="c-donate-widget__intro">Help lift more people out of poverty.</p>

        <div class="js-donate-widget__controls">
            
            
            <div class="c-donate-widget__input-container">
                <input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
            </div>
        </div>

        <a class="button c-donate-widget__button" href="#">Donate now</a>

            </div>

    <!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
    </div>

<div class="c-donate-widget">

    <!-- START MAIN FORM -->
    <div class="c-donate-widget__form js-donate-widget__form is-active">
        <h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
        <p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>

        <div class="js-donate-widget__controls">
            {% if allHandles %}
                <div class="c-donate-widget__handles-container">

                    <div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
                        {% for frequency in frequencies %}
                            <div class="c-donate-widget__radio">
                                <input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
                                <label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
                            </div>
                        {% endfor %}
                    </div>

                    <div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
                        {% if amounts_monthly is not empty %}
                            <div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
                                {% for amount in amounts_monthly %}
                                    <div class="c-donate-widget__radio">
                                        <input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
                                        <label for="{{ id }}_amount_monthly_{{ amount.title }}">&pound;{{ amount.title }}</label>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}

                        {% if amounts_once is not empty %}
                            <div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
                                {% for amount in amounts_once %}
                                    <div class="c-donate-widget__radio">
                                        <input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
                                        <label for="{{ id }}_amount_once_{{ amount.title }}">&pound;{{ amount.title }}</label>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            {% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
                <div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">

                    {% for amount in amounts_monthly %}
                        <div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
                            <img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
                            <p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
                        </div>
                    {% endfor %}

                    {% for amount in amounts_once %}
                        <div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
                            <img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
                            <p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
                        </div>
                    {% endfor %}

                </div>
            {% endif %}

            <div class="c-donate-widget__input-container">
                <input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
            </div>
        </div>

        <a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>

        {% if flip_link %}
            <a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
        {% endif %}
    </div>

    <!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
    {% if alt_form %}
        <div class="c-donate-widget__form js-donate-widget__form is-hidden">
            <h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
            <p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>

            <div class="js-donate-widget__controls">
                {% if allHandles %}
                    <div class="c-donate-widget__handles-container">

                        <div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
                            {% for frequency in alt_frequencies %}
                                <div class="c-donate-widget__radio">
                                    <input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
                                    <label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
                                </div>
                            {% endfor %}
                        </div>

                        <div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
                            {% if (alt_amounts_once is not empty) %}
                                <div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">

                                    {% for amount in alt_amounts_once %}
                                        <div class="c-donate-widget__radio">
                                            <input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
                                            <label for="{{ alt_id }}_amount_once_{{ amount.title }}">&pound;{{ amount.title }}</label>
                                        </div>
                                    {% endfor %}

                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

                {% if (alt_amounts_once is not empty) %}
                    <div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">

                        {% for amount in alt_amounts_once %}
                            <div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
                                <img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
                                <p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
                            </div>
                        {% endfor %}

                    </div>
                {% endif %}

                <div class="c-donate-widget__input-container">
                    <input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
                </div>

                <a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
            </div>

            {% if alt_flip_link %}
                <a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
            {% endif %}
        </div>
    {% endif %}
</div>