<?php
/**
 * Template for the text-to-speech player.
 *
 * This file is included by the shortcode renderer to display the TTS player.
 *
 * @link       https://mementor.no
 * @since      1.0.0
 *
 * @package    TTSWP
 * @subpackage Mementor_TTS/public/partials
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
    die;
}

// Variables that should be available:
// $player_id - Unique ID for this player instance
// $content - The text to be read
// $accent_color - The accent color for the player
// $button_bg - The button background color
// $show_label - Whether to show the label or not
?>

<div id="<?php echo esc_attr( $player_id ); ?>" class="mementor-tts-player" 
     data-text="<?php echo esc_attr( $content ); ?>"
     style="--mementor-tts-accent-color: <?php echo esc_attr( $accent_color ); ?>; --mementor-tts-button-bg: <?php echo esc_attr( $button_bg ); ?>;">
    
    <?php if ( $show_label ) : ?>
    <div class="mementor-tts-player-label">
        <?php esc_html_e( 'Listen to this text:', 'text-to-speech-tts' ); ?>
    </div>
    <?php endif; ?>
    
    <div class="mementor-tts-player-controls">
        <button class="mementor-tts-play-button" aria-label="<?php esc_attr_e( 'Play', 'text-to-speech-tts' ); ?>" style="padding: 0 !important; margin: 0 !important;">
            <span class="mementor-tts-play-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M8 5v14l11-7z"/>
                </svg>
            </span>
            <span class="mementor-tts-pause-icon" style="display: none;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
            </span>
        </button>
        
        <div class="mementor-tts-progress-container">
            <div class="mementor-tts-progress-bar">
                <div class="mementor-tts-progress-fill"></div>
            </div>
            <div class="mementor-tts-time">
                <span class="mementor-tts-current-time">0:00</span>
                <span class="mementor-tts-duration">0:00</span>
            </div>
        </div>
    </div>
</div> 