<?php
    // Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
    $featuredImage = get_the_post_thumbnail_url( $fab_item->getID(), 'large' );
    $modal         = $fab_item->get_modal();
    $iconCover     = $modal && $modal->get_navigation()['iconCover'] ? true : false;
?>
<div class="sm:flex font-sans">
    <div class="fab-modal-content flex-auto">
        <?php echo do_shortcode( $content ); ?>
    </div>
    <?php if ( $featuredImage ) : ?>
        <div class="fab-modal-featured-img flex-none relative">
            <img src="<?php echo esc_url( $featuredImage ); ?>"
                alt="<?php echo esc_attr( $fab_item->getTitle() ); ?> Cover"
                class="w-full sm:w-auto"
            />
        </div>
    <?php elseif ( $iconCover ) : ?>
        <div class="fab-modal-icon-container cursor-move hidden sm:block sm:w-auto px-8 flex items-center justify-center" style="min-height:200px; background-color: <?php echo esc_attr( $fab_item->getTemplate()['color'] ); ?>;">
            <i class="<?php echo esc_attr( $fab_item->get_icon_class() ); ?> text-8xl" style="color: <?php echo esc_attr( $fab_item->getTemplate()['icon']['color'] ); ?>;"></i>
        </div>
    <?php endif; ?>
</div>
<style>
    <?php if ( $iconCover ) : ?>
        .jconfirm-fab-modal-<?php echo esc_attr( $fab_item->getID() ); ?> .jconfirm-controls {
            color: <?php echo esc_attr( $fab_item->getTemplate()['icon']['color'] ); ?>;
        }
        @media only screen and (max-width: 780px) {
            .jconfirm-fab-modal-<?php echo esc_attr( $fab_item->getID() ); ?> .jconfirm-controls {
                color: inherit;
            }
        }
    <?php endif; ?>
</style>
