<!-- Event Detail -->
<div class="event_detail" id="meta" data-type="event" data-category="Category A, Category B">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="event_detail_inner">

                <div class="event_detail_breadcrumb">
                    <div class="page_header_breadcrumb">
                        <div class="fs-row">
                            <div class="fs-cell">
                                <div class="page_header_breadcrumb_inner">

                                    <div class="breadcrumb">
                                        <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                            <div class="breadcrumb_nav_header">
                                                <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                            </div>
                                            <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                                                <li class="breadcrumb_item breadcrumb_item_home">
                                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
                                                        <span class="breadcrumb_pill_inner">

                                                            <span class="breadcrumb_pill_label">Home</span>
                                                        </span>
                                                    </a>
                                                    <span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
                                                            <use href="/images/icons.svg#caret_right" />
                                                        </svg></span>

                                                </li>
                                                <li class="breadcrumb_item">
                                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                        <span class="breadcrumb_pill_inner">
                                                            <span class="breadcrumb_pill_label">Navigation Level</span>
                                                        </span>
                                                    </a>
                                                    <span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
                                                            <use href="/images/icons.svg#caret_right" />
                                                        </svg></span>

                                                </li>
                                                <li class="breadcrumb_item">
                                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                        <span class="breadcrumb_pill_inner">
                                                            <span class="breadcrumb_pill_label">Parent Level</span>
                                                        </span>
                                                    </a>
                                                    <span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
                                                            <use href="/images/icons.svg#caret_right" />
                                                        </svg></span>

                                                </li>
                                                <li class="breadcrumb_item">

                                                </li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="event_detail_date">
                    <div class="event_related_item_date">
                        <time class="event_date theme_default" datetime="2023-05-21 17:00:00">
                            <span class="event_date_start">
                                <span class="event_date_month">
                                    May
                                </span>
                                <span class="event_date_day">
                                    21
                                </span>
                            </span>
                        </time>
                    </div>
                </div>

                <div class="event_detail_info">

                    <div class="event_detail_title">
                        <h1 class="page_header_title" id="page_header_title" tabindex="-1">In Enim Justo Rhoncus Ut</h1>
                    </div>
                    <div class="event_detail_description">
                        <p class="page_header_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus est.</p>
                    </div>
                    <div class="event_detail_meta">

                        <!-- Event Meta -->
                        <div class="event_meta" id="meta" data-type="event" data-category="Category A, Category B">
                            <div class="fs-row">
                                <div class="fs-cell">
                                    <div class="event_meta_inner">

                                        <div class="event_meta_details">
                                            <div class="event_meta_detail">
                                                <span class="event_meta_detail_title">When</span>
                                                <span class="event_meta_detail_hint">Time:&nbsp;</span>
                                                <span class="event_meta_detail_label">
                                                    <span class="event_meta_detail_label_date">
                                                    </span>

                                                    <span class="event_meta_detail_label_time">5:00 PM</span>
                                                    - <span class="event_meta_detail_label_time">7:00 PM</span>
                                                </span>
                                            </div>

                                            <div class="event_meta_detail">
                                                <span class="event_meta_detail_title">Where</span>
                                                <span class="event_meta_detail_hint">Location:&nbsp;</span>
                                                <span class="event_meta_detail_label">Location Name</span>
                                                <span class="event_meta_detail_type">In Person</span>
                                            </div>

                                            <div class="event_meta_detail event_meta_detail_category">
                                                <span class="event_meta_detail_title">Category</span>
                                                <span class="event_meta_detail_hint">Categories:&nbsp;</span>
                                                <ul class="event_meta_detail_list" aria-label="Categories">
                                                    <li class="event_meta_detail_item">

                                                        <span class="event_meta_detail_label">Category A</span>
                                                    </li>
                                                    <li class="event_meta_detail_item">

                                                        <span class="event_meta_detail_label">Category B</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- END: Event Meta -->
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!-- END: Event Detail -->
{#
	{% include '@partial-event-detail' with {
		page: {
			date: {
				same_day: false,
				all_day: false,
				from: '2023-05-31 17:00:00',
				to: '2023-06-13 19:00:00'
			},
			location: 'Location',
			categories: [
				{
					label: 'Category',
					url: '#'
				}
			]
		}
	} %}
#}
<!-- Event Detail -->
<div class="event_detail" id="meta" data-type="event" data-category="{% for item in page.categories %}{{ item.label }}{% if not loop.last %}, {% endif %}{% endfor %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="event_detail_inner">

				<div class="event_detail_breadcrumb">
					{% if page.breadcrumbNav != false  %}
					<div class="page_header_breadcrumb">
						<div class="fs-row">
							<div class="fs-cell">
								<div class="page_header_breadcrumb_inner">
									{% render '@navigation-breadcrumb' with {
										page: page,
										modifier: '',
										links: page.breadcrumbNav,
										icon_divider: 'caret_right'
									} %}
								</div>
							</div>
						</div>
					</div>
					{% endif %}
				</div>

				<div class="event_detail_date">
					<div class="event_related_item_date">
						{% include "@partial-event-date" with {
							date: page.date,
							theme: 'default',
						} %}
					</div>
				</div>

				<div class="event_detail_info">

					<div class="event_detail_title">
						{% if page.title %}
							<h1 class="page_header_title" id="page_header_title" tabindex="-1">{{ page.title }}</h1>
						{% endif %}
					</div>
					<div class="event_detail_description">
						{% if page.description %}
							<p class="page_header_description">{{ page.description }}</p>
						{% endif %}
					</div>
					<div class="event_detail_meta">
						{% include '@partial-event-meta' with {
							item: page
							}
						%}
					</div>

				</div>

			</div>
		</div>
	</div>
</div>
<!-- END: Event Detail -->

No notes defined.