jQuery( document ).ready(
	function ($) {
		$( '.view-log-details' ).on(
			'click',
			function () {
				// Populate modal with log details
				$( '#log-id' ).text( $( this ).data( 'id' ) );
				$( '#log-mail-type' ).text( $( this ).data( 'mail-type' ) );
				$( '#log-recipient' ).text( $( this ).data( 'recipient' ) );
				$( '#log-subject' ).text( $( this ).data( 'subject' ) );
				$( '#log-message' ).text( $( this ).data( 'message' ) );
				$( '#log-status' ).text( $( this ).data( 'status' ) );
				$( '#log-error-log' ).text( $( this ).data( 'error-log' ) );
				$( '#log-sent-at' ).text( $( this ).data( 'sent-at' ) );

				// Show the modal
				$( '#log-details-modal' ).fadeIn();
			}
		);

		// Close the modal
		$( '.log-details-modal-close' ).on(
			'click',
			function () {
				$( '#log-details-modal' ).fadeOut();
			}
		);

		// Close the modal when clicking outside the content
		$( window ).on(
			'click',
			function (e) {
				if ($( e.target ).is( '#log-details-modal' )) {
					$( '#log-details-modal' ).fadeOut();
				}
			}
		);
	}
);

document.addEventListener(
	'DOMContentLoaded',
	function () {
		var topScrollbar    = document.querySelector( '.x4email-table-scrollbar-top' );
		var tableResponsive = document.querySelector( '.x4email-table-responsive' );

		if (topScrollbar && tableResponsive) {
			// Set the width of the top scrollbar to match the table
			topScrollbar.style.overflowX = 'auto';
			topScrollbar.style.overflowY = 'hidden';

			// Create a fake inner div to force the scrollbar
			var innerDiv          = document.createElement( 'div' );
			innerDiv.style.width  = tableResponsive.scrollWidth + 'px';
			innerDiv.style.height = '1px';
			topScrollbar.appendChild( innerDiv );

			// Sync scroll positions
			topScrollbar.addEventListener(
				'scroll',
				function () {
					tableResponsive.scrollLeft = topScrollbar.scrollLeft;
				}
			);
			tableResponsive.addEventListener(
				'scroll',
				function () {
					topScrollbar.scrollLeft = tableResponsive.scrollLeft;
				}
			);
		}
	}
);