<?php
$video_source = get_post_meta( $this->slide->ID, 'ml-slider_video_source', true );

$webm       = get_post_meta( $this->slide->ID, 'ml-slider_webm', true );
$mp4        = get_post_meta( $this->slide->ID, 'ml-slider_mp4', true );
$source     = ! $video_source || $video_source == 'external' ? 'external' : $video_source;
$sources    = $this->videoHelper->get_all_sources( $this->slide->ID );
?>
<div class="row has-right-field">
    <label class="tipsy-tooltip-top" title="<?php 
        esc_attr_e( 'Select the video source type', 'ml-slider-pro' ); ?>">
        <?php esc_html_e( 'Video source', 'ml-slider-pro' ); ?>
    </label>
    <select name="attachment[<?php 
        esc_attr_e( $this->slide->ID ); ?>][video_source]" class="layer-slide-video-source">
        <option value="external" <?php echo selected( $source, 'external', false ); ?>> 
            <?php esc_html_e( 'External video', 'ml-slider-pro' ); ?>
        </option>
        <option value="local" <?php echo selected( $source, 'local', false ); ?>>
            <?php esc_html_e( 'Local video', 'ml-slider-pro' ); ?>
        </option>
    </select>
</div>
<div class="table w-full bg-gray-lightest border border-gray-light border-l-8 rtl:border-r-8 rtl:border-l-0 rtl:pl-0 rtl:pr-4 mt-2 p-5">
    <div data-source="external"<?php 
        echo ( $source == 'external' ? '' : 'style="display:none;"' ); ?>>
        <div class="row mb-2">
            <label>
                <?php esc_html_e( 'MP4 Source', 'ml-slider-pro' ); ?>
            </label>
        </div>
        <div class="row">
            <input type="text" name="attachment[<?php 
            echo esc_attr( $this->slide->ID ); ?>][mp4]" placeholder="<?php 
            esc_attr_e( 'URL', 'ml-slider-pro' ); ?>" value="<?php 
            echo esc_attr( $mp4 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>" />
        </div>
        <div class="row mb-2">
            <label>
                <?php esc_html_e( 'WebM Source', 'ml-slider-pro' ); ?>
            </label>
        </div>
        <div class="row">
            <input type="text" name="attachment[<?php 
            echo esc_attr( $this->slide->ID ); ?>][webm]" placeholder="<?php 
            esc_attr_e( 'URL', 'ml-slider-pro' ); ?>" value="<?php 
            echo esc_attr( $webm ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>" />
        </div>
    </div>
    <div data-source="local"<?php 
        echo ( $source == 'local' ? '' : 'style="display:none;"' ); ?>>
        <div class="list-video-sources">
            <?php 
            foreach ( $sources as $video ) :
                // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                echo $this->videoHelper->admin_video_source_row( $video, $this->slide->ID, 'html_overlay' );
            endforeach; 
            ?>
        </div>
        <div class="row mb-0"<?php echo count( $sources ) < 3 ? '' : ' style="display:none;"' ?>>
            <button data-slide-type="html_overlay" data-button-text="<?php 
                esc_attr_e( 'Add a new video source', 'ml-slider-pro' ) ?>" data-slide-id="<?php
                esc_attr_e( $this->slide->ID ) ?>" class="add-video-source button button-secondary">
                <?php esc_html_e( 'Add a new video source', 'ml-slider-pro' ); ?>
            </button>
            <span class="dashicons dashicons-info tipsy-tooltip-top" original-title="<?php 
                esc_attr_e(
                    'Adding more formats for the same video can help improve support for different platforms.', 
                    'ml-slider-pro'
                ) ?>" style="line-height:50px;"></span>
        </div>
    </div>
</div>