<?php
add_shortcode('bw_upcoming_event_list', 'bw_upcoming_event_list_shortcode');
function bw_upcoming_event_list_shortcode () {

	$query = array(
		'posts_per_page' => 3,
		'start_date' => 'now'
	);

	$events = tribe_get_events($query);

	ob_start();
	?>
	<div class="bw-upcoming-events-list">
		<?php foreach ($events as $event) : setup_postdata($event); ?>
			<?php
				$e = tribe_get_event($event->ID);
				$start_ts_utc = $e->dates->start_utc->getTimestamp();
			?>
			<div class="bw-upcoming-event">
				<div class="bw-upcoming-event-date">
					<div class="bw-upcoming-event-month" data-changetz-timestamp="<?php echo $start_ts_utc; ?>" data-changetz-format="M">
						<?php echo tribe_get_start_date($event->ID, false, 'M'); ?>
					</div>
					<div class="bw-upcoming-event-day" data-changetz-timestamp="<?php echo $start_ts_utc; ?>" data-changetz-format="j">
						<?php echo tribe_get_start_date($event->ID, false, 'j'); ?>
					</div>
				</div>
				<h3 class="bw-upcoming-event-title">
					<a href="<?php the_permalink($event); ?>">
						<?php echo get_the_title($event); ?>		
					</a>
				</h3>
			</div>
		<?php endforeach; ?>
	</div>
	<div class="bw-upcoming-events-link">
		<a href="<?php echo get_post_type_archive_link('tribe_events') ?>">View All Events</a>
	</div>
	<style>
		.bw-upcoming-events-list .bw-upcoming-event {
			display: flex;
			border-bottom: solid 1px lightgrey;
			padding-bottom: 16px;
			margin-bottom: 16px;
		}
		.bw-upcoming-events-list .bw-upcoming-event-date {
			width: 64px;
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
		}
		.bw-upcoming-events-list .bw-upcoming-event-month {
			text-align: center;
			font-size: 15px!important;
			font-weight: bold!important;
			font-style: normal;
			font-family: Helvetica Neue,Helvetica,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
			margin-bottom: -4px;
			line-height: 1.5;
			color: #5d5d5d;
			text-transform: uppercase;
		}
		.bw-upcoming-events-list .bw-upcoming-event-day {
			text-align: center;
			color: #141827;
			font-family: Helvetica Neue,Helvetica,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
			font-weight: 700;
			font-size: 24px;
			line-height: 1.42;
			margin-bottom: -4px;
		}
		.bw-upcoming-events-list h3.bw-upcoming-event-title {
			border: 0;
			margin: 0;
			padding: 0;
			color: var(--global-palette1);
			font-size: 18px;
			font-weight: 700;
			font-family: Helvetica Neue,Helvetica,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
			line-height: 1.62;
		}
		.bw-upcoming-events-link a {
			font-family: Helvetica Neue,Helvetica,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.62;
			text-decoration: none;
			color: var(--global-palette5);
			border-bottom: 2px solid transparent;
		}
		.bw-upcoming-events-link a:hover {
			transition: border-bottom 0.1s;
			border-bottom: 1px solid var(--global-palette5);
		}
	</style>
	<?php
	wp_reset_postdata();
	wp_enqueue_style('bw-event-list-style');
	return ob_get_clean();
}
