function add_view_layout_extra($view_settings, $view_layout_settings, $view_id)
{
    //Get loop content template
    $loop_content_template = get_post_meta($view_id, '_view_loop_template', true);
    $loop_content_template_name = '';
    if (!empty($loop_content_template)) {
        $loop_template = get_post($loop_content_template);
        $loop_content_template_name = $loop_template->post_title;
    }
    // What kind of view are we showing?
    if (!isset($view_settings['view-query-mode']) || 'normal' == $view_settings['view-query-mode']) {
        $view_kind = 'view';
    } else {
        // we assume 'archive' or 'layouts-loop'
        $view_kind = 'wpa';
    }
    $section_help_pointer = WPV_Admin_Messages::edit_section_help_pointer('layout_html_css_js');
    ?>
	<div class="wpv-setting-container wpv-setting-container-horizontal wpv-settings-layout-markup js-wpv-settings-layout-extra">

		<div class="wpv-settings-header">
			<h3>
				<?php 
    _e('Loop Output', 'wpv-views');
    ?>
				<i class="icon-question-sign js-display-tooltip"
						data-header="<?php 
    echo esc_attr($section_help_pointer['title']);
    ?>
"
						data-content="<?php 
    echo esc_attr($section_help_pointer['content']);
    ?>
">
				</i>
			</h3>
		</div>
		<div class="wpv-setting">
            <input type="hidden" value="<?php 
    echo esc_attr($loop_content_template);
    ?>
" id="js-loop-content-template" />
            <input type="hidden" value="<?php 
    echo esc_attr($loop_content_template_name);
    ?>
" id="js-loop-content-template-name" />
			<div class="js-error-container js-wpv-error-container js-wpv-toolset-messages"></div>
			<div class="js-code-editor code-editor layout-html-editor" data-name="layout-html-editor">
				<div class="code-editor-toolbar js-code-editor-toolbar">
					<ul class="js-wpv-layout-edit-toolbar">
						<li>
							<button class="button-secondary js-code-editor-toolbar-button js-open-meta-html-wizard">
								<i class="icon-th"></i>
								<span class="button-label"><?php 
    _e('Loop Wizard', 'wpv-views');
    ?>
</span>
							</button>
						</li>
						<?php 
    do_action('wpv_views_fields_button', 'wpv_layout_meta_html_content');
    ?>
						<li>
							<button class="button-secondary js-code-editor-toolbar-button js-wpv-ct-assign-to-view" data-id="<?php 
    echo esc_attr($view_id);
    ?>
">
								<i class="icon-paste"></i>
								<span class="button-label"><?php 
    _e('Content Template', 'wpv-views');
    ?>
</span>
							</button>
						</li>
						<?php 
    if ('view' == $view_kind) {
        // we only add the pagination button to the Layout box if the View is not a WPA
        ?>
								<li class="js-editor-pagination-button-wrapper">
									<button class="button-secondary js-code-editor-toolbar-button js-wpv-pagination-popup" data-content="wpv_layout_meta_html_content">
										<i class="icon-pagination"></i>
										<span class="button-label"><?php 
        _e('Pagination controls', 'wpv-views');
        ?>
</span>
									</button>
								</li>
								<?php 
    } else {
        if ('wpa' == $view_kind) {
            // Button to the Archive pagination controls popup for WPAs
            ?>
								<li>
									<button class="button-secondary js-code-editor-toolbar-button js-wpv-archive-pagination-popup"
											data-content="wpv_layout_meta_html_content">
										<i class="icon-pagination"></i>
										<span class="button-label"><?php 
            _e('Pagination controls', 'wpv-views');
            ?>
</span>
									</button>
								</li>
								<?php 
        }
    }
    do_action('wpv_cred_forms_button', 'wpv_layout_meta_html_content');
    ?>
						<li>
							<button class="button-secondary js-code-editor-toolbar-button js-wpv-media-manager"
									data-id="<?php 
    echo esc_attr($view_id);
    ?>
"
									data-content="wpv_layout_meta_html_content">
								<i class="icon-picture"></i>
								<span class="button-label"><?php 
    _e('Media', 'wpv-views');
    ?>
</span>
							</button>
						</li>
					</ul>
				</div>

				<textarea cols="30" rows="10" id="wpv_layout_meta_html_content" autocomplete="off"
						name="_wpv_layout_settings[layout_meta_html]"><?php 
    echo isset($view_layout_settings['layout_meta_html']) ? esc_textarea($view_layout_settings['layout_meta_html']) : '';
    ?>
</textarea>
				
				<?php 
    wpv_formatting_help_layout();
    ?>
			</div>
			
			<ul id="wpv-layout-meta-html-extra" class="wpv-layout-meta-html-extra js-wpv-layout-meta-html-extra">
				<li class="wpv-has-itembox-header js-wpv-layout-meta-html-extra-item js-wpv-layout-meta-html-extra-css">
					<?php 
    $layout_extra_css = isset($view_settings['layout_meta_html_css']) ? $view_settings['layout_meta_html_css'] : '';
    ?>
					<div class="wpv-layout-meta-html-extra-header wpv-itembox-header">
						<strong>
							<?php 
    _e('CSS editor', 'wpv-views');
    ?>
						</strong>
						<button class="button button-secondary button-small wpv-code-editor-toggler js-wpv-code-editor-toggler" data-kind="css" data-target="layout-css-editor">
							<i class="icon-pushpin js-wpv-textarea-full" style="<?php 
    if (empty($layout_extra_css)) {
        echo ' display:none;';
    }
    ?>
"></i>
							<span class="js-wpv-text-holder"><?php 
    _e('Open CSS editor', 'wpv-views');
    ?>
</span>
						</button>
					</div>
					<div class="code-editor layout-css-editor wpv-code-editor-closed js-wpv-code-editor js-wpv-layout-css-editor js-wpv-code-editor-closed hidden">
						<div class="code-editor-toolbar js-code-editor-toolbar">
							<ul>
								<li>
									<button class="button-secondary js-code-editor-toolbar-button js-wpv-media-manager" data-id="<?php 
    echo esc_attr($view_id);
    ?>
" data-content="wpv_layout_meta_html_css">
										<i class="icon-picture"></i>
										<span class="button-label"><?php 
    _e('Media', 'wpv-views');
    ?>
</span>
									</button>
								</li>
							</ul>
						</div>
						<textarea cols="30" rows="10" id="wpv_layout_meta_html_css" autocomplete="off" name="_wpv_settings[layout_meta_html_css]"><?php 
    echo esc_textarea($layout_extra_css);
    ?>
</textarea>
						<?php 
    wpv_formatting_help_extra_css('layout');
    ?>
					</div>
				</li>
				<li class="wpv-has-itembox-header js-wpv-layout-meta-html-extra-item js-wpv-layout-meta-html-extra-js">
					<?php 
    $layout_extra_js = isset($view_settings['layout_meta_html_js']) ? $view_settings['layout_meta_html_js'] : '';
    ?>
					<div class="wpv-layout-meta-html-extra-header wpv-itembox-header">
						<strong>
							<?php 
    _e('JS editor', 'wpv-views');
    ?>
						</strong>
						<button class="button button-secondary button-small wpv-code-editor-toggler js-wpv-code-editor-toggler" data-kind="js" data-target="layout-js-editor">
							<i class="icon-pushpin js-wpv-textarea-full" style="<?php 
    if (empty($layout_extra_js)) {
        echo ' display:none;';
    }
    ?>
"></i>
							<span class="js-wpv-text-holder"><?php 
    _e('Open JS editor', 'wpv-views');
    ?>
</span>
						</button>
					</div>
					<div class="code-editor layout-js-editor wpv-code-editor-closed js-wpv-code-editor js-wpv-layout-js-editor js-wpv-code-editor-closed hidden">
						<div class="code-editor-toolbar js-code-editor-toolbar">
							<ul>
								<li>
									<button class="button-secondary js-code-editor-toolbar-button js-wpv-media-manager" data-id="<?php 
    echo esc_attr($view_id);
    ?>
" data-content="wpv_layout_meta_html_js">
										<i class="icon-picture"></i>
										<span class="button-label"><?php 
    _e('Media', 'wpv-views');
    ?>
</span>
									</button>
								</li>
							</ul>
						</div>
						<textarea cols="30" rows="10" id="wpv_layout_meta_html_js" autocomplete="off" name="_wpv_settings[layout_meta_html_js]"><?php 
    echo esc_textarea($layout_extra_js);
    ?>
</textarea>
						<?php 
    wpv_formatting_help_extra_js('layout');
    ?>
					</div>
				</li>
			</ul>

			<p class="update-button-wrap js-wpv-update-button-wrap">
				<span class="js-wpv-message-container"></span>
				<button data-success="<?php 
    echo esc_attr(__('Data updated', 'wpv-views'));
    ?>
"
						data-unsaved="<?php 
    echo esc_attr(__('Data not saved', 'wpv-views'));
    ?>
"
						data-nonce="<?php 
    echo wp_create_nonce('wpv_view_layout_extra_nonce');
    ?>
"
						class="js-wpv-layout-extra-update button-secondary" disabled="disabled">
					<?php 
    _e('Update', 'wpv-views');
    ?>
				</button>
			</p>
		</div>
	</div>
	<?php 
}
    function view_settings_meta_html_extra()
    {
        /**
         * Add admin metabox for custom CSS and javascript
         */
        global $post;
        // @todo this should not be here at all... maybe on the other metabox, or somewhere else
        $user_id = get_current_user_id();
        $show_hightlight = get_user_meta($user_id, 'show_highlight', true);
        if (!isset($show_hightlight) || $show_hightlight == '') {
            $show_hightlight = 1;
        }
        $show_help = get_option('wpv_content_template_show_help');
        ?>
		<input type="hidden" name="show_highlight" class="js-wpv-ct-syntax-highlight-on" value="<?php 
        echo esc_attr($show_hightlight);
        ?>
" />
		<input type="hidden" name="show_help" class="js-wpv-ct-show-help" value="<?php 
        echo esc_attr($show_help);
        ?>
" />
		<?php 
        $template_extra_css = get_post_meta($post->ID, '_wpv_view_template_extra_css', true);
        $template_extra_js = get_post_meta($post->ID, '_wpv_view_template_extra_js', true);
        $template_extra_state = get_post_meta($post->ID, '_wpv_view_template_extra_state', true);
        if (empty($template_extra_state)) {
            $template_extra_state = array();
        }
        $css_editor_state = 'off';
        $js_editor_state = 'off';
        if (isset($template_extra_state['css'])) {
            if ($template_extra_state['css'] === 'on') {
                $css_editor_state = 'on';
            }
        }
        if (isset($template_extra_state['js'])) {
            if ($template_extra_state['js'] === 'on') {
                $js_editor_state = 'on';
            }
        }
        ?>
		<input type="hidden" name="_wpv_view_template_extra_state[css]" id="js-wpv-content-template-editor-state-css" value="<?php 
        echo esc_attr($css_editor_state);
        ?>
" />
        <input type="hidden" name="_wpv_view_template_extra_state[js]" id="js-wpv-content-template-editor-state-js" value="<?php 
        echo esc_attr($js_editor_state);
        ?>
" />
        <p>
            <?php 
        _e('Here you can modify specific CSS and javascript to be used with this Content Template.', 'wpv-views');
        ?>
        </p>
		<ul id="wpv-content-template-extra" class="wpv-content-template-extra js-wpv-content-template-extra">
			<li class="wpv-has-itembox-header js-wpv-content-template-extra-item js-wpv-content-template-extra-css">
				<div class="wpv-content-template-extra-header wpv-itembox-header">
					<strong>
						<?php 
        _e('CSS editor - add custom CSS to this Content Template', 'wpv-views');
        ?>
					</strong>
					<button class="button button-secondary button-small wpv-code-editor-toggler js-wpv-code-editor-toggler" data-kind="css" data-target="content-template-css-editor">
						<i class="icon-pushpin js-wpv-textarea-full" style="<?php 
        if (empty($template_extra_css) || $css_editor_state == 'on') {
            echo ' display:none;';
        }
        ?>
"></i>
						<span class="js-wpv-text-holder">
							<?php 
        if ($css_editor_state != 'on' || empty($template_extra_css)) {
            _e('Open CSS editor', 'wpv-views');
        } else {
            _e('Close CSS editor', 'wpv-views');
        }
        ?>
						</span>
					</button>
				</div>
				<div class="code-editor content-template-css-editor wpv-code-editor-closed js-wpv-code-editor js-wpv-content-template-css-editor<?php 
        if ($css_editor_state != 'on' || empty($template_extra_css)) {
            echo ' js-wpv-code-editor-closed hidden';
        }
        ?>
">
					<textarea name="_wpv_view_template_extra_css" id="_wpv_view_template_extra_css" cols="97" rows="10"><?php 
        echo esc_textarea($template_extra_css);
        ?>
</textarea>
					<?php 
        wpv_formatting_help_extra_css('');
        ?>
				</div>
			</li>
			
			<li class="wpv-has-itembox-header js-wpv-content-template-extra-item js-wpv-content-template-extra-js">
				<div class="wpv-content-template-extra-header wpv-itembox-header">
					<strong>
						<?php 
        _e('JS editor - add custom javascript to this Content Template', 'wpv-views');
        ?>
					</strong>
					<button class="button button-secondary button-small wpv-code-editor-toggler js-wpv-code-editor-toggler" data-kind="js" data-target="content-template-js-editor">
						<i class="icon-pushpin js-wpv-textarea-full" style="<?php 
        if (empty($template_extra_js) || $js_editor_state == 'on') {
            echo ' display:none;';
        }
        ?>
"></i>
						<span class="js-wpv-text-holder">
							<?php 
        if ($js_editor_state != 'on' || empty($template_extra_js)) {
            _e('Open JS editor', 'wpv-views');
        } else {
            _e('Close JS editor', 'wpv-views');
        }
        ?>
						</span>
					</button>
				</div>
				<div class="code-editor content-template-js-editor wpv-code-editor-closed js-wpv-code-editor js-wpv-content-template-js-editor<?php 
        if ($js_editor_state != 'on' || empty($template_extra_js)) {
            echo ' js-wpv-code-editor-closed hidden';
        }
        ?>
">
					<textarea name="_wpv_view_template_extra_js" id="_wpv_view_template_extra_js" cols="97" rows="10"><?php 
        echo esc_textarea($template_extra_js);
        ?>
</textarea>
					<?php 
        wpv_formatting_help_extra_js('');
        ?>
				</div>
			</li>
		</ul>
    <?php 
    }
