<?php 
/**
 * Template part for displaying Featured Slider Section
 *
 *@package Rock Studio
 */

    $data_slick_speed                = rock_studio_get_option( 'data_slick_speed' );
    $data_slick_fade                 = rock_studio_get_option( 'data_slick_fade' );
    $data_slick_infinite             = rock_studio_get_option( 'data_slick_infinite' );
    $data_slick_autoplay             = rock_studio_get_option( 'data_slick_autoplay' );
    $data_slick_draggable            = rock_studio_get_option( 'data_slick_draggable' );
    $number_of_featured_slider_items = rock_studio_get_option( 'number_of_featured_slider_items' ); ?>

    <?php
        if( $data_slick_fade == 0 ) {
            $data_slick_fade = 'false';
        }
        else {
            $data_slick_fade = 'true';
        }
    ?>

    <?php
        if( $data_slick_infinite == 0 ) {
            $data_slick_infinite = 'false';
        }
        else {
            $data_slick_infinite = 'true';
        }
    ?>

    <?php
        if( $data_slick_autoplay == 0 ) {
            $data_slick_autoplay = 'false';
        }
        else {
            $data_slick_autoplay = 'true';
        }
    ?>

    <?php
        if( $data_slick_draggable == 0 ) {
            $data_slick_draggable = 'false';
        }
        else {
            $data_slick_draggable = 'true';
        }
    ?>

    <div class="section-content" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "infinite": <?php echo esc_attr( $data_slick_infinite ); ?>, "speed": <?php echo esc_attr( $data_slick_speed ); ?>, "dots": true, "arrows": true, "autoplay": <?php echo esc_attr( $data_slick_autoplay ); ?>, "draggable": <?php echo esc_attr( $data_slick_draggable ); ?>, "fade": <?php echo esc_attr( $data_slick_fade ); ?> }'>

        <?php for( $i=1; $i<=$number_of_featured_slider_items; $i++ ) : 
            $featured_slider_slide_image[$i]  = rock_studio_get_option( 'featured_slider_slide_image_'.$i );
            $featured_slider_title[$i]        = rock_studio_get_option( 'featured_slider_title_'.$i );
            $featured_slider_content[$i]      = rock_studio_get_option( 'featured_slider_content_'.$i );
            $featured_slider_btn_text[$i]     = rock_studio_get_option( 'featured_slider_btn_text_'.$i );
            $featured_slider_btn_url[$i]  = rock_studio_get_option( 'featured_slider_btn_url_'.$i );   
        ?>

        <article class="<?php echo esc_attr($class); ?>" style="background-image: url('<?php echo esc_url( $featured_slider_slide_image[$i] ); ?>');">
            <div class="overlay"></div>
            <div class="wrapper">
                <div class="featured-content-wrapper">
                    <?php if( !empty($featured_slider_subtitle[$i]) || !empty($featured_slider_title[$i]) ): ?>
                        <header class="entry-header">
                            <?php if( !empty($featured_slider_title[$i]) ): ?>
                                <h2 class="entry-title"><?php echo esc_html( $featured_slider_title[$i] ); ?></h2>
                            <?php endif; ?>
                        </header>
                    <?php endif; ?>

                    <?php if( !empty($featured_slider_content[$i]) ): ?>
                        <div class="entry-content">
                            <?php echo esc_html( $featured_slider_content[$i] ); ?>
                        </div><!-- .entry-content -->
                    <?php endif; ?>

                    <?php if( !empty($featured_slider_btn_text[$i]) ): ?>
                        <div class="read-more">
                            <?php if( !empty($featured_slider_btn_text[$i]) ): ?>
                                <a href="<?php echo esc_attr($featured_slider_btn_url[$i]);?>" class="btn"><?php echo esc_html($featured_slider_btn_text[$i]);?><i class="fas fa-angle-right"></i></a>
                            <?php endif; ?>
                        </div><!-- .read-more -->
                    <?php endif; ?>
                </div><!-- .featured-content-wrapper -->
            </div><!-- .wrapper -->
        </article>
        <?php endfor; ?>
    </div><!-- .section-content -->