<div class="giving-widget ">

    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>
                    <span class="fund-selector__destination">the Central African Republic</span>
        
        
        <div class="fund-selector-field">
                            <div class="option-selector option-selector--with-text">

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio1" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio1">£10</label>
                                                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio2" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio2">£20</label>
                                                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio3" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio3">£50</label>
                                                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                                    </div>

                                       
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                                                    <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                            </div>
                </div>
                    </div>

  <!--        -->

        
            <div class="giving-handles">

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                
            </div>

        
                    <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>