<?php
/**
 * All options from the meta box are in here
 */


global $FLO_SLIDER;

wp_nonce_field( 'flo_slider_editor', 'flo_slider_editor_nonce' );
?>

<!-- Metabox single app -->
<div  ng-app="FloSliderApp" id="floslider-app" ng-controller="FloSliderCtrl" class="flo-slider-app" style="display:none">

    <!-- Slideshow Controller -->
    <div class="slideshow-controller"  >

        <!-- Slider Options Wrapper -->

        <div class="slider-options-wrapper bootstrap-inside ">

                <div class="slider-options-first">
                    <!-- Shortcode option -->
                    <h2 class="flo-slider-labels"><?php _e('Shortcode for this slider', 'flo-slider') ?></h2>
                    <div class="shortcode margin-b-20">

                    <div class="flo-slider-help">

                        <?php _e('This code should all be pasted in the page content, at the place you want the slideshow to appear.', 'flo-slider') ?>

                    </div>

                        <div ng-if=" ! postid " ><?php _e('Press "Publish" to see the shortcode ;)', 'flo-slider') ?></div>

                        <input ng-model="shortcode"  ng-readonly="true" ng-if=" postid " onclick="select()"  />

                    </div>

                    <!-- Slider desktop height -->
                    <span class="flo-icon desktop"></span><h2 class="flo-slider-labels"><?php _e('Slider desktop height', 'flo-slider') ?></h2>
                    <div class="flo-slider-option-input margin-b-20">
                        <input ng-model="slideshow.desktop_height" />
                    </div>

                    <!-- Slider mobile height -->
                    <span class="flo-icon mobile"></span><h2 class="flo-slider-labels"><?php _e('Slider mobile height', 'flo-slider') ?></h2>
                    <div class="flo-slider-option-input margin-b-20">
                        <input ng-model="slideshow.mobile_height" />
                    </div>

                    <!-- Custom CSS Classes per slideshow option -->
                    <span class="flo-icon code"></span><h2 class="flo-slider-labels"><?php _e('Custom CSS Class', 'flo-slider') ?></h2>
                    <div class="flo-slider-option-input margin-b-20">
                        <input ng-model="slideshow.css_classes" />
                    </div>

                    <!--Misc options-->
                    <span class="flo-icon code"></span><h2 class="flo-slider-labels"><?php _e('Misc options', 'flo-slider') ?></h2>

                    <div class="flo-slider-option-input margin-b-20">
                        <div class="control-group">

                            <label class="control-label flo-inline-label label-left"><?php _e( 'Controls color:', 'flo-slider' );?></label>
                            <input flo-color-picker ng-model="slideshow.controls_color"/>

                            <label class="control-label flo-inline-label label-left" style="clear:both;"><?php _e( 'Controls secondary color:', 'flo-slider' );?></label>
                            <input flo-color-picker ng-model="slideshow.controls_secondary_color"/>
                            <div class="clear"></div>

                            <!-- Auto color change -->
                            <label class="control-label flo-inline-label label-left"><?php _e( 'Auto change content color:', 'flo-slider' );?></label>
                            <select flo-switch ng-model="slideshow.auto_color" class="flo-multiswitch">
                                   <option value="yes">Yes</option>
                                   <option value="no">No</option>
                            </select>
                            <div class="clear"></div>

                            <!-- Slideshow image position -->
                            <label class="control-label flo-inline-label label-left"><?php _e( 'Slideshow image position:', 'flo-slider' );?></label>
                            <select flo-switch ng-model="slideshow.background_size" class="flo-multiswitch">
                                   <option value="cover">Cover</option>
                                   <option value="contain">Contain</option>
                            </select>                        
                            <div class="clear margin-b-20"></div>

                            <!-- Autoplay -->
                            <label class="control-label flo-inline-label label-left"><?php _e( 'Autoplay:', 'flo-slider' );?></label>
                            <select flo-switch ng-model="slideshow.autoplay" class="flo-multiswitch">
                                   <option value="yes">Yes</option>
                                   <option value="no">No</option>
                            </select>
                            <div class="clear"></div>

                            <!-- Autoplay speed -->
                            <label class="control-label flo-inline-label label-left"><?php _e( 'Autoplay speed:', 'flo-slider' );?></label>
                            <input style='width: auto;' ng-model="slideshow.autoplay_speed" />
                            <div class="clear"></div>

                        </div>

                    </div>

                    <!-- Default slide options -->
                    <span class="flo-icon gear"></span><h2 class="flo-slider-labels"><?php _e('Default current slides options', 'flo-slider') ?></h2>

                    <div class="flo-slider-option-input margin-b-20">
                        <!-- Title color -->
                        <div class="control-group">
                            <label class="control-label"><?php _e( 'Title color / Size', 'flo-slider' );?></label>
                            <div class="controls">
                                <input flo-color-picker ng-model="slideshow.title_color"/>

                                <select flo-switch ng-model="slideshow.title_heading" class="flo-multiswitch">
                                       <option value="h1">H1</option>
                                       <option value="h2">H2</option>
                                       <option value="h3">H3</option>
                                       <option value="h4">H4</option>
                                       <option value="h5">H5</option>
                                       <option value="h6">H6</option>
                                </select>

                            </div>
                        </div>

                        <!-- Description color -->
                        <div class="control-group">
                            <label class="control-label"><?php _e( 'Subtitle color / Size', 'flo-slider' );?></label>
                            <div class="controls">
                                <input flo-color-picker ng-model="slideshow.subtitle_color"/>

                                <select flo-switch ng-model="slideshow.subtitle_heading" class="flo-multiswitch">
                                       <option value="h1">H1</option>
                                       <option value="h2">H2</option>
                                       <option value="h3">H3</option>
                                       <option value="h4">H4</option>
                                       <option value="h5">H5</option>
                                       <option value="h6">H6</option>
                                </select>
                            </div>
                        </div>


                    </div> <!-- end default options -->

                </div>

                <div class="slider-options-last">

                    <!-- Slider Types -->
                    <h2 class="flo-slider-labels"><?php _e('Current Slider Type', 'flo-slider') ?></h2>
                    <select class="margin-b-20" flo-image-switch ng-model="slideshow.type"  >

                        <?php foreach ($FLO_SLIDER->slide_types() as $id => $type) {

                            echo '<option value="'.$id .'" image="'. $type['image'] .'" hover="'. $type['hover'] .'"  >' . $type['type'] . '</option>' ;

                        } ?>


                    </select>


                </div>






        </div> <!-- Slider Options End -->


        <textarea style="display:none!important" name="floslider_settings">{{slideshow | json }}</textarea>
    </div>


    <!-- Slide Controller -->
    <div  class="bootstrap-inside slide-controller">

        <div class="top-buttons " ng-if=" slides.length > 20 ">

            <?php include 'slideshow-box-buttons.php' ?>

        </div>

        <h2 class="flo-slider-labels"><?php _e('Current Slider Slides', 'flo-slider') ?></h2>

        <div class="image-count pull-right" ng-if="slides.length" ><?php _e('Slides:', 'flo-slider') ?> {{slides.length}}</div>

        <div class="flo-no-images" ng-if=" ! slides.length ">

            <h2 class="flo-no-image-text"></h2>


        </div>
 

       <!-- Slide image list -->
        <ul id="flo-slider-images-wrapper" class="flo-slider-images-wrapper nav nav-tabs media-list" ui-sortable="sortableOptions" ng-model="slides">
            <li ng-repeat="slide in slides track by slide.unique" ng-class="{active: slide == current}" class="flo-slider-image media">
                <a class="slide-image-anchor"

                    href="javascript:void(0);"
                    ng-click="setCurrent(slide)"
                    ng-style="{'background-image':'url(' + getImage(slide) + ')'}" >



                    <img class="media-object-placeholder" ng-src="{{ noImage }}">

                    <span class="delete-slide btn-xs btn btn-danger" ng-click="removeSlide(slide)"><i class="icon-trash icon-white"></i></span>

                </a>

            </li>
        </ul>

        <?php include 'slideshow-box-buttons.php' ?>

        <?php include 'slideshow-box-popup.php' ?>



        <!--  All the data stored in here -->
        <textarea style="display:none!important" name="floslider_slides">{{slides | json }}</textarea>
     <!-- <br>
       <pre>{{slides | json }}</pre>    -->

    </div>

    <div class="publish-options">

        <h2 class="flo-slider-labels"><?php _e('Publish options', 'flo-slider') ?></h2>

        <div class="flo-slider-help">

            <?php _e('On slider creation, it is mandatory to publish the slider to make use of it. Later on you can just press "Save All Changes" button to safely save all settings and slides, using AJAX. You can of course use the default classic "Publish" button, but you\'ll have to wait a reload ;) . Note: use "Publish" if you change the slider title.', 'flo-slider') ?>

        </div>

        <div   class="pull-right flo-margin-btn " ng-if=" postid "  >
            <span

                confirm-text="<?php _e('Yeah, trash it', 'flo-slider') ?>"
                confirmed-click="trash_slider()"
                ng-confirm-click="<?php _e('Are you sure you want to delete current slider? <br>Anyway, you can restore it later from Trash...', 'flo-slider') ?>"

                class="flo-slider-button white "><?php _e( 'Move to trash', 'flo-slider' );?></span>
        </div>


        <div ng-class="{'large-btn': ! postid }" class="pull-right flo-margin-btn  "   >
            <span ng-click="save_first()" class="flo-slider-button yellow "><?php _e( 'Publish this slider', 'flo-slider' );?></span>
        </div>


    </div>




</div> <!-- End app -->