function add_view_filter_extra($view_settings, $view_id)
{
    $is_section_hidden = false;
    if (isset($view_settings['sections-show-hide']) && isset($view_settings['sections-show-hide']['filter-extra']) && 'off' == $view_settings['sections-show-hide']['filter-extra']) {
        $is_section_hidden = true;
    }
    $hidden_class = $is_section_hidden ? 'hidden' : '';
    /* An additional class js-wpv-filter-extra-section was added to the container div, so we can be sure we can
     * distinguish it in JS.
     *
     * Since 1.7 we're showing the 'content' (Filter and Loop Output Integration, see add_view_content()) section on View
     * edit page at the same time as this one, so they have to share the "js-wpv-settings-filter-extra" class (because
     * in Screen options we're changing visibility of elements with "js-wpv-settings-{$section_name}").
     *
     * So, in case you need to select this particular element in JS, please use the "js-wpv-filter-extra-section" class,
     * which is unique.
     */
    $section_help_pointer = WPV_Admin_Messages::edit_section_help_pointer('filters_html_css_js');
    ?>
	<div class="wpv-setting-container wpv-setting-container-horizontal wpv-settings-filter-markup js-wpv-settings-filter-extra js-wpv-filter-extra-section <?php 
    echo $hidden_class;
    ?>
">

		<div class="wpv-settings-header">
			<h3>
				<?php 
    _e('Filter', 'wpv-views');
    ?>
				<i class="icon-question-sign js-display-tooltip" 
					data-header="<?php 
    echo esc_attr($section_help_pointer['title']);
    ?>
" 
					data-content="<?php 
    echo esc_attr($section_help_pointer['content']);
    ?>
">
				</i>
			</h3>
		</div>
		<?php 
    $listing = '';
    $purpose = 'full';
    if (isset($view_settings['query_type']) && is_array($view_settings['query_type']) && in_array('posts', $view_settings['query_type'])) {
        $listing = 'posts';
    }
    if (isset($view_settings['view_purpose'])) {
        $purpose = $view_settings['view_purpose'];
    }
    $controls_per_kind = wpv_count_filter_controls($view_settings);
    if (isset($controls_per_kind['missing']) && is_array($controls_per_kind['missing']) && !empty($controls_per_kind['missing'])) {
        ?>
		<div class="toolset-help js-wpv-missing-filter-container"<?php 
        echo $listing == 'posts' ? '' : ' style="display:none"';
        ?>
">
			<div class="toolset-help-content">
				<?php 
        _e('This View has some query filters that are missing from the form. Maybe you have removed them:', 'wpv-views');
        ?>
				<ul class="js-wpv-filter-missing">
				<?php 
        foreach ($controls_per_kind['missing'] as $missed) {
            ?>
					<li class="js-wpv-missing-filter" data-type="<?php 
            echo esc_attr($missed['type']);
            ?>
" data-name="<?php 
            echo esc_attr($missed['name']);
            ?>
">
						<?php 
            echo sprintf(__('Filter by <strong>%s</strong>', 'wpv-views'), $missed['name']);
            ?>
					</li>
					<?php 
        }
        ?>
				</ul>
				<?php 
        _e('Can they also be removed from the query filtering?', 'wpv-views');
        ?>
				<p>
					<a href="#" class="button button-primary js-wpv-filter-missing-delete" data-nonce="<?php 
        echo wp_create_nonce('wpv_view_filter_missing_delete');
        ?>
"><?php 
        _e('Yes (recommended)', 'wpv-views');
        ?>
</a> <a href="#" class="button button-secondary js-wpv-filter-missing-close"><?php 
        _e('No', 'wpv-views');
        ?>
</a>
				</p>
			</div>
			<div class="toolset-help-sidebar">
				<div class="toolset-help-sidebar-ico"></div>
			</div>
		</div>
		<?php 
    } else {
        ?>
		<div class="toolset-help js-wpv-missing-filter-container" style="display:none"></div>
		<?php 
    }
    $controls_count = 0;
    $controls_count = $controls_per_kind['cf'] + $controls_per_kind['tax'] + $controls_per_kind['pr'] + $controls_per_kind['search'];
    ?>
		<div class="toolset-alert js-wpv-no-filters-container"<?php 
    if ($listing == 'posts' && $purpose == 'parametric') {
        if ($controls_count != 0) {
            echo ' style="display:none"';
        }
    } else {
        echo ' style="display:none"';
    }
    ?>
">
			<p>
				<?php 
    _e('Remember to add filters here. Right now, this parametric search has no filter items.', 'wpv-views');
    ?>
			</p>
		</div>

		<div class="wpv-setting">

			<div class="js-error-container js-wpv-parametric-error-container"></div>
			<div class="code-editor js-code-editor filter-html-editor" data-name="filter-html-editor" >
				<div class="code-editor-toolbar js-code-editor-toolbar">
					<ul class="js-wpv-filter-edit-toolbar">
						<?php 
    do_action('wpv_parametric_search_buttons', 'wpv_filter_meta_html_content');
    do_action('wpv_views_fields_button', 'wpv_filter_meta_html_content');
    ?>
						<li class="js-editor-pagination-button-wrapper">
							<button class="button-secondary js-code-editor-toolbar-button js-wpv-pagination-popup" data-content="wpv_filter_meta_html_content">
								<i class="icon-pagination"></i>
								<span class="button-label"><?php 
    _e('Pagination controls', 'wpv-views');
    ?>
</span>
							</button>
						</li>
						<li>
							<button class="button-secondary js-code-editor-toolbar-button js-wpv-media-manager" data-id="<?php 
    echo esc_attr($view_id);
    ?>
" data-content="wpv_filter_meta_html_content">
								<i class="icon-picture"></i>
								<span class="button-label"><?php 
    _e('Media', 'wpv-views');
    ?>
</span>
							</button>
						</li>
					</ul>
				</div>
				<textarea cols="30" rows="10" id="wpv_filter_meta_html_content" autocomplete="off" name="_wpv_settings[filter_meta_html]"><?php 
    echo isset($view_settings['filter_meta_html']) ? esc_textarea($view_settings['filter_meta_html']) : '';
    ?>
</textarea>
				<?php 
    wpv_formatting_help_filter();
    ?>
			</div>
			
			<ul id="wpv-filter-meta-html-extra" class="wpv-filter-meta-html-extra js-wpv-filter-meta-html-extra">
				<li class="wpv-has-itembox-header js-wpv-filter-meta-html-extra-item js-wpv-filter-meta-html-extra-css">
					<?php 
    $filter_extra_css = isset($view_settings['filter_meta_html_css']) ? $view_settings['filter_meta_html_css'] : '';
    ?>
					<div class="wpv-filter-meta-html-extra-header wpv-itembox-header">
						<strong>
							<?php 
    _e('CSS editor', 'wpv-views');
    ?>
						</strong>
						<button class="button button-secondary button-small wpv-code-editor-toggler js-wpv-code-editor-toggler" data-kind="css" data-target="filter-css-editor">
							<i class="icon-pushpin js-wpv-textarea-full" style="<?php 
    if (empty($filter_extra_css)) {
        echo ' display:none;';
    }
    ?>
"></i>
							<span class="js-wpv-text-holder"><?php 
    _e('Open CSS editor', 'wpv-views');
    ?>
</span>
						</button>
					</div>
					<div class="code-editor filter-css-editor wpv-code-editor-closed js-wpv-code-editor js-wpv-filter-css-editor js-wpv-code-editor-closed hidden">
						<div class="code-editor-toolbar js-code-editor-toolbar">
							<ul>
								<li>
									<button class="button-secondary js-code-editor-toolbar-button js-wpv-media-manager" data-id="<?php 
    echo esc_attr($view_id);
    ?>
" data-content="wpv_filter_meta_html_css">
										<i class="icon-picture"></i>
										<span class="button-label"><?php 
    _e('Media', 'wpv-views');
    ?>
</span>
									</button>
								</li>
							</ul>
						</div>
						<textarea cols="30" rows="10" id="wpv_filter_meta_html_css" autocomplete="off" name="_wpv_settings[filter_meta_html_css]"><?php 
    echo esc_textarea($filter_extra_css);
    ?>
</textarea>
						<?php 
    wpv_formatting_help_extra_css('filter');
    ?>
					</div>
				</li>
				<li class="wpv-has-itembox-header js-wpv-filter-meta-html-extra-item js-wpv-filter-meta-html-extra-js">
					<?php 
    $filter_extra_js = isset($view_settings['filter_meta_html_js']) ? $view_settings['filter_meta_html_js'] : '';
    ?>
					<div class="wpv-filter-meta-html-extra-header wpv-itembox-header">
						<strong>
							<?php 
    _e('JS editor', 'wpv-views');
    ?>
						</strong>
						<button class="button button-secondary button-small wpv-code-editor-toggler js-wpv-code-editor-toggler" data-kind="js" data-target="filter-js-editor">
							<i class="icon-pushpin js-wpv-textarea-full" style="<?php 
    if (empty($filter_extra_js)) {
        echo ' display:none;';
    }
    ?>
"></i>
							<span class="js-wpv-text-holder"><?php 
    _e('Open JS editor', 'wpv-views');
    ?>
</span>
						</button>
					</div>
					<div class="code-editor filter-js-editor wpv-code-editor-closed js-wpv-code-editor js-wpv-filter-js-editor js-wpv-code-editor-closed hidden">
						<div class="code-editor-toolbar js-code-editor-toolbar">
							<ul>
								<li>
									<button class="button-secondary js-code-editor-toolbar-button js-wpv-media-manager" data-id="<?php 
    echo esc_attr($view_id);
    ?>
" data-content="wpv_filter_meta_html_js">
										<i class="icon-picture"></i>
										<span class="button-label"><?php 
    _e('Media', 'wpv-views');
    ?>
</span>
									</button>
								</li>
							</ul>
						</div>
						<textarea cols="30" rows="10" id="wpv_filter_meta_html_js" autocomplete="off" name="_wpv_settings[filter_meta_html_js]"><?php 
    echo esc_textarea($filter_extra_js);
    ?>
</textarea>
						<?php 
    wpv_formatting_help_extra_js('filter');
    ?>
					</div>
				</li>
			</ul>

			<p class="update-button-wrap js-wpv-update-button-wrap">
				<span class="js-wpv-message-container"></span>
				<button data-success="<?php 
    echo esc_attr(__('Updated', 'wpv-views'));
    ?>
" data-unsaved="<?php 
    echo esc_attr(__('Not saved', 'wpv-views'));
    ?>
" data-nonce="<?php 
    echo wp_create_nonce('wpv_view_filter_extra_nonce');
    ?>
" class="js-wpv-filter-extra-update button-secondary" disabled="disabled"><?php 
    _e('Update', 'wpv-views');
    ?>
</button>
			</p>
		</div>

	</div>
	
	<div id="js-wpv-parametric-search-dialogs" class="popup-window-container"> <!-- Use this element as a container for all popup windows. This element is hidden. -->
		
		<!-- Dialogs for settings when inserting shortcodes -->
		
		<div class="wpv-dialog wpv-dialog-parametric-filter wpv-dialog-search-box js-search-box-dialog"> <!-- Popup for the search box addition -->
			
			<div class="wpv-dialog-header">
				<h2><?php 
    _e('Create a search box for this parametric search', 'wpv-views');
    ?>
</h2>
				<i class="icon-remove js-dialog-close"></i>
			</div>
			
			<div class="js-search_shortcode_label-wrap wpv-dialog-content">
				<h3>
					<?php 
    _e('Where to search', 'wpv-views');
    ?>
				</h3>
				<p>
					<input value="full_content" name="wpv-post-search-options-dialog" class="js-wpv-post-search-options-dialog" checked="checked" id="search-shortcode-full" type="radio">
					<label for="search-shortcode-full" class="label-alignleft"><?php 
    _e('Post content and title', 'wpv-views');
    ?>
</label>
				</p>
				<p>
					<input value="just_title" name="wpv-post-search-options-dialog" class="js-wpv-post-search-options-dialog" id="search-shortcode-title" type="radio">
					<label for="search-shortcode-title" class="label-alignleft"><?php 
    _e('Just post title', 'wpv-views');
    ?>
</label>
				</p>
			</div>
			
			<div class="js-errors-in-parametric-box"></div>
			
			<div class="wpv-dialog-footer">
				<button class="button js-dialog-close" id="js_parametric_cancel"><?php 
    _e('Cancel', 'wpv-views');
    ?>
</button>
				<button class="button-primary js-code-editor-toolbar-button js-parametric-add-search-box"><?php 
    _e('Insert search box', 'wpv-views');
    ?>
</button>
			</div>
			
		</div> <!-- End of popup for the search box addition -->
		
		<div class="wpv-dialog wpv-dialog-parametric-filter wpv-dialog-search-override js-search-override-dialog"> <!-- Popup for the search override -->
			<div class="wpv-dialog-header">
				<h2><?php 
    _e('Complete the search filter for this parametric search', 'wpv-views');
    ?>
</h2>
				<i class="icon-remove js-dialog-close"></i>
			</div>
			
			<div class="js-search_shortcode_override_label-wrap wpv-dialog-content">
				<h3><?php 
    _e('Complete the search filter', 'wpv-views');
    ?>
</h3>
				<p class="js-wpv-search-filter-override-var js-wpv-search-filter-override-valid">
				<?php 
    _e('This View already has a valid search filter, but it is missing the search box.', 'wpv-views');
    ?>
				</p>
				<p class="js-wpv-search-filter-override-var js-wpv-search-filter-override-valid">
				<?php 
    _e('You can override the filter settings and add the search box here.', 'wpv-views');
    ?>
				</p>
				<p class="js-wpv-search-filter-override-var js-wpv-search-filter-override-specific">
				<?php 
    _e('This View already has a filter set to filter by a specific string.', 'wpv-views');
    ?>
				</p>
				<p class="js-wpv-search-filter-override-var js-wpv-search-filter-override-specific">
				<?php 
    _e('You can fix this filter here.', 'wpv-views');
    ?>
				</p>
				<p class="js-wpv-search-filter-override-var js-wpv-search-filter-override-missing">
				<?php 
    _e('This View already has a content search box, but the relevant filter is missing.', 'wpv-views');
    ?>
				</p>
				<p class="js-wpv-search-filter-override-var js-wpv-search-filter-override-missing">
				<?php 
    _e('You can add this filter here.', 'wpv-views');
    ?>
				</p>
				
				<h3>
					<?php 
    _e('Where to search', 'wpv-views');
    ?>
				</h3>
				<p>
					<input value="full_content" name="wpv-post-search-override-dialog" class="js-wpv-post-search-override-dialog" checked="checked" id="search-override-full" type="radio">
					<label for="search-override-full" class="label-alignleft"><?php 
    _e('Post content and title', 'wpv-views');
    ?>
</label>
				</p>
				<p>
					<input value="just_title" name="wpv-post-search-override-dialog" class="js-wpv-post-search-override-dialog" id="search-override-title" type="radio">
					<label for="search-override-title" class="label-alignleft"><?php 
    _e('Just post title', 'wpv-views');
    ?>
</label>
				</p>
			</div>
			
			<div class="wpv-dialog-footer">
				<button class="button js-dialog-close" id="js_parametric_cancel"><?php 
    _e('Cancel', 'wpv-views');
    ?>
</button>
				<button class="button-primary js-code-editor-toolbar-button js-parametric-add-search-override"><?php 
    _e('Create search filter', 'wpv-views');
    ?>
</button>
			</div>
		</div> <!-- End of popup for the search override -->
		
		<div class="wpv-dialog wpv-dialog-parametric-filter wpv-dialog-submit-button js-submit-button-dialog"> <!-- Popup for the submit button addition -->
			
			<div class="wpv-dialog-header">
				<h2><?php 
    _e('Create a submit button for this parametric search.', 'wpv-views');
    ?>
</h2>
				<i class="icon-remove js-dialog-close"></i>
			</div>
			
			<div class="js-submit_shortcode_label-wrap wpv-dialog-content">
				<p>
					<label for="submit_shortcode_label" class="label-alignleft"><?php 
    _e('Button label:', 'wpv-views');
    ?>
</label>
					<input value="<?php 
    echo esc_attr(__('Search', 'wpv-views'));
    ?>
" id="submit_shortcode_label" type="text">
					<!--<span class="wpv-helper-text">lorem</span>-->
				</p>
				<p>
					<label for="submit_shortcode_button_classname" class="label-alignleft"><?php 
    _e('Button classname:', 'wpv-views');
    ?>
</label>
					<input value="" id="submit_shortcode_button_classname" type="text">
					<span class="wpv-helper-text"><?php 
    _e('Use this to add your own styling', 'wpv-views');
    ?>
</span>
				</p>
				<p>
					<label for="submit_shortcode_button_tag" class="label-alignleft"><?php 
    _e('Button HTML tag:', 'wpv-views');
    ?>
</label>
					<select id="submit_shortcode_button_tag">
						<option selected=·selected· value="input"><?php 
    _e('Input', 'wpv-views');
    ?>
</option>
						<option value="button"><?php 
    _e('Button', 'wpv-views');
    ?>
</option>
					</select>
					<span class="wpv-helper-text"><?php 
    _e('You can use an input or a button', 'wpv-views');
    ?>
</span>
				</p>
			</div>
			
			<div class="js-errors-in-parametric-box"></div>
			
			<div class="wpv-dialog-footer">
				<button class="button js-dialog-close" id="js_parametric_cancel"><?php 
    _e('Cancel', 'wpv-views');
    ?>
</button>
				<button class="button-primary js-code-editor-toolbar-button js-parametric-add-submit-short-tag-label"><?php 
    _e('Insert submit button', 'wpv-views');
    ?>
</button>
			</div>
			
		</div> <!-- End of popup for the submit button addition -->
		
		<div class="wpv-dialog wpv-dialog-parametric-filter wpv-dialog-reset-button js-reset-button-dialog"> <!-- Popup for the reset button addition -->
			
			<div class="wpv-dialog-header">
				<h2><?php 
    _e('Create a reset button for this parametric search.', 'wpv-views');
    ?>
</h2>
				<i class="icon-remove js-dialog-close"></i>
			</div>
			
			<div class="js-reset_shortcode_label-wrap wpv-dialog-content">
				<p>
					<label for="reset_shortcode_label" class="label-alignleft"><?php 
    _e('Button label:', 'wpv-views');
    ?>
</label>
					<input value="<?php 
    echo esc_attr(__('Reset', 'wpv-views'));
    ?>
" id="reset_shortcode_label" type="text">
					<!--<span class="wpv-helper-text">lorem</span>-->
				</p>
				<p>
					<label for="reset_shortcode_button_classname" class="label-alignleft"><?php 
    _e('Button classname:', 'wpv-views');
    ?>
</label>
					<input value="" id="reset_shortcode_button_classname" type="text">
					<span class="wpv-helper-text"><?php 
    _e('Use this to add your own styling', 'wpv-views');
    ?>
</span>
				</p>
				<p>
					<label for="reset_shortcode_button_tag" class="label-alignleft"><?php 
    _e('Button HTML tag:', 'wpv-views');
    ?>
</label>
					<select id="reset_shortcode_button_tag">
						<option selected=·selected· value="input"><?php 
    _e('Input', 'wpv-views');
    ?>
</option>
						<option value="button"><?php 
    _e('Button', 'wpv-views');
    ?>
</option>
					</select>
					<span class="wpv-helper-text"><?php 
    _e('You can use an input or a button', 'wpv-views');
    ?>
</span>
				</p>
			</div>
			
			<div class="js-errors-in-parametric-box"></div>
			
			<div class="wpv-dialog-footer">
				<button class="button js-dialog-close" id="js_parametric_cancel"><?php 
    _e('Cancel', 'wpv-views');
    ?>
</button>
				<button class="button-primary js-code-editor-toolbar-button js-parametric-add-reset-short-tag-label"><?php 
    _e('Insert clear form button', 'wpv-views');
    ?>
</button>
			</div>
			
		</div> <!-- End of popup for the reset button addition -->
		
		<div class="wpv-dialog wpv-dialog-parametric-filter wpv-dialog-spinner-button js-spinner-button-dialog"> <!-- Popup for the spinner button addition -->
			
			<div class="wpv-dialog-header">
				<h2><?php 
    _e('Create a spinner container for this parametric search.', 'wpv-views');
    ?>
</h2>
				<i class="icon-remove js-dialog-close"></i>
			</div>
			
			<div class="js-spinner_shortcode_label-wrap wpv-dialog-content">
				<p>
					<label for="spinner_shortcode_container_type" class="label-alignleft"><?php 
    _e('Container type:', 'wpv-views');
    ?>
</label>
					<select id="spinner_shortcode_container_type">
						<option value="div"><?php 
    _e('Division', 'wpv-views');
    ?>
</option>
						<option value="p"><?php 
    _e('Paragraph', 'wpv-views');
    ?>
</option>
						<option value="span"><?php 
    _e('Span', 'wpv-views');
    ?>
</option>
					</select>
					<span class="wpv-helper-text"><?php 
    _e('You can display your spinner inside different kind of HTML elements', 'wpv-views');
    ?>
</span>
				</p>
				<p>
					<label for="spinner_shortcode_container_classname" class="label-alignleft"><?php 
    _e('Container classname:', 'wpv-views');
    ?>
</label>
					<input value="" id="spinner_shortcode_container_classname" type="text">
					<span class="wpv-helper-text"><?php 
    _e('Use this to add your own styling', 'wpv-views');
    ?>
</span>

					<label for="spinner_shortcode_spinner_position" class="label-alignleft"><?php 
    _e('Spinner placement:', 'wpv-views');
    ?>
</label>
					<select id="spinner_shortcode_spinner_position">
						<option value="none"><?php 
    _e('Do not show the spinner', 'wpv-views');
    ?>
</option>
						<option value="before"><?php 
    _e('Before the text', 'wpv-views');
    ?>
</option>
						<option value="after"><?php 
    _e('After the text', 'wpv-views');
    ?>
</option>
					</select>
					<span class="wpv-helper-text"><?php 
    _e('Whether the spinner should be added at the beginning or the end of the container', 'wpv-views');
    ?>
</span>
				</p>
				<p>
					<label for="spinner_shortcode_spinner_image" class="label-alignleft"><?php 
    _e('Spinner image:', 'wpv-views');
    ?>
</label>
					<ul style="overflow:hidden">
					<?php 
    $has_spinner_image_checked = false;
    $available_spinners = array();
    $available_spinners = apply_filters('wpv_admin_available_spinners', $available_spinners);
    foreach ($available_spinners as $av_spinner) {
        ?>
						<li style="min-width:49%;float:left;">
							<label>
								<input type="radio" class="js-wpv-ps-spinner-image" name="wpv-dps-spinner-image" value="<?php 
        echo esc_url($av_spinner['url']);
        ?>
" <?php 
        if (!$has_spinner_image_checked) {
            echo ' checked="checked"';
        }
        ?>
 />
								<img src="<?php 
        echo esc_url($av_spinner['url']);
        ?>
" title="<?php 
        echo esc_attr($av_spinner['title']);
        ?>
" />
							</label>
						</li>
						<?php 
        $has_spinner_image_checked = true;
    }
    ?>
					</ul>
					<!--<span class="wpv-helper-text">lorem</span>-->
				</p>
				<p>
					<label for="spinner_shortcode_content" class="label-alignleft"><?php 
    _e('Container text:', 'wpv-views');
    ?>
</label>
					<textarea id="spinner_shortcode_content"></textarea>
					<span class="wpv-helper-text"><?php 
    _e('This will be shown inside the container and along with the spinner', 'wpv-views');
    ?>
</span>
				</p>
			</div>
			
			<div class="js-errors-in-parametric-box"></div>
			
			<div class="wpv-dialog-footer">
				<button class="button js-dialog-close" id="js_parametric_cancel"><?php 
    _e('Cancel', 'wpv-views');
    ?>
</button>
				<button class="button-primary js-code-editor-toolbar-button js-parametric-add-spinner-short-tag-label"><?php 
    _e('Insert spinner container', 'wpv-views');
    ?>
</button>
			</div>
			
		</div> <!-- End of popup for the spinner button addition -->
		
		<!-- Pointer contents -->
		
		
	
	</div><!-- popup-window-container end -->
<?php 
}