<taconite><eval><![CDATA[$.taconite.debug = true;]]></eval><replaceContent select="#outlet_modal"><div class="modal-dialog modal-lg" role="document">
    <div id="outlet_modal" class="modal-content">
        <div class="modal-header">
            <button type="button" class="close fui-cross" data-dismiss="modal" aria-hidden="true"></button>
            <h1 class="modal-title" id="contextView">Speaker enquiry</h1>
        </div>
        <div class="modal-body" id="body_content">
            <h6>Invite me to your group event</h6>
            <div id="response_container"></div>
            <form
                id="speaker_form"
                method="post" 
                action="/speaker/booking/enquiry.html"
                role="application">
                <div id="form_header"></div>
                <fieldset>
                    <div class="form-group">
                        <label for="name">Your name (*)</label>
                        <input type="text" id="name" placeholder="Jane Reed" name="name" class="form-control input-hg"/>
                    </div>
                    <div class="form-group">
                        <label for="email"> Your email (*)</label>
                        <input type="text" id="email" placeholder="jane@example.co.uk" name="email" class="form-control input-hg"/>
                    </div>
                    <h6>Tell me a bit about your event</h6>
                    <div class="form-group">
                        <label for="group_name">What is the group's name?</label>
                        <input type="text" id="group_name" placeholder="The Reading Circle / The Thursday Careers Club" name="group_name" class="form-control input-hg"/>
                    </div>
                    <div class="form-group">
                        <label for="web_address">Do you have a web address?</label>
                        <input type="text" id="web_address" placeholder="www.example.com" name="web_address" class="form-control input-hg"/>
                    </div>
                    <div class="form-group">
                        <label for="participants">Expected no. of participants</label>
                        <input type="text" id="participants" placeholder="8-12, 50+" name="participants" class="form-control input-hg"/>
                    </div>
                    <p>What kind of time slot would work best for you?</p>     
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            <div class="form-group">
                                <label for="fixed_date">Choose a fixed date</label>
                                <div class="input-group input-group-hg">
                                    <span class="input-group-btn">
                                        <button class="btn" type="button"><span class="fui-calendar"></span></button>
                                    </span>
                                    <input type="text" id="fixed_date" name="fixed_date" class="form-control input-hg" data-widget="datepicker" />
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="form-group">
                                <label for="fixed_date">Start time</label>
                                <div class="input-group input-group-hg">
                                    <span class="input-group-btn">
                                        <button class="btn" type="button"><span class="fui-time"></span></button>
                                    </span>
                                    <input type="text" id="fixed_time" name="fixed_time" class="form-control input-hg" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="time_slot">or enter your flexible dates here</label>
                        <input id="time_slot" placeholder="Next Wed at 1pm / Each Mon at 3pm / fixed dates " name="time_slot" class="form-control input-hg" />                                
                    </div>
                    <div class="form-group">
                        <label class="radio radio-inline">
                            <input 
                                type="radio" 
                                name="location" 
                                data-toggle="radio" 
                                value="Online" 
                                id="online"
                                checked="true"
                            /> Online event
                        </label>
                        <label class="radio radio-inline">
                            <input 
                                type="radio" 
                                name="location" 
                                data-toggle="radio" 
                                value="Physical" 
                                id="physical"
                            /> On-site event
                        </label>    
                    </div>
                    <div class="form-group" id="container_postcode">
                        <input type="text" id="postcode" placeholder="Postcode or city" name="postcode" class="form-control input-hg"/>                                
                    </div>
                    <div id="container_online">
                        <p>Who will host the event?</p>
                        <div class="form-group">
                            <label class="radio radio-inline">
                                <input 
                                    type="radio" 
                                    name="organiser" 
                                    data-toggle="radio" 
                                    value="We" 
                                    id="we"
                                /> We will
                            </label>
                            <label class="radio radio-inline">
                                <input 
                                    type="radio" 
                                    name="organiser" 
                                    data-toggle="radio" 
                                    value="Douglas" 
                                    id="douglas"
                                /> Douglas, please organise on Zoom
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="remarks">How long should Douglas speak for?</label>
                        <input type="text" id="remarks" placeholder="30 mins" name="remarks" class="form-control input-hg"/>
                    </div>
                    <div class="form-group">
                        <label for="qa">How long would the group like for general discussion or Q&amp;A?</label>
                        <input type="text" id="qa" placeholder="15 mins" name="qa" class="form-control input-hg"/>
                    </div>
                    <div class="form-group has-feedback">
    		            <label class="checkbox" for="record_event">
                            <input id="record_event" class="custom-checkbox" type="checkbox" name="record_event" data-toggle="checkbox" value="1" />
                            Do you want to record the event, or allow participants to do so?
                        </label>
                    </div>
                    
                    <div class="form-group">
                        <label for="ideal_world">
                            What response would you be delighted to
                            receive from a participant the day afterwards?</label>
                        <textarea
                            id="ideal_world"
                            class="form-control input-hg"
                            placeholder="Jane, thank you for organising – that was brilliant because … "
                            maxlength="200"
                            name="ideal_world"
                            onkeyup="countChar(this, 'iw2max')"
                        ></textarea>
                        <span class="help-block">
                            <span class="fui-alert-circle"></span> Characters remaining: <span id="iw2max">200</span>
                        </span>
                    </div>
                    <div class="form-group has-feedback">
    		            <label class="checkbox" for="gdpr">
                            <input id="gdpr" class="custom-checkbox" type="checkbox" name="gdpr" data-toggle="checkbox" value="1" />
                            I have read and accept the 
                            <a href="//douglasboard.com/privacy-policy/" onclick="window.open(this.href); return false;">privacy policy</a>
                        </label>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-embossed btn-lg" id="speaker_button" type="submit">Submit</button>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
<script>
function countChar(f, t) {
    var len = f.value.length;
    if (len >= 200) {
        f.value = f.value.substring(0, 200);
    } else {
        $('#' + t).text(200 - len);
    }
};
</script>
</replaceContent><eval><![CDATA[
                    $.fn.initSpeakerForm('en');
                    var selFixedDate = $('#fixed_date');
                    selFixedDate.addDatePicker();
                    $('#container_postcode').hide();
                    $('input[type="radio"][name="location"]').on('change', function () {
                        if (this.value === 'Physical') {
                            $('#container_postcode').show();
                            $('#container_online').hide();
                            $('#we').attr('checked', false);
                            $('#douglas').attr('checked', false);
                        } else {
                            $('#container_postcode').hide();
                            $('#container_online').show();
                            $('#postcode').val('');
                        }
                    });
                ]]></eval></taconite>