﻿<?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:value-of select="translate(@direction, 'LTR', 'ltr')"/>
        </xsl:variable>
        
        <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html></xsl:text>
        <html dir="{$pageDir}">
            <head>
                <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"/>
            </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="wrapperClassRootValue">img-wrapper</xsl:variable>
        <xsl:variable name="wrapperClassValue">
            <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>

        <span>
            <xsl:attribute name="class">
                <xsl:value-of select="$wrapperClassValue"/>
            </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="@width != ''">
                    <xsl:attribute name="style">
                        <xsl:value-of select="concat('width:100%; max-width:', @width, 'px;')"/>
                    </xsl:attribute>
                </xsl:if>
            </img>
        </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">
            <xsl:if test="closedCaptions">
                <track kind="subtitles">
                    <xsl:attribute name="src">
                        <xsl:value-of select="closedCaptions/@src"/>
                    </xsl:attribute>
                </track>
            </xsl:if>
        </video>
    </xsl:template>
</xsl:stylesheet>