<?php
	global $options;

    if (isset($_GET['page']) && $_GET['page']=='pixgridder_css') {
?>

        <section id="pix_content_loaded">
            <h3><?php _e('Options','pixgridder'); ?>: <small><?php _e('Compile CSS file','pixgridder'); ?></small></h3>

            <?php if (get_option('pixgridder_allow_ajax')=='true') { ?>
            <form action="/" class="dynamic_form ajax_form cf">
            <?php } else { ?>
            <form method="post" class="dynamic_form cf" action="<?php echo admin_url("admin.php?page=pixgridder_admin"); ?>">
            <?php } ?>
            
                <div class="pix_columns cf">
                    <div class="pix_column_divider alignleft"></div><!-- .pix_column_divider -->
                    <div class="pix_column alignleft">

                        <?php if ( apply_filters('pixgridder_display_cssselector', true) === true ) { ?>
                        <label for="pixgridder_css_selector"><?php _e( 'CSS selector', 'pixgridder' ); ?> <small>(<a href="#" data-dialog="<?php _e('The value on this field will be used for the animation only.','pixgridder'); ?>"><?php _e('more info','pixgridder'); ?></a>)</small>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_css_selector'))); ?>" name="pixgridder_css_selector" id="pixgridder_css_selector">
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_opacityms', true) === true ) { ?>
                        <label for="pixgridder_opacity_ms"><?php _e( 'The milliseconds for the fadeIn effect on scroll', 'pixgridder' ); ?> <small>(<a href="#" data-dialog="<?php _e('The fadeIn effect is present also if you run another kind of effect, so by default, this value is a little higher then the value of the other animations.','pixgridder'); ?>"><?php _e('more info','pixgridder'); ?></a>)</small>:</label>
                        <div class="slider_div milliseconds_2">
                            <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_opacity_ms'))); ?>" name="pixgridder_opacity_ms" id="pixgridder_opacity_ms">
                            <div class="slider_cursor"></div>
                        </div><!-- .slider_div -->
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_animationms', true) === true ) { ?>
                        <label for="pixgridder_animation_ms"><?php _e( 'The milliseconds for the animations on scroll (except the fadeIn)', 'pixgridder' ); ?>:</label>
                        <div class="slider_div milliseconds_2">
                            <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_animation_ms'))); ?>" name="pixgridder_animation_ms" id="pixgridder_animation_ms">
                            <div class="slider_cursor"></div>
                        </div><!-- .slider_div -->
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_remove_animation_break', true) === true ) { ?>
                        <label for="pixgridder_remove_animation_break"><?php _e( 'Avoid animation under a certain amount of pixels', 'pixgridder' ); ?>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_remove_animation_break'))); ?>" name="pixgridder_remove_animation_break" id="pixgridder_remove_animation_break">
                        <br>
                        <?php } ?>

                    </div><!-- .pix_column.first -->
                    <div class="pix_column alignright">

                        <?php if ( apply_filters('pixgridder_display_gutterwidth', true) === true ) { ?>
                        <label for="pixgridder_css_gutter"><?php _e( 'Gutter width', 'pixgridder' ); ?>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_css_gutter'))); ?>" name="pixgridder_css_gutter" id="pixgridder_css_gutter">
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_padding', true) === true ) { ?>
                        <label for="pixgridder_css_padding"><?php _e( 'Padding', 'pixgridder' ); ?>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_css_padding'))); ?>" name="pixgridder_css_padding" id="pixgridder_css_padding">
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_gutterheight', true) === true ) { ?>
                        <label for="pixgridder_css_gutter_h"><?php _e( 'Gutter height', 'pixgridder' ); ?>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_css_gutter_h'))); ?>" name="pixgridder_css_gutter_h" id="pixgridder_css_gutter_h">
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_cssbreak', true) === true ) { ?>
                        <label for="pixgridder_css_break"><?php _e( 'Small break point', 'pixgridder' ); ?>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_css_break'))); ?>" name="pixgridder_css_break" id="pixgridder_css_break">
                        <br>
                        <?php } ?>

                        <?php if ( apply_filters('pixgridder_display_mediumbreak', true) === true ) { ?>
                        <label for="pixgridder_medium_break"><?php _e( 'Medium break point', 'pixgridder' ); ?>:</label>
                        <input type="text" value="<?php echo stripslashes(esc_html(get_option('pixgridder_medium_break'))); ?>" name="pixgridder_medium_break" id="pixgridder_medium_break">
                        <br>
                        <?php } ?>

                    </div><!-- .pix_column.second -->

                </div><!-- .pix_columns -->

                <div class="clear"></div>

                <div class="clear large cf"></div>

                <div class="pix_columns cf">

                    <div class="clear"></div>
                    <label for="pixgridder_css_code"><?php _e( 'Your CSS file <small>(the first part only, of course, since the second part will be the list of rows and columns generated by your options)</small>', 'pixgridder' ); ?>:</label>
                    <textarea name="pixgridder_css_code" id="pixgridder_css_code"><?php echo stripslashes(esc_html(get_option('pixgridder_css_code'))); ?></textarea>

                    <br>

                    <label for="pixgridder_include_generated_css">
                        <input type="hidden" name="pixgridder_include_generated_css" value="0">
                        <input type="checkbox" id="pixgridder_include_generated_css" name="pixgridder_include_generated_css" value="true" <?php checked( get_option('pixgridder_include_generated_css'), 'true' ) ?>>
                        <span></span>
                        <?php _e( 'Include the generated CSS into your compile file', 'pixgridder'); ?> <small>(<a href="#" data-dialog="<?php printf( __('Part of the generated CSS is based on the output you set on Pixgridder -> General -> Settings. If you have changed the default values used to replace the HTML comments (%s etc.) you can untick this checkbox and the CSS file will compiled with the data you entered in the <strong>CSS text-editor</strong>, the <strong>CSS selector field</strong>, the <strong>animation milliseconds</strong>.','pixgridder'), '<code>&lt;!--pixgridder:row[cols=$1]--&gt;</code>'); ?>"><?php _e('more info','pixgridder'); ?></a>)</small>
                    </label>

                    <br>

                    <label for="pixgridder_load_css_inline">
                        <input type="hidden" name="pixgridder_load_css_inline" value="0">
                        <input type="checkbox" id="pixgridder_load_css_inline" name="pixgridder_load_css_inline" value="true" <?php checked( get_option('pixgridder_load_css_inline'), 'true' ) ?>>
                        <span></span>
                        <?php _e( 'Put CSS code inside head tag', 'pixgridder'); ?> <small>(<a href="#" data-dialog="<?php _e('If you have problem to load the CSS file to your server, check this option','pixgridder'); ?>"><?php _e('more info','pixgridder'); ?></a>)</small>
                    </label>

                    <br>
                    <br>
                    <br>

                    <input type="hidden" name="compile_css" value="" />
                    <input type="hidden" name="action" value="pixgridder_data_save" />
                    <input type="hidden" name="pixgridder_security" value="<?php echo wp_create_nonce('pixgridder_data'); ?>" />

                    <button type="submit" class="pix_button compile push alignleft"><?php _e('Save, compile and push','pixgridder'); ?></button>

                    <button type="submit" class="pix-save-options pix_button save-css alignright"><?php _e('Save options','pixgridder'); ?><i class="pixgridder-icon-ok-4"></i></button>

                    <br>
                    <br>
                    <br>
                    <br>

                </div><!-- .pix_columns -->

                <div class="clear"></div>

            </form><!-- .dynamic_form -->

        </section><!-- #pix_content_loaded -->
<?php 
	}