{{#each items}}
<div class="row iop-calendar-detail__item">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 {{#if videoID}} {{else}}margin-bottom-md{{/if}}">
		<div class="iop-calendar-detail__title">{{eventName}}</div>
		<div class="iop-calendar-detail__topic">{{calendar}}</div>
	</div>

	{{#if videoID}}
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 margin-bottom-sm">
		<iframe src="https://www.youtube.com/embed/{{videoID}}" class="iop-calendar-detail__video embed-responsive-item" title="{{eventName}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
	</div>
	{{/if}}

	{{#if image}}
		{{#unless videoID}}
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 margin-bottom-sm">
				<div class="ohio-card-bg">
					<div class="ohio-card-bg-img" style="background-image: url({{image}});">
						<span class="sr-only">Event Image</span>
					</div>
				</div>
			</div>
		{{/unless}}
	{{/if}}

	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
		<div class="iop-calendar-detail__startDate">{{startDate}}</div>
		{{#if endDate}}
		<div data-startDate="{{startDate}}" data-endDate="{{endDate}}" class="iop-calendar-detail__endDate" style="display: none;"> to {{endDate}}</div>
		{{/if}}
		<div class="iop-calendar-detail__time">{{startTime}} {{#if endTime}} - {{endTime}} {{/if}} </div>
		{{#if location}}<div class="iop-calendar-detail__location">{{ getMultilingualLabelByWCMKey ../location }}: {{location}}</div>{{/if}}
	</div>
	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 iop-calendar-detail__calendars-container">
		<div class="iop-calendar-detail__calendars">
			<div class="ohio-card__add-calendar-box" style="display:none">
			    <div class="ohio-card__add-calendar-icons">
			        <a class="add-calendar__icon-tile-anchor js-apple-anchor" href="#top">
			            <div class="add-calendar__icon-tile">
			                <i class="fab fa-apple"></i>
			                <div>Apple</div>
			            </div>
			        </a>
			        <a class="add-calendar__icon-tile-anchor js-external-anchor js-yahoo-anchor" href="#top">
			            <div class="add-calendar__icon-tile">
			                <i class="fab fa-yahoo"></i>
			                <div>Yahoo!</div>
			            </div>
			        </a>
			        <a class="add-calendar__icon-tile-anchor js-external-anchor js-google-anchor" href="#top">
			            <div class="add-calendar__icon-tile">
			                <i class="fab fa-google"></i>
			                <div>Google</div>
			            </div>
			        </a>
			        <a class="add-calendar__icon-tile-anchor js-outlook-anchor" href="#top">
			            <div class="add-calendar__icon-tile">
			                <i class="fab fa-microsoft"></i>
			                <div>Outlook</div>
			            </div>
			        </a>
			        <a class="add-calendar__icon-tile-anchor js-close-calendars" href="#top">
			            <div class="add-calendar__icon-tile">
			                <i class="fa fa-close"></i>
			                <div>Close</div>
			            </div>
			        </a>
			    </div>
			</div>
		</div>
		<button class="iop-calendar-detail__add-to-calendar btn btn-primary" 
		data-starttime="{{startDateAndTime}}"
		data-endtime="{{endDateAndTime}}"
		data-title="{{eventName}}"
		data-location="{{location}}">
			<i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
			<span>{{ getMultilingualLabelByWCMKey ../addToCalendar }}</span>
		</button>
	</div>

	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 margin-bottom-md margin-top-sm">
		<div class="iop-calendar-detail__description margin-bottom-sm">{{description}}</div>

		<a class="iop-calendar-detail__url" href="{{getURIPathFromWCMURL eventLink}}">{{ getMultilingualLabelByWCMKey ../goToDetail }}</a>
	</div>
</div>
{{/each}}