<?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>
            <style type="text/css">
               html { overflow:auto; background-color:white; }
               body { margin:15px 15px 0 15px; background-color:transparent; font-family:Segoe UI, Segoe, Tahoma, Helvetica, Arial, sans-serif; color:#666; font-size:12px; cursor: default; }
               div.outer { }
               div.infoBar { margin:0 -15px; font-family:Segoe UI, Tahoma, Arial, sans-serif; padding:5px 10px; border-bottom:1px solid saddlebrown; background:cornsilk; color:SaddleBrown; font-size:15px; background-image:url(../../site/styles/mscrm60/iconInformation.png); background-repeat:no-repeat; background-position:7px 7px; }
               div.infoBar span { margin-left:20px; display:block; }
               div.modelHeader { font-size: 27px; font-weight: lighter; line-height: 30px; padding-bottom: 10px; color: #262626; }
               div.cat { font-size: 12px; color: #666; text-transform: uppercase; margin-top: 8px; font-weight: bolder; display: block; clear: all; }
               div.opt { height: 21px; margin-top: 4px; cursor: pointer; clear: all; width:100%; position:relative; }
               div.optDsc { position:absolute; left:15px; right: 140px; top: 2px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width: 150px; }
               div.optQty { position:absolute; right:90px; width: 50px; top: 2px; text-align: center; }
               div.optPrc { position:absolute; right:15px; width: 100px; top: 2px; text-align: right; }
               div.opt:hover { background-color: #d7ebf9; }
               div.total { height: 24px; margin: 4px -15px 0 -15px; color: #262626; background-color: #f8f8f8; border-top: solid 1px #d6d6d6; clear:all; position: relative;}
               div.totalCap { position:absolute; color: #666; text-transform: uppercase; font-weight: bolder; top: 3px; left: 4px; }
               div.totalPrc { position:absolute; right:15px; width: 100px; top: 3px; text-align: right; }

               table.props { margin-left:75px; position: relative; clear: all; }
               table.props td.label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-width:150px; padding-right:15px; }
               table.props td.value { }

               /*
               @media print {
               .noPrint, .expandButton { visibility:hidden;   /* suppressed, but still allocate the space for them */ }
               }
               */
            </style>
            <script type="text/javascript">
               <![CDATA[
               function toggleOption(opt) {
                  var props = document.getElementById("props_" + opt.id);
                  if ( props ) {
                     props.style.display = ( props.style.display == "none" || props.style.display == "" ) ? "block" : "none";
                  }
                  window.parent.resizeIFrame();
               }
               ]]>
            </script>
         </head>
         <body>
            <xsl:apply-templates />
         </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:variable name="lineItemId" select="@id" />
      <xsl:variable name="hasErrors" select="@haserrors" />
      <xsl:variable name="isDraft" select="@isdraft" />
      <div class="outer">
         <xsl:if test="$hasErrors > 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="$isDraft > 0">
                  <span>
                     <xsl:value-of select="qv:GetIsDraftModeText()" />
                  </span>
               </xsl:if>
            </div>
         </xsl:if>
         <div class="modelHeader">
            <xsl:choose>
               <xsl:when test="qv:HasConfigurationDisplayName($lineItemId) = true()">
                  <xsl:value-of select="qv:GetConfigurationDisplayName($lineItemId)" disable-output-escaping="yes" />
               </xsl:when>
               <xsl:otherwise>
                  <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: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:otherwise>
            </xsl:choose>
         </div>
         <xsl:apply-templates select="(category[not(@hide)]|category[@hide='0'])[option]" />
         <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">
      <div class="cat"><xsl:value-of select="description" /></div>
      <xsl:apply-templates select="option" />
   </xsl:template>

   <xsl:template match="option">
      <div class="opt" id="{generate-id(.)}" onclick="toggleOption(this);">
         <div class="optDsc"><xsl:value-of select="description" /></div>
         <div class="optQty"><xsl:value-of select="quantity" /></div>
         <div class="optPrc"><xsl:value-of select="p:FormatProperty('Price', quantity * unitprice)" /></div>
      </div>
      <xsl:if test="count(property[not(@hide)]|property[@hide='0']) &gt; 0">
         <table class="props" 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: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>