<div class="yarpp-widget-settings-switch">
    <div class="yarpp-widget-basic-settings" style="display: block;">
        <p class='yarpp-widget-type-control'>
            <label style="padding-right: 10px; display: inline-block;" for="<?php echo $this->get_field_id('use_template_builtin'); ?>">
                <input
                    type="radio"
                    id="<?php echo $this->get_field_id('use_template_builtin'); ?>"
                    name="<?php echo $this->get_field_name('use_template'); ?>"
                    value="builtin" <?php checked($choice === 'builtin' ) ?>
                />
                <?php _e("List",'yarpp'); ?>
            </label>
            <br/>
            <label style="padding-right: 10px; display: inline-block;" for="<?php echo $this->get_field_id('use_template_thumbnails'); ?>">
                <input
                    type="radio"
                    id="<?php echo $this->get_field_id('use_template_thumbnails'); ?>"
                    name="<?php echo $this->get_field_name('use_template'); ?>"
                    value="thumbnails" <?php checked($choice === 'thumbnails') ?>
                />
                <?php _e("Thumbnails", 'yarpp'); ?>
            </label>
            <br/>
            <label style="padding-right: 10px; display: inline-block;" for="<?php echo $this->get_field_id('use_template_custom'); ?>">
                <input
                    type="radio"
                    id="<?php echo $this->get_field_id('use_template_custom'); ?>"
                    name="<?php echo $this->get_field_name('use_template'); ?>"
                    value="custom" <?php checked($choice === 'custom'); disabled(!count($templates)); ?>
                />
                <?php _e("Custom", 'yarpp'); ?>
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('title') ?>">
                <?php _e('Title:'); ?>
                <input
                    type="text"
                    class="widefat"
                    id="<?php echo $this->get_field_id('title') ?>"
                    name="<?php echo $this->get_field_name('title') ?>"
                    value="<?php echo esc_attr($instance['title']) ?>"/>
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('thumbnails_heading') ?>">
                <?php _e('Heading:', 'yarpp') ?>
                <input
                    type="text"
                    class="widefat"
                    id="<?php echo $this->get_field_id('thumbnails_heading') ?>"
                    name="<?php echo $this->get_field_name('thumbnails_heading') ?>"
                    value="<?php echo esc_attr($instance['thumbnails_heading']) ?>"/>
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('template_file'); ?>">
                <?php _e("Template file:",'yarpp');?>
            </label>
            <select name="<?php echo $this->get_field_name('template_file'); ?>" id="<?php echo $this->get_field_id('template_file'); ?>">
                <?php foreach ($templates as $template): ?>
                    <option value='<?php echo esc_attr($template['basename']); ?>' <?php selected($template['basename'], $instance['template']);?>>
                        <?php echo esc_html($template['name']); ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </p>
        <br/>
    </div>
</div>

<script type="text/javascript">
jQuery(function($) {
    $('.yarpp-widget-type-control','#wpbody').each(ensureTemplateChoice);
    $('.yarpp-widget-type-control input','#wpbody').on('change', ensureTemplateChoice);

    function ensureTemplateChoice(e) {
        if (typeof e === 'object' && 'type' in e) e.stopImmediatePropagation();
        var this_form = $(this).closest('form'),
            widget_id = this_form.find('.widget-id').val();
        // if this widget is just in staging:
        if (/__i__$/.test(widget_id)) return;
        var builtin     = !! $('#widget-'+widget_id+'-use_template_builtin').prop('checked'),
            thumbnails  = !! $('#widget-'+widget_id+'-use_template_thumbnails').prop('checked'),
            custom      = !! $('#widget-'+widget_id+'-use_template_custom').prop('checked');
        $('#widget-'+widget_id+'-title').closest('p').toggle(builtin);
        $('#widget-'+widget_id+'-thumbnails_heading').closest('p').toggle(thumbnails);
        $('#widget-'+widget_id+'-template_file').closest('p').toggle(custom);
    }
});
</script>