﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
	<xsl:output method="html" indent="no" encoding="utf-8" />

	<!-- Strip spaces in the p element so that extra spaces do not appear in rendered output due to formatting -->
	<xsl:strip-space elements="p table"/>

	<xsl:template match="docV1|docV2">
		<xsl:variable name="pageDir">
			<xsl:call-template name="ToLowerCase">
				<xsl:with-param name="input" select="@direction"/>
			</xsl:call-template>
		</xsl:variable>

		<xsl:variable name="currentMarket">
			<xsl:call-template name="ToLowerCase">
				<xsl:with-param name="input" select="@market"/>
			</xsl:call-template>
		</xsl:variable>
		
		<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html></xsl:text>
		<html dir="{$pageDir}" market="{$currentMarket}">
			<head>
				<title>
					<xsl:value-of select="title"/>
				</title>
				<link rel="stylesheet" type="text/css" href="ms-appx-web:///Resources/TopicPage/core.css"/>
				<link rel="stylesheet" type="text/css" href="ms-appx-web:///Resources/TopicPage/core_{$pageDir}.css"/>
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
				<meta name="viewport" content="width=device-width"/>
			</head>
			<body>
				<xsl:apply-templates select="panel"/>
			</body>
		</html>
	</xsl:template>


	<!-- Panel (the core body of content) -->
	<xsl:template match="panel">
		<xsl:apply-templates />
	</xsl:template>


	<!-- Tables -->
	<xsl:template match="table">
		<table>
			<xsl:apply-templates select="header"/>
			<tbody>
				<xsl:apply-templates select="row"/>
			</tbody>
		</table>
	</xsl:template>

	<xsl:template match="table/header">
		<thead>
			<tr>
				<xsl:apply-templates select="cell"/>
			</tr>
		</thead>
	</xsl:template>

	<xsl:template match="row">
		<tr>
			<xsl:apply-templates select="cell"/>
		</tr>
	</xsl:template>

	<xsl:template match="table/header/cell">
		<td>
			<xsl:apply-templates/>
		</td>
	</xsl:template>

	<xsl:template match="table/row/cell">
		<xsl:variable name="currentCellPosition" select="position()"/>
		<xsl:variable name="headerCellContent" select="../../header/cell[$currentCellPosition]"/>

		<td>
			<xsl:if test="$headerCellContent != ''">
				<div class="thead-delegate">
					<xsl:apply-templates select="$headerCellContent/*"/>
				</div>
			</xsl:if>

			<div class="table-cell-content">
				<xsl:apply-templates/>
			</div>
		</td>
	</xsl:template>


	<!-- In-page anchors (e.g. bookmarks) -->
	<xsl:template match="bookmark">
		<a name="{@name}"/>
	</xsl:template>


	<!-- Alerts -->
	<xsl:template match="alert">
		<div class="alert alert-{@type}">
			<div class="alert-icon"><xsl:text> </xsl:text></div>

			<div class="alert-title">
				<xsl:apply-templates select="title"/>
			</div>

			<div class="alert-body">
				<xsl:apply-templates select="p|list"/>
			</div>
		</div>
	</xsl:template>


	<!-- Headers -->
	<xsl:template match="header">
		<header>
			<xsl:choose>
				<xsl:when test="@headerLevel = 1">
					<h1>
						<xsl:apply-templates/>
					</h1>
				</xsl:when>

				<!-- Note: h2 is not missing. It's the default -->

				<xsl:when test="@headerLevel = 3">
					<h3>
						<xsl:apply-templates/>
					</h3>
				</xsl:when>

				<xsl:when test="@headerLevel = 4">
					<h4>
						<xsl:apply-templates/>
					</h4>
				</xsl:when>

				<xsl:when test="@headerLevel = 5">
					<h5>
						<xsl:apply-templates/>
					</h5>
				</xsl:when>

				<xsl:when test="@headerLevel = 6">
					<h6>
						<xsl:apply-templates/>
					</h6>
				</xsl:when>

				<!-- h2 is the default -->
				<xsl:otherwise>
					<h2>
						<xsl:apply-templates/>
					</h2>
				</xsl:otherwise>
			</xsl:choose>
		</header>
	</xsl:template>


	<!-- Paragraphs -->
	<xsl:template match="p">
		<p>
			<xsl:apply-templates/>
		</p>
	</xsl:template>


	<!-- Outbound anchors (e.g. links) -->
	<xsl:template match="link">
		<a href="{@href}">
			<xsl:if test="@target = 'internal'">
				<xsl:attribute name="data-target">
					<xsl:value-of select="@target"/>
				</xsl:attribute>
			</xsl:if>

			<xsl:apply-templates select="text"/>
		</a>
	</xsl:template>


	<!-- Images -->
	<xsl:template match="img">
		<xsl:variable name="specifiedWidth" select="@width"/>

		<xsl:variable name="inlineStyleString">
			<xsl:value-of select="concat('width:100%; max-width:', $specifiedWidth, 'px;')"/>
		</xsl:variable>

		<!-- Root class -->
		<xsl:variable name="wrapperClassRootValue">img-wrapper</xsl:variable>

		<!-- Alignment class -->
		<xsl:variable name="wrapperClassAlignmentMod">
			<xsl:choose>
				<xsl:when test="@align != ''">
					<xsl:value-of select="concat($wrapperClassRootValue, ' align-', @align)"/>
				</xsl:when>
				<xsl:otherwise>
					<xsl:value-of select="$wrapperClassRootValue"/>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<!-- Caption class -->
		<xsl:variable name="wrapperClassCaptionMod">
			<xsl:choose>
				<xsl:when test="caption != ''">
					<xsl:value-of select="concat($wrapperClassAlignmentMod, ' withCaption')"/>
				</xsl:when>
				<xsl:otherwise>
					<xsl:value-of select="$wrapperClassAlignmentMod"/>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<!-- Note that the class name is built from several possible modifiers, each potentially contributing to the end-result class name -->
		<span>
			<xsl:attribute name="class">
				<xsl:value-of select="$wrapperClassCaptionMod"/>
			</xsl:attribute>

			<img>
				<xsl:attribute name="src">
					<xsl:value-of select="@src"/>
				</xsl:attribute>

				<xsl:attribute name="alt">
					<xsl:value-of select="altText"/>
				</xsl:attribute>

				<xsl:if test="$specifiedWidth != ''">
					<xsl:attribute name="style">
						<xsl:value-of select="$inlineStyleString"/>
					</xsl:attribute>
				</xsl:if>
			</img>

			<xsl:if test="caption != ''">
				<span class="caption">
					<!-- Emit width for caption when specified on image in order to keep caption in the aligment with the image -->
					<xsl:if test="$specifiedWidth != ''">
						<xsl:attribute name="style">
							<xsl:value-of select="$inlineStyleString"/>
						</xsl:attribute>
					</xsl:if>

					<xsl:apply-templates select="caption"/>
				</span>
			</xsl:if>
		</span>
	</xsl:template>


	<!-- Glyphs -->
	<xsl:template match="glyph">
		<span class="glyph"><xsl:value-of select="@value"/></span>
	</xsl:template>


	<!-- Formatted text elements -->
	<xsl:template match="text[@style='bold']">
		<b>
			<xsl:apply-templates/>
		</b>
	</xsl:template>


	<!-- Lists -->
	<xsl:template match="list/items">
		<xsl:variable name="listType" select="../@type"/>
		<xsl:choose>
			<xsl:when test="$listType = 'ordered'">
				<ol>
					<xsl:apply-templates select="item"/>
				</ol>
			</xsl:when>
			<xsl:otherwise>
				<ul>
					<xsl:apply-templates select="item"/>
				</ul>
			</xsl:otherwise>
		</xsl:choose>
	</xsl:template>

	<xsl:template match="item">
		<li>
			<xsl:apply-templates />
		</li>
	</xsl:template>


	<!-- Videos -->
	<xsl:template match="video">
		<video src="{@src}" poster="{posterImage/@src}" controls="true" class="wings-video">
			<xsl:if test="closedCaptions">
				<xsl:attribute name="data-cc">
					<xsl:value-of select="closedCaptions/@src"/>
				</xsl:attribute>
			</xsl:if>
		</video>
	</xsl:template>
	
	
	<!-- Lowercase character conversion -->
	<xsl:template name="ToLowerCase">
		<xsl:param name="input"/>
		<xsl:value-of select="translate($input, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz')"/>
	</xsl:template>
</xsl:stylesheet>