<?php
/**
 * Story Slider Template
 *
 * @package Storyposts
 */

defined('ABSPATH') || exit;

// Variables passed: $mode, $ajax_action, $limit, $can_create (optional), $slides_per_view, $slide_gap
$mode            = isset( $mode ) ? $mode : 'users';
$ajax_action     = isset( $ajax_action ) ? $ajax_action : 'storyposts_get_user_stories';
$limit           = isset( $limit ) ? $limit : 10;
$slides_per_view = isset( $slides_per_view ) ? $slides_per_view : 5;
$slide_gap       = isset( $slide_gap ) ? $slide_gap : 4;

// Only check view permission if not already checked
if ( ! function_exists( 'storyposts_user_can_view_stories' ) || ! storyposts_user_can_view_stories() ) {
    return;
}

if ( ! isset( $can_create ) ) {
    $can_create = ( $mode === 'users' ) && function_exists( 'storyposts_user_can_create_story' ) && storyposts_user_can_create_story();
}

$avatar_url = $can_create ? get_avatar_url( get_current_user_id() ) : '';
?>
<!-- Story Slider -->
<div class="sp-stories-container sp-story-slider-wrapper" 
     data-mode="<?php echo esc_attr( $mode ); ?>" 
     data-context="<?php echo esc_attr( isset($context) ? $context : '' ); ?>"
     data-ajax-action="<?php echo esc_attr( $ajax_action ); ?>" 
     data-limit="<?php echo esc_attr( $limit ); ?>"
     data-source="<?php echo esc_attr( isset($source) ? $source : '' ); ?>"
     data-product-filter="<?php echo esc_attr( isset($product_filter) ? $product_filter : '' ); ?>"
     data-layout="card"
     data-slides-per-view="<?php echo esc_attr( $slides_per_view ); ?>"
     data-space-between="<?php echo esc_attr( $slide_gap ); ?>"
     style="--sp-slide-gap: <?php echo esc_attr( $slide_gap ); ?>px;">
    <div class="swiper sp-story-slider skeletons">
        <div class="swiper-wrapper">
            <?php if ( $can_create ) :  ?>
                <div class="swiper-slide sp-story-card sp-type-create" style="<?php echo ( ! empty( $avatar_url ) ) ? esc_attr( 'background-image: url(' . esc_url( $avatar_url ) . ');' ) : ''; ?>" data-open-modal="sp-create-story-modal">
                    <div class="sp-story-avatar">
                        <div class="sp-story-plus"><i class="sp-icon--add"></i></div>
                    </div>
                    <div class="sp-story-name"><span><?php esc_html_e( 'Create story', 'storyposts' ); ?></span></div>
                </div>
            <?php endif; ?>
            
            <?php 
            $skeleton_count = $can_create ? $slides_per_view - 1 : $slides_per_view;
            for ( $i = 0; $i < $skeleton_count; $i++ ) : ?>
                <div class="swiper-slide sp-story-skeleton">
                    <div class="sp-story-avatar-skeleton"></div>
                    <div class="sp-story-name-skeleton"></div>
                </div>
            <?php endfor; ?>
      </div>
      <div class="swiper-button-prev sp-story-nav"></div>
      <div class="swiper-button-next sp-story-nav"></div>
    </div>
</div>
