<?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"
                xmlns:qv="urn:QuickViewXmlUtil"
                xmlns:p="urn:PropertyXmlUtil">
   <xsl:template match="/">
      <xsl:text disable-output-escaping="yes">
      <![CDATA[<!DOCTYPE html>]]>
      </xsl:text>
      <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
            <title>Configuration: Quick View</title>
            <link rel="stylesheet" href="{qv:GetThemeStyleSheetUrl()}" />

            <script type="text/javascript">
               <xsl:text disable-output-escaping="yes">
                  <![CDATA[
                  function showProps( e, btn ) {
                     var id = btn.id.replace( "propBtn_", "" );
                     var propElem = document.getElementById( "props_" + id );

                     if ( btn.classList.contains( "active" ) ) {
                        btn.classList.remove( "active" );
                     }
                     else {
                        btn.classList.add( "active" );
                        var childBtn = document.getElementById( "childBtn_" + id );
                        if ( childBtn && childBtn.classList.contains( "active" ) ) {
                           childBtn.classList.remove( "active" );
                           var childElem = document.getElementById( "child_" + id );
                           toggleDisplayState( childElem );
                        }
                     }
                     toggleDisplayState( propElem );
                     window.parent.resizeIFrame();
                  }

                  function showChild( e, btn ) {
                     var id = btn.id.replace( "childBtn_", "" );
                     var childElem = document.getElementById( "child_" + id );

                     if ( btn.classList.contains( "active" ) ) {
                        // if the button is 'active', we're toggling the button off and hiding the child config
                        btn.classList.remove( "active" );
                     }
                     else {
                        // if the button wasn't active, we need to check if the prop button is active and if it is, turn it off and hide the props
                        btn.classList.add( "active" );
                        var propBtn = document.getElementById( "propBtn_" + id );
                        if ( propBtn && propBtn.classList.contains( "active" ) ) {
                           propBtn.classList.remove( "active" );
                           var propElem = document.getElementById( "props_" + id );
                           toggleDisplayState( propElem );
                        }
                     }
                     toggleDisplayState( childElem );
                     window.parent.resizeIFrame();
                  }

                  function toggleDisplayState( elem ) {
                     if ( elem ) elem.style.display = ( elem.style.display === "none" || elem.style.display === "" ) ? "block" : "none";
                  }
                  ]]>
               </xsl:text>
            </script>
         </head>
         <body style="margin: 0;" scrollable="">
            <div class="xQV">
               <xsl:apply-templates />
            </div>
         </body>
      </html>
   </xsl:template>

   <xsl:template match="mpcconfiguration">
      <xsl:apply-templates select="notfound" />
      <xsl:apply-templates select="error" />
      <xsl:apply-templates select="lineitem" />
   </xsl:template>

   <xsl:template match="error">
      <div style="margin:8px;">
         <span style="font-size:14px;font-weight:bold;">Unable to display the configuration in the Quick View.</span>
         <br />Please contact your administrator for assistance.
      </div>
   </xsl:template>

   <xsl:template match="notfound">
      <div style="margin:8px;">
         <span style="font-size:14px;font-weight:bold;">There is no configuration to display.</span>
         <br />A configuration must be saved before it can be displayed in the Quick View.
      </div>
   </xsl:template>

   <xsl:template match="lineitem">
      <xsl:param name="depth" select="1" />
      <xsl:variable name="lineItemId" select="@id" />
      <xsl:variable name="hasErrors" select="@haserrors" />
      <xsl:variable name="isLocked" select="@islocked" />
      <xsl:variable name="isDraft" select="@isdraft" />
      <xsl:variable name="seriesText">
         <xsl:choose>
            <xsl:when test="not(seriesdesc)">
               <xsl:value-of select="@seriesid" />
            </xsl:when>
            <xsl:otherwise>
               <xsl:value-of select="seriesdesc" />
            </xsl:otherwise>
         </xsl:choose>
      </xsl:variable>
      <xsl:variable name="modelText">
         <xsl:choose>
            <xsl:when test="not(modeldesc)">
               <xsl:value-of select="@modelid" />
            </xsl:when>
            <xsl:otherwise>
               <xsl:value-of select="modeldesc" />
            </xsl:otherwise>
         </xsl:choose>
      </xsl:variable>
      <xsl:variable name="levelClass">
         <xsl:choose>
            <xsl:when test="$depth &gt; 5">
               <xsl:text>l5</xsl:text>
            </xsl:when>
            <xsl:otherwise>
               <xsl:text>l</xsl:text>
               <xsl:value-of select="$depth"/>
            </xsl:otherwise>
         </xsl:choose>
      </xsl:variable>
      <div class="outer">
         <xsl:if test="$hasErrors > 0 or $isLocked > 0 or $isDraft > 0">
            <div class="infoBar">
               <xsl:if test="$hasErrors > 0">
                  <span>
                     <xsl:value-of select="qv:GetHasErrorsText()" />
                  </span>
               </xsl:if>
               <xsl:if test="$isLocked = 1">
                  <span>
                     <xsl:value-of select="qv:GetIsLockedText()" />
                  </span>
               </xsl:if>
               <xsl:if test="$isLocked = 2">
                  <span>
                     <xsl:value-of select="qv:GetIsPendingLockText()" />
                  </span>
               </xsl:if>
               <xsl:if test="$isDraft > 0">
                  <span>
                     <xsl:value-of select="qv:GetIsDraftModeText()" />
                  </span>
               </xsl:if>
            </div>
         </xsl:if>
         <div class="modelHeader {$levelClass}">
            <xsl:choose>
               <xsl:when test="qv:HasConfigurationDisplayName($lineItemId) = true()">
                  <xsl:value-of select="qv:GetConfigurationDisplayName($lineItemId)" disable-output-escaping="yes" />
               </xsl:when>
               <xsl:otherwise>
                  <span>
                     <xsl:copy-of select="$seriesText"/>, <xsl:copy-of select="$modelText"/>
                  </span>
               </xsl:otherwise>
            </xsl:choose>
         </div>
         <xsl:apply-templates select="(category[not(@hide)]|category[@hide='0'])[option]">
            <xsl:with-param name="depth" select="$depth + 1" />
         </xsl:apply-templates>
         <div class="total">
            <div class="totalCap">Total Price:</div>
            <div class="totalPrc">
               <xsl:value-of select="p:FormatProperty('Price', unitprice)" />
            </div>
         </div>
      </div>
   </xsl:template>

   <xsl:template match="category">
      <xsl:param name="depth" />
      <div class="cat">
         <xsl:value-of select="description" />
      </div>
      <xsl:apply-templates select="option">
         <xsl:with-param name="depth" select="$depth" />
      </xsl:apply-templates>
   </xsl:template>

   <xsl:template match="option">
      <xsl:param name="depth" />
      <xsl:variable name="childConfigId" select="@childconfigid" />
      <xsl:variable name="hasProps" select="count(property[not(@hide)]|property[@hide='0']) &gt; 0" />
      <div class="opt">
         <xsl:if test="$childConfigId != ''">
            <div class="child-config" id="childBtn_{generate-id(.)}" onclick="showChild(event, this);">
               <img src="{qv:GetThemeDirectory()}/btnQvConfigHierarchy.png" />
            </div>
         </xsl:if>
         <div id="propBtn_{generate-id(.)}">
            <xsl:choose>
               <xsl:when test="$hasProps">
                  <xsl:attribute name="class">optDsc hasProps</xsl:attribute>
                  <xsl:attribute name="onclick">showProps(event, this);</xsl:attribute>
               </xsl:when>
               <xsl:otherwise>
                  <xsl:attribute name="class">optDsc</xsl:attribute>
               </xsl:otherwise>
            </xsl:choose>
            <xsl:value-of select="description" />
         </div>
         <div class="optPrc">
            <xsl:value-of select="p:FormatProperty('Price', quantity * unitprice)" />
         </div>
         <div class="optQty">
            <xsl:value-of select="format-number(quantity, '###,###,###.##')" />
         </div>
      </div>
      <xsl:if test="$hasProps">
         <table class="props-section" id="props_{generate-id(.)}" style="display: none;">
            <tr>
               <td></td>
            </tr>
            <!-- layout hack -->
            <xsl:apply-templates select="property[not(@hide)]|property[@hide='0']" />
         </table>
      </xsl:if>
      <xsl:if test="$childConfigId != ''">
         <div id="child_{generate-id(.)}" class="child-section" style="display: none;">
            <xsl:apply-templates select="../../childconfigs/lineitem[@id=$childConfigId]">
               <xsl:with-param name="depth" select="$depth" />
            </xsl:apply-templates>
         </div>
      </xsl:if>
   </xsl:template>

   <xsl:template match="property">
      <tr>
         <td class="label">
            <xsl:call-template name="propLabel">
               <xsl:with-param name="propId" select="@id" />
            </xsl:call-template>
         </td>
         <td class="value">
            <xsl:call-template name="formatProperty">
               <xsl:with-param name="propId" select="@id" />
               <xsl:with-param name="value" select="." />
            </xsl:call-template>
         </td>
      </tr>
   </xsl:template>

   <xsl:template name="propLabel">
      <xsl:param name="propId" />
      <xsl:choose>
         <xsl:when test="@label">
            <xsl:value-of select="@label" />:
         </xsl:when>
         <xsl:when test="ancestor::lineitem/labels/label[@id=$propId]">
            <xsl:value-of select="ancestor::lineitem/labels/label[@id=$propId]" />:
         </xsl:when>
         <xsl:otherwise>
            <xsl:value-of select="$propId" />:
         </xsl:otherwise>
      </xsl:choose>
   </xsl:template>

   <xsl:template name="formatProperty">
      <xsl:param name="propId" />
      <xsl:param name="value" />
      <xsl:choose>
         <xsl:when test="p:HasHtmlFormat($propId) = true()">
            <xsl:value-of select="p:FormatPropertyNoEscaping($propId, $value)" disable-output-escaping="yes" />
         </xsl:when>
         <xsl:otherwise>
            <xsl:value-of select="p:FormatProperty($propId, $value)" />
         </xsl:otherwise>
      </xsl:choose>
   </xsl:template>
</xsl:stylesheet>