<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY amp   "&#38;">
<!ENTITY copy   "&#169;">
<!ENTITY gt   "&#62;">
<!ENTITY hellip "&#8230;">
<!ENTITY laquo  "&#171;">
<!ENTITY lsaquo   "&#8249;">
<!ENTITY lsquo   "&#8216;">
<!ENTITY lt   "&#60;">
<!ENTITY nbsp   "&#160;">
<!ENTITY quot   "&#34;">
<!ENTITY raquo  "&#187;">
<!ENTITY rsaquo   "&#8250;">
<!ENTITY rsquo   "&#8217;">
]>
<!-- 
Implementations Skeleton - 01/10/2017

SNIPPET XSL
Place snippet XSL template matches in this file.

Contributors: A. Schwenkenberg
Last Updated: 10/2017

-->
<xsl:stylesheet version="3.0" expand-text="yes" 
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
				xmlns:xs="http://www.w3.org/2001/XMLSchema" 
				xmlns:ou="http://omniupdate.com/XSL/Variables"
				xmlns:fn="http://omniupdate.com/XSL/Functions" 
				xmlns:ouc="http://omniupdate.com/XSL/Variables" 
				exclude-result-prefixes="xs ou fn ouc">

	<xsl:import href="preview-alerts.xsl"/>


	<!-- Updated exsiting snippets -->
	<!-- Standard Inner - Two Column -->
	<xsl:template match="table[@class='ou-snippet-two-column']">
		<xsl:variable name="data" select="tbody/tr" />

		<div class="columns">
			<div class="row">
				<div class="col-12 col-md-6 d-flex align-items-stretch justify-content-evenly ">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[1]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-md-6 mt-md-0 mt-4 d-flex align-items-stretch justify-content-evenly">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[2]/td/node()" />
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- /Standard Inner - Two Column -->


	<!-- Standard Inner - Three Column -->
	<!-- 	Removed classes " mt-md-0 mt-4 d-flex align-items-stretch" as per ticket 279048 -->
	<xsl:template match="table[@class='ou-snippet-three-column']">
		<xsl:variable name="data" select="tbody/tr" />

		<div class="columns">
			<div class="row">
				<div class="col-12 col-md-4">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[1]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-md-4">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[2]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-md-4">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[3]/td/node()" />
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- /Standard Inner - Three Column -->


	<!-- Standard Inner - Four Column -->
	<xsl:template match="table[@class='ou-snippet-four-column']">
		<xsl:variable name="data" select="tbody/tr" />

		<div class="columns">
			<div class="row">
				<div class="col-12 col-md-3 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[1]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-md-3 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[2]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-md-3 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[3]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-md-3 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[4]/td/node()" />
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- /Standard Inner - Four Column -->


	<!-- Standard Inner - Five Column -->
	<xsl:template match="table[@class='ou-snippet-five-column']">
		<xsl:variable name="data" select="tbody/tr" />

		<div class="columns">
			<div class="row">
				<div class="col-12 offset-lg-1 col-lg-2 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[2]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-lg-2 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[3]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-lg-2 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[4]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-lg-2 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[5]/td/node()" />
					</div>
				</div>

				<div class="col-12 col-lg-2 mt-md-0 mt-4 d-flex align-items-stretch">
					<div class="d-flex flex-column">
						<xsl:apply-templates select="$data[6]/td/node()" />
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- /Standard Inner - Five Column -->


	<xsl:template match="table[@class ='ou-snippet-left-connect-row']">
		<xsl:variable name="row" select="tbody/tr[1]"/>
		<xsl:variable name="title" select="$row/td[1]"/>
		<xsl:variable name="tagline" select="$row/td[2]"/>
		<xsl:variable name="pinterest" select="$row/td[3]/a[1]/@href"/>
		<xsl:variable name="facebook" select="$row/td[4]/a[1]/@href"/>
		<xsl:variable name="instagram" select="$row/td[5]/a[1]/@href"/>
		<xsl:variable name="twitter" select="$row/td[6]/a[1]/@href"/>
		<xsl:variable name="youtube" select="$row/td[7]/a[1]/@href"/>

		<div class="section social-connect">
			<div class="row">
				<xsl:if test="ou:textual-content($title) != ''">
					<h2>
						<xsl:apply-templates select="$title/node()"/>
					</h2>
				</xsl:if>

				<xsl:if test="ou:not-empty($tagline)">
					<xsl:apply-templates select="$tagline/node()"/>
				</xsl:if>
			</div>

			<xsl:if test="$pinterest or $facebook or $instagram or $twitter or $youtube">
				<div class="row">
					<ul>
						<xsl:if test="$pinterest != ''">
							<li class="social-item">
								<a href="{$pinterest}" class="social-icon">
									<span class="fa-brands fa-pinterest-p"></span>
									<span class="sr-only">Pinterest</span>
								</a>
							</li>
						</xsl:if>

						<xsl:if test="$facebook != ''">
							<li class="social-item">
								<a href="{$facebook}" class="social-icon">
									<span class="fa-brands fa-facebook-f"></span>
									<span class="sr-only">Facebook</span>
								</a>
							</li>
						</xsl:if>

						<xsl:if test="$instagram != ''">
							<li class="social-item">
								<a href="{$instagram}" class="social-icon">
									<span class="fa-brands fa-instagram"></span>
									<span class="sr-only">Instagram</span>
								</a>
							</li>
						</xsl:if>

						<xsl:if test="$twitter != ''">
							<li class="social-item">
								<a href="{$twitter}" class="social-icon">
									<span class="fa-brands fa-x-twitter"></span>
									<span class="sr-only">Twitter/X</span>
								</a>
							</li>
						</xsl:if>

						<xsl:if test="$youtube != ''">
							<li class="social-item">
								<a href="{$youtube}" class="social-icon">
									<span class="fa-brands fa-youtube"></span>
									<span class="sr-only">YouTube</span>
								</a>
							</li>
						</xsl:if>
					</ul>
				</div>
			</xsl:if>
		</div>
	</xsl:template>

	<!-- Standard Inner - Testimonial -->
	<xsl:template match="table[@class = 'ou-snippet-testimonial']">
		<xsl:variable name="quote" select="ou:textual-content(tbody/tr[1]/td)"/>
		<xsl:variable name="title" select="ou:textual-content(tbody/tr[2]/td)"/>
		<xsl:variable name="info-one" select="ou:textual-content(tbody/tr[3]/td)"/>
		<xsl:variable name="info-two" select="ou:textual-content(tbody/tr[4]/td)"/>

		<blockquote class="blockquote-paragraph">
			<xsl:if test="$quote != ''">
				<div class="blockquote-text">
					<xsl:text>"</xsl:text>{$quote}<xsl:text>"</xsl:text>
				</div>
			</xsl:if>

			<xsl:if test="$title != '' or $info-one != '' or $info-two != ''">
				<div class="blockquote-footer">
					<xsl:if test="$title != ''">
						<xsl:value-of select="$title"/>
					</xsl:if>

					<xsl:if test="$info-one != '' or $info-two != ''">
						<br />
						<cite title="Source Title">
							<xsl:if test="$info-one != ''">
								<xsl:value-of select="$info-one"/>
							</xsl:if>
							<xsl:if test="$info-two != ''">
								<br />
								<xsl:value-of select="$info-two"/>
							</xsl:if>
						</cite>
					</xsl:if>
				</div>
			</xsl:if>
		</blockquote>
	</xsl:template>
	<!-- /Standard Inner - Testimonial -->


	<!-- Standard Inner - Accordion -->
	<xsl:template match="table[@class='ou-snippet-accordion']">
		<xsl:variable name="accordion-id" select="generate-id()"/>

		<div class="accordion accordion-interior" id="{$accordion-id}">
			<xsl:for-each select="tbody/tr">
				<xsl:variable name="item-position" select="position()"/>
				<xsl:variable name="heading-id" select="concat('heading-', $accordion-id, '-', $item-position)"/>
				<xsl:variable name="collapse-id" select="concat('collapse-', $accordion-id, '-', $item-position)"/>

				<div class="accordion-item">
					<h2 class="accordion-header" id="{$heading-id}">
						<button class="accordion-button collapsed"
								type="button"
								data-bs-toggle="collapse"
								data-bs-target="#{$collapse-id}"
								aria-expanded="false"
								aria-controls="{$collapse-id}">
							<xsl:value-of select="ou:textual-content(td[1])"/>
						</button>
					</h2>

					<div id="{$collapse-id}"
						 class="accordion-collapse collapse"
						 aria-labelledby="{$heading-id}"
						 data-bs-parent="#{$accordion-id}">
						<div class="accordion-body">
							<xsl:apply-templates select="td[2]/node()"/>
						</div>
					</div>
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>

	<!-- /Standard Inner - Accordion -->

	<!-- Standard Inner - Tabs -->
	<xsl:template match="table[@class='ou-snippet-tabs']">
		<xsl:variable name="tabs-id" select="generate-id()"/>

		<div class="tabs">
			<nav role="navigation" aria-label="Tab Navigation">
				<div class="nav nav-tabs" id="nav-tab-{$tabs-id}" role="tablist" aria-label="tab-list">
					<xsl:for-each select="tbody/tr">
						<xsl:variable name="position-id" select="position()"/>
						<xsl:variable name="parent-id" select="concat('tab-', $position-id, '-parent-', $tabs-id)"/>
						<xsl:variable name="panel-id" select="concat('tab-0', $position-id, '-', $tabs-id)"/>

						<button class="nav-item nav-link"
								id="{$parent-id}"
								data-bs-toggle="tab"
								data-bs-target="#{$panel-id}"
								role="tab"
								aria-controls="{$panel-id}"
								aria-selected="{if (position() = 1) then 'true' else 'false'}"
								tabindex="{if (position() = 1) then '0' else '-1'}">
							<xsl:if test="position() = 1">
								<xsl:attribute name="class">nav-item nav-link active</xsl:attribute>
							</xsl:if>
							<xsl:value-of select="ou:textual-content(td[1])"/>
						</button>
					</xsl:for-each>
				</div>
			</nav>

			<div class="tab-content" id="nav-tabContent-{$tabs-id}">
				<xsl:for-each select="tbody/tr">
					<xsl:variable name="position-id" select="position()"/>
					<xsl:variable name="parent-id" select="concat('tab-', $position-id, '-parent-', $tabs-id)"/>
					<xsl:variable name="panel-id" select="concat('tab-0', $position-id, '-', $tabs-id)"/>

					<div class="tab-pane fade"
						 id="{$panel-id}"
						 role="tabpanel"
						 aria-labelledby="{$parent-id}">
						<xsl:if test="position() = 1">
							<xsl:attribute name="class">tab-pane fade show active</xsl:attribute>
						</xsl:if>

						<xsl:apply-templates select="td[2]/node()"/>
					</div>
				</xsl:for-each>
			</div>
		</div>
	</xsl:template>

	<!-- /Standard Inner - Tabs -->

	<!-- Standard Inner - Media Box Top -->
	<xsl:template match="table[@class='ou-snippet-media-box-top']">
		<xsl:variable name="image" select="tbody/tr[1]/td/img[1]"/>
		<xsl:variable name="title" select="ou:textual-content(tbody/tr[2]/td)"/>
		<xsl:variable name="content" select="tbody/tr[3]/td/node()"/>

		<div class="media-box">
			<div class="row">
				<div class="col-12 col-md-4 col-lg-2">
					<xsl:if test="$image">
						<img src="{$image/@src}" class="card-img" alt="{$image/@alt}"/>
					</xsl:if>
				</div>

				<div class="col-12 col-md-8 col-lg-10">
					<xsl:if test="$title != ''">
						<span class="title-decorative">{$title}</span>
					</xsl:if>

					<xsl:apply-templates select="$content" mode="media-box-top"/>
				</div>
			</div>
		</div>
	</xsl:template>

	<!-- /Standard Inner - Media Box Top -->

	<!-- Standard Inner - Media Box -->
	<xsl:template match="table[@class='ou-snippet-media-box']">
		<xsl:variable name="image" select="tbody/tr[1]/td//img[1]"/>
		<xsl:variable name="title" select="ou:textual-content(tbody/tr[2]/td)"/>
		<xsl:variable name="content" select="tbody/tr[3]/td/node()"/>

		<div class="media-box">
			<div class="row">
				<div class="col-12 col-md-4 col-lg-2">
					<xsl:if test="$image">
						<img src="{$image/@src}" class="card-img" alt="{$image/@alt}"/>
					</xsl:if>
				</div>

				<div class="col-12 col-md-8 col-lg-10">
					<xsl:if test="$title != ''">
						<span class="title-decorative">{$title}</span>
					</xsl:if>

					<xsl:apply-templates select="$content" mode="media-box-top"/>
				</div>
			</div>
		</div>
	</xsl:template>

	<!-- /Standard Inner - Media Box -->



	<!-- Standard Inner - Dropdown Single Column -->
	<xsl:template match="table[@class='ou-snippet-dropdown-single']">
		<xsl:variable name="accordion-id" select="generate-id()"/>
		<xsl:variable name="heading" select="ou:textual-content(thead/tr[1]/th)"/>
		<xsl:variable name="button-label" select="ou:textual-content(tbody/tr[1]/td)"/>
		<xsl:variable name="links" select="tbody/tr[2]/td/ul/li/a"/>

		<div class="row">
			<div class="col-12">
				<div class="accordion accordion-single" id="{$accordion-id}">
					<div class="accordion-item">
						<h2 class="accordion-header">
							<button class="accordion-button collapsed"
									type="button"
									data-bs-toggle="collapse"
									data-bs-target="#{$accordion-id}-collapseOne"
									aria-expanded="false"
									aria-controls="{$accordion-id}-collapseOne">
								<xsl:value-of select="$button-label"/>
							</button>
						</h2>

						<div id="{$accordion-id}-collapseOne" class="accordion-collapse collapse">
							<div class="accordion-body">
								<div class="col-12 sub-column">
									<div class="d-flex flex-column">
										<xsl:for-each select="$links">
											<a href="{@href}">
												<xsl:apply-templates select="node()"/>
											</a>
										</xsl:for-each>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>

	<!-- /Standard Inner - Dropdown Single Column -->

	<!-- Standard Inner - Dropdown -->
	<xsl:template match="table[@class='ou-snippet-dropdown']">
		<xsl:variable name="accordion-id" select="generate-id()" />
		<xsl:variable name="button-label" select="ou:textual-content(tbody/tr[1]/td[1])" />
		<xsl:variable name="content-cells" select="tbody/tr[2]/td" />
		<xsl:variable name="column-count" select="count($content-cells)" />
		<xsl:variable
					  name="column-class"
					  select="
							  if ($column-count = 1) then 'col-12'
							  else if ($column-count = 2) then 'col-12 col-md-6 sub-column'
							  else if ($column-count = 3) then 'col-12 col-md-4 sub-column'
							  else 'col-12 col-md-3 sub-column'
							  "
					  />

		<div class="row">
			<div class="col-12">
				<div class="accordion accordion-single" id="{$accordion-id}">
					<div class="accordion-item">
						<h2 class="accordion-header">
							<button class="accordion-button collapsed"
									type="button"
									data-bs-toggle="collapse"
									data-bs-target="#{$accordion-id}-collapseOne"
									aria-expanded="false"
									aria-controls="{$accordion-id}-collapseOne">
								<xsl:value-of select="$button-label" />
							</button>
						</h2>

						<div id="{$accordion-id}-collapseOne" class="accordion-collapse collapse">
							<div class="accordion-body">
								<xsl:for-each select="$content-cells">
									<div class="{$column-class}">
										<div class="d-flex flex-column">
											<xsl:choose>
												<xsl:when test="ul/li/a">
													<xsl:for-each select="ul/li/a">
														<a href="{@href}">
															<xsl:apply-templates select="node()" />
														</a>
													</xsl:for-each>
												</xsl:when>
												<xsl:when test="a">
													<xsl:for-each select="a">
														<a href="{@href}">
															<xsl:apply-templates select="node()" />
														</a>
													</xsl:for-each>
												</xsl:when>
												<xsl:otherwise>
													<xsl:apply-templates select="node()" />
												</xsl:otherwise>
											</xsl:choose>
										</div>
									</div>
								</xsl:for-each>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- /Standard Inner - Dropdown -->

	<!-- Alternating Image Columns -->
	<xsl:template match="table[@class='ou-snippet-alternating-image-columns']">
		<xsl:for-each select="tbody/tr">
			<xsl:variable name="image" select="td[1]/img[1]" />
			<xsl:variable name="content" select="td[2]" />

			<xsl:if test="$image/@src or ou:textual-content($content) != ''">
				<div class="bg-gray fullwidth-split">
					<div class="container-fluid">
						<div class="row gx-0">
							<div class="col-md-6 ps-0 order-md-2 fullwidth-split-image">
								<xsl:if test="position() mod 2 = 0">
									<xsl:attribute name="class">col-md-6 pe-0 fullwidth-split-image</xsl:attribute>
								</xsl:if>

								<xsl:if test="$image">
									<img src="{$image/@src}" alt="{$image/@alt}" />
								</xsl:if>
							</div>

							<div class="col-md-6 order-md-1 fullwidth-split-text">
								<xsl:if test="position() mod 2 = 0">
									<xsl:attribute name="class">col-md-6 fullwidth-split-text</xsl:attribute>
								</xsl:if>

								<div class="text-wrapper">
									<xsl:apply-templates select="$content/node()" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</xsl:if>
		</xsl:for-each>
	</xsl:template>
	<!-- /Alternating Image Columns -->

	<!-- two boxes with images-->
	<xsl:template match="table[@data-snippet='ou-two-boxes']">
		<xsl:variable name="headline" select="ou:textual-content(tbody/tr[1]/td[1])"/>
		<xsl:variable name="box-1-heading" select="tbody/tr[3]/td[1]"/>
		<xsl:variable name="box-2-heading" select="tbody/tr[3]/td[2]"/>
		<xsl:variable name="box-1-body" select="ou:textual-content(tbody/tr[4]/td[1])"/>
		<xsl:variable name="box-2-body" select="ou:textual-content(tbody/tr[4]/td[2])"/>
		<xsl:variable name="box-1-image" select="tbody/tr[5]/td[1]/img[1]"/>
		<xsl:variable name="box-2-image" select="tbody/tr[5]/td[2]/img[1]"/>

		<div class="row">
			<div class="col-lg-6">
				<div class="card">
					<xsl:if test="$box-1-image">
						<img src="{$box-1-image/@src}" alt="{$box-1-image/@alt}"/>
					</xsl:if>

					<div class="card-body">
						<xsl:if test="ou:not-empty($box-1-heading)">
							<h3 class="card-title">
								<xsl:apply-templates select="$box-1-heading/node()"/>
							</h3>
						</xsl:if>

						<xsl:if test="$box-1-body != ''">
							<p class="card-text">
								<xsl:value-of select="$box-1-body"/>
							</p>
						</xsl:if>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<div class="card">
					<xsl:if test="$box-2-image">
						<img src="{$box-2-image/@src}" alt="{$box-2-image/@alt}"/>
					</xsl:if>

					<div class="card-body">
						<xsl:if test="ou:not-empty($box-2-heading)">
							<h3 class="card-title">
								<xsl:apply-templates select="$box-2-heading/node()"/>
							</h3>
						</xsl:if>

						<xsl:if test="$box-2-body != ''">
							<p class="card-text">
								<xsl:value-of select="$box-2-body"/>
							</p>
						</xsl:if>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- -->

	<!-- School tabs -->
	<xsl:template match="table[@data-snippet='ou-school-tabs']">
		<div class="college-cards">
			<div class="container">
				<div class="row">
					<xsl:for-each select="tbody/tr[@data-name='item']">
						<div class="col-12 col-md-6 col-lg-4 d-flex">
							<div class="card college-card justify-content-center">
								<a href="{td[2]/a/@href}" class="title">
									<xsl:value-of select="ou:textual-content(td[1])"/>
									<xsl:text> </xsl:text>
									<br />
									<strong>
										<xsl:value-of select="ou:textual-content(td[2])"/>
									</strong>
									<span class="fa-solid fa-arrow-right"></span>
								</a>
							</div>
						</div>
					</xsl:for-each>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- End School tabs-->

	<!-- Standard Inner - Highlight -->
	<xsl:template match="table[@class='ou-snippet-highlight']">
		<div class="highlight-box">
			<xsl:apply-templates select="tbody/tr[1]/td/node()"/>
		</div>
	</xsl:template>
	<!-- Standard Inner - Highlight -->

	<!-- Standard Inner - Spotlight promo -->
	<xsl:template match="table[@class='ou-snippet-spotlight']">
		<div class="highlight-box">
			<xsl:apply-templates select="tbody/tr[1]/td/node()"/>
		</div>
	</xsl:template>
	<xsl:template match="table[@class='ou-snippet-spotlight']//img">
		<xsl:copy>
			<!-- copy all attributes except class -->
			<xsl:copy-of select="@*[name() != 'class']"/>

			<!-- merge existing classes with Bootstrap ones -->
			<xsl:attribute name="class">
				<xsl:value-of select="normalize-space(concat(@class, ' img-fluid w-100'))"/>
			</xsl:attribute>
		</xsl:copy>
	</xsl:template>
	<!-- Standard Inner - Spotlight promo -->

	<!-- Standard Inner - Related Links -->
	<xsl:template match="table[@class='ou-snippet-related-links']">
		<div class="container links-box">
			<xsl:apply-templates select="tbody/tr[1]/td/node()"/>
		</div>
	</xsl:template>
	<!-- Standard Inner - Related Links -->

	<!-- Standard Inner - Contact Links -->
	<xsl:template match="table[@class='ou-snippet-contact']">
		<div class="container ">
			<xsl:apply-templates select="tbody/tr[1]/td/node()"/>
			<xsl:apply-templates select="tbody/tr[2]/td/node()"/>
		</div>
	</xsl:template>
	<!-- Standard Inner - Contact Links -->

	<!-- Cards design -->
	<xsl:template match="table[@data-snippet='ou-image-cards']">
		<xsl:variable name="items" select="tbody/tr[@data-name='item'][td[@data-name='image']//img/@src or ou:textual-content(td[@data-name='heading']) != '' or ou:textual-content(td[@data-name='content']) != '']"/>
		<xsl:variable name="item-count" select="count($items)"/>

		<xsl:if test="$item-count > 0">
			<div class="row">
				<xsl:for-each select="$items">
					<xsl:variable name="image" select="td[@data-name='image']//img"/>
					<xsl:variable name="heading" select="ou:textual-content(td[@data-name='heading'])"/>
					<xsl:variable name="content" select="td[@data-name='content']"/>
					<xsl:variable name="color" select="ou:textual-content(td[@data-name='color'])"/>
					<xsl:variable name="background-class" select="if ($color = 'red') then 'bg-primary'
																  else if ($color = 'black') then 'bg-black'
																  else if ($color = 'gray') then 'bg-med-gray'
																  else ''
																  "/>
					<xsl:variable name="column-class" select="if ($item-count = 1) then 'col-lg'
															  else if ($item-count = 2) then 'col-lg-6'
															  else if ($item-count = 3) then 'col-lg-4'
															  else 'col-lg-3'"/>

					<div class="{$column-class}">
						<div>
							<xsl:attribute name="class">
								<xsl:text>card</xsl:text>
								<xsl:if test="$background-class != ''">
									<xsl:text> </xsl:text>
									<xsl:value-of select="$background-class"/>
								</xsl:if>
							</xsl:attribute>

							<xsl:if test="$image/@src">
								<img src="{$image/@src}" alt="{$image/@alt}"/>
							</xsl:if>

							<xsl:if test="$heading != '' or ou:textual-content($content) != ''">
								<div class="card-body">
									<xsl:if test="$heading != ''">
										<h3 class="card-title">
											<xsl:value-of select="$heading"/>
										</h3>
									</xsl:if>

									<xsl:apply-templates select="$content/node()"/>
								</div>
							</xsl:if>
						</div>
					</div>
				</xsl:for-each>
			</div>
		</xsl:if>
	</xsl:template>

	<xsl:template match="td[@data-name='content']/p">
		<p class="card-text">
			<xsl:apply-templates select="node()"/>
		</p>
	</xsl:template>

	<!-- Cards design -->

	<!-- Three Column with Image and Inset Text snippet table -->
	<xsl:template match="table[@class='ou-snippet-three-column-with-image-inset']">
		<xsl:variable
					  name="items"
					  select="tbody/tr[td[1]//img/@src and ou:textual-content(td[2]) != '']"
					  />
		<xsl:variable name="item-count" select="count($items)" />

		<xsl:if test="$item-count &gt; 0">
			<div class="inset-cards">
				<div class="d-flex gap-3">
					<xsl:for-each select="$items">
						<xsl:variable name="image" select="td[1]//img[1]" />
						<xsl:variable name="content" select="td[2]" />
						<xsl:variable
									  name="column-class"
									  select="
											  if ($item-count = 1) then 'col-12'
											  else if ($item-count = 2) then 'col-12 col-lg-6 mb-4 mb-lg-0'
											  else 'col-12 col-lg-4 mb-4 mb-lg-0'
											  "
									  />

						<div class="{$column-class}">
							<div class="d-flex flex-column justify-content-center align-items-center">
								<img src="{$image/@src}" alt="{$image/@alt}" />
								<div class="text-overlay">
									<p>
										<xsl:value-of select="ou:textual-content($content)" />
									</p>
								</div>
							</div>
						</div>
					</xsl:for-each>
				</div>
			</div>
		</xsl:if>
	</xsl:template>
	<!-- END Three Column with Image and Inset Text snippet table -->


	<!-- Cards 2-up Optional Image -->
	<xsl:template match="table[@data-snippet = 'ou-two-boxes']">
		<xsl:variable name="box-one-heading" select="tbody/tr[3]/td[1]/node()"/>
		<xsl:variable name="box-two-heading" select="tbody/tr[3]/td[2]/node()"/>

		<xsl:variable name="box-one-body" select="tbody/tr[4]/td[1]/node()"/>
		<xsl:variable name="box-two-body" select="tbody/tr[4]/td[2]/node()"/>

		<xsl:variable name="box-one-image-src" select="tbody/tr[5]/td[1]/img/@src"/>
		<xsl:variable name="box-two-image-src" select="tbody/tr[5]/td[2]/img/@src"/>

		<xsl:variable name="box-one-image-alt" select="tbody/tr[5]/td[1]/img/@alt"/>
		<xsl:variable name="box-two-image-alt" select="tbody/tr[5]/td[2]/img/@alt"/>

		<div class="row">
			<div class="col-lg-6">
				<div class="card">
					<img class="" src="{$box-one-image-src}" alt="{$box-one-image-alt}"/>
					<div class="card-body">
						<h3 class="card-title">
							<xsl:copy-of select="$box-one-heading"/>
						</h3>
						<p class="card-text">
							<xsl:copy-of select="$box-one-body"/>
						</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<div class="card">
					<img class="" src="{$box-two-image-src}" alt="{$box-two-image-alt}"/>
					<div class="card-body">
						<h3 class="card-title">
							<xsl:copy-of select="$box-two-heading"/>
						</h3>
						<p class="card-text">
							<xsl:copy-of select="$box-two-body"/>
						</p>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- END Cards 2-up Optional Image -->


	<!-- END Updated exsiting snippets-->







	<!-- Dropdown Menu -->
	<xsl:template match="table[@data-snippet='ou-dropdown-menu']">
		<xsl:variable name="accordion-id" select="concat('accordion-', generate-id())" />
		<xsl:variable name="collapse-id" select="concat($accordion-id, '-collapse-one')" />
		<xsl:variable name="title" select="ou:textual-content(tbody/tr/td[@data-name='title'][1])" />
		<xsl:variable name="columns" select="tbody/tr[@data-row='item']/td[@data-name='column-links'][.//a]" />
		<xsl:variable name="column-count" select="count($columns)" />

		<div class="row">
			<div class="col-12">
				<div class="accordion accordion-single" id="{$accordion-id}">
					<div class="accordion-item">
						<h2 class="accordion-header">
							<button
									class="accordion-button collapsed"
									type="button"
									data-bs-toggle="collapse"
									data-bs-target="#{$collapse-id}"
									aria-expanded="true"
									aria-controls="{$collapse-id}"
									>
								<xsl:value-of select="$title" />
							</button>
						</h2>
						<div id="{$collapse-id}" class="accordion-collapse collapse">
							<div class="accordion-body">
								<xsl:for-each select="$columns">
									<xsl:variable
												  name="column-class"
												  select="
														  if ($column-count = 1) then 'col-12 sub-column'
														  else if ($column-count = 2) then 'col-12 col-md-6 sub-column'
														  else 'col-12 col-md-4 sub-column'
														  "
												  />

									<div class="{$column-class}">
										<div class="d-flex flex-column">
											<xsl:copy-of select=".//a" />
										</div>
									</div>
								</xsl:for-each>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- END Dropdown Menu -->

	<!-- Spacer -->
	<xsl:template match="table[@data-snippet='ou-spacer']">
		<div class="spacer"></div>
	</xsl:template>
	<!-- END Spacer -->

	<!-- Content Container -->
	<xsl:template match="table[@data-snippet='ou-content-container']">
		<div class="container">
			<xsl:apply-templates select="./tbody/tr/td/node()"/>
		</div>
	</xsl:template>
	<!-- END Content Container -->

	<!-- Icon Cards -->
	<xsl:template match="table[@data-snippet='ou-icon-cards']">
		<div class="section icon-links">
			<div class="container ">
				<div class="row">
					<xsl:for-each select="tbody/tr[@data-row='item'][td[@data-name='link']]">
						<xsl:variable name="icon" select="td[@data-name='icon']//img"/>
						<xsl:variable name="link" select="td[@data-name='link']//a"/>
						<xsl:variable name="item-class"
									  select="
											  if (position() = 1) then 'col-6 col-md-2 offset-md-1'
											  else if (position() = last() and last() mod 2 = 1) then 'col-6 col-md-2 offset-3 offset-md-0'
											  else 'col-6 col-md-2'
											  "/>

						<div class="{$item-class}">
							<a class="link-icon">
								<xsl:copy-of select="$link/@*[name() != 'class']"/>
								<xsl:if test="$icon/@src">
									<img src="{$icon/@src}" alt="{$icon/@alt}" />
								</xsl:if>
								<span><xsl:value-of select="ou:textual-content($link)"/></span>
							</a>
						</div>
					</xsl:for-each>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- End Icon Links -->

	<xsl:template match="table[@class='ou-snippet-calendar-sidenav']">
		<nav aria-label="Right Navigation Menu">
			<div class="content">
				<ul class="calendar-list">
					<xsl:for-each select="tbody/tr">
						<li><xsl:apply-templates select="td/node()" /></li>
					</xsl:for-each>
				</ul>
			</div>
		</nav>
	</xsl:template>

	<!-- Generic Tables -->
	<xsl:template match="table">
		<div class="table-responsive">
			<xsl:copy-of select="." />
		</div>
	</xsl:template>
	<!-- END Generic Tables -->











</xsl:stylesheet>