<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0"
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:ouc="http://omniupdate.com/XSL/Variables"
xmlns="http://www.w3.org/1999/xhtml"
exclude-result-prefixes="ou xsl xs ouc">

	<!--
	*********** FULL WIDTH TEMPLATE ***********
	This will build on full with column for content and images
	-->
	<xsl:template match="table[@class='one-column-full-width']">
		<xsl:apply-templates select="tbody/tr[@class='heading' and translate(normalize-space(td), '&#160;','')]" />
		<xsl:for-each select="tbody/tr[@class='content']">
			<table class="row">
				<tr>
					<td class="wrapper last">
						<table class="twelve columns">
							<tr>
								<td>
									<xsl:apply-templates select="td/node()" />
								</td>
								<td class="expander"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</xsl:for-each>
	</xsl:template>

	<!--
	*********** 50-50 TEMPLATE ***********
	This will build two equal columns to hold images and content,
	on mobile the left column will stack above the right
	-->
	<xsl:template match="table[@class='two-column-50-50']">
		<xsl:apply-templates select="tbody/tr[@class='heading' and translate(normalize-space(td), '&#160;','')]" />
		<xsl:for-each select="tbody/tr[@class='content']">
			<table class="row">
				<tr>
					<td class="wrapper">
						<table class="six columns">
							<tr>
								<td><xsl:apply-templates select="td[1]/node()" /></td>
								<td class="expander"></td>
							</tr>
						</table>
					</td>
					<td class="wrapper last">
						<table class="six columns">
							<tr>
								<td><xsl:apply-templates select="td[2]/node()" /></td>
								<td class="expander"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</xsl:for-each>
	</xsl:template>

	<!--
	*********** TWO COLUMN FLEX LAYOUT TEMPLATE ***********
	This will build a two column layout, the left column is for images,
	the right column for content.  Column width will be determined by the end user in the snippet
	-->
	<xsl:template match="table[@class='two-column-flex']">
		<xsl:variable name="width" select="thead/tr[@class='width']" />
		<xsl:apply-templates select="tbody/tr[@class='heading' and translate(normalize-space(td), '&#160;','')]" />
		<xsl:for-each select="tbody/tr[@class='content']">
			<table class="row">
				<tr>
					<td class="wrapper">
						<table class="{$width/th[1]} columns">
							<tr>
								<td><xsl:apply-templates select="td[1]/node()" /></td>
								<td class="expander"></td>
							</tr>
						</table>
					</td>
					<td class="wrapper last">
						<table class="{$width/th[2]} columns">
							<tr>
								<td><xsl:apply-templates select="td[2]/node()" /></td>
								<td class="expander"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</xsl:for-each>
	</xsl:template>

	<!--
	*********** SNIPPET HEADINGS ***********
	This template match is used for snippets that have a heading row in their table
	transformations.  It will create a single, full width column with the content
	of the table cell.
	-->
	<xsl:template match="tr[@class='heading']">
		<table class="row">
			<tr>
				<td class="wrapper last">
					<table class="twelve columns">
						<tr>
							<td class="center">
								<center>
									<xsl:apply-templates select="td/node()" />
								</center>
							</td>
							<td class="expander"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</xsl:template>

	<!--
	*********** PANEL TEMPLATE ***********
	This will build a panel with a background color, for highlighting content
	-->
	<xsl:template match="table[@class='panel']">
		<table class="row">
			<tr>
				<td class="wrapper last">
					<table class="twelve columns">
						<tr>
							<td class="panel panel-{thead/tr[@class='color']/th/node()}">
								<xsl:apply-templates select="tbody/tr[@class='content']/td[1]/node()" />
							</td>
							<td class="expander"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</xsl:template>

	<!--
	*********** PANEL TWO COLUMN FLEX TEMPLATE ***********
	This will build a panel with a background color, for highlighting content.
	Additionally with the ability of a two column flex layout.
	-->
	<xsl:template match="table[@class='panel-two-column-flex']">
		<xsl:variable name="options" select="thead/tr[@class='options']" />
		<table class="row">
			<tr>
				<td class="wrapper last">
					<table class="twelve columns">
						<tr>
							<td class="panel panel-{$options/th[3]}">
								<xsl:apply-templates select="tbody/tr[@class='heading' and translate(normalize-space(td), '&#160;','')]" />
								<xsl:for-each select="tbody/tr[@class='content']">
									<table>
										<tr>
											<td class="wrapper">
												<table class="{$options/th[1]} sub-columns">
													<tr>
														<td><xsl:apply-templates select="td[1]/node()" /></td>
														<td class="expander"></td>
													</tr>
												</table>
											</td>
											<td class="wrapper last">
												<table class="{$options/th[2]} sub-columns">
													<tr>
														<td><xsl:apply-templates select="td[2]/node()" /></td>
														<td class="expander"></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</xsl:for-each>
							</td>
							<td class="expander"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</xsl:template>

	<!--
	*********** FULL_WIDTH BUTTON TEMPLATE ***********
	This will build a button that expands to its parent containers full width on all screen sizes
	-->
	<xsl:template match="table[@class='button-full-width']">
		<table class="{thead/tr[@class='options']/th[@class='size']}-button {thead/tr[@class='options']/th[@class='color']} {thead/tr[@class='options']/th[@class='radius']}">
			<tbody>
				<tr>
					<td><xsl:apply-templates select="tbody/tr[@class='content']/td/node()" /></td>
				</tr>
			</tbody>
		</table>
	</xsl:template>

	<!--
	*********** CENTERED BUTTON TEMPLATE***********
	This will build a button that is centered on large screens, but on mobile
	will be full width based on the parent container
	-->
	<xsl:template match="table[@class='button-centered']">
		<center>
			<table class="center four columns">
				<tr>
					<td class="twelve sub-columns">
						<table class="{thead/tr[@class='options']/th[@class='size']}-button {thead/tr[@class='options']/th[@class='color']} {thead/tr[@class='options']/th[@class='radius']}">
							<tbody>
								<tr>
									<td class="center"><xsl:apply-templates select="tbody/tr[@class='content']/td/node()" /></td>
								</tr>
							</tbody>
						</table>
					</td>
					<td class="expander"></td>
				</tr>
			</table>
		</center>
	</xsl:template>

	<!-- Simplifies adding spaces after snippets in the WYSIWYG editor. Template does not output anything -->
	<xsl:template match="h3[@class='wysiwyg-spacer']" />

	<!-- Adds the class of "center" to a p tag that preceds an image tag with the class of center -->
	<xsl:template match="p[descendant::img/attribute::class='center']">
		<p class="center"><xsl:apply-templates/></p>
	</xsl:template>

	<xsl:template match="a[ancestor::table/tbody/tr[@class='type']/td != 'grey']">
		<a>
			<xsl:copy-of select="attribute()"/>
			<xsl:attribute name="style">color:#FFFFFF;</xsl:attribute>
			<span style="color:#FFFFFF"><xsl:apply-templates /></span>
		</a>
	</xsl:template>

</xsl:stylesheet>
