<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:eat="http://msqr.us/xsd/ieat" 
	xmlns:xweb="http://msqr.us/xsd/jaxb-web"
	exclude-result-prefixes="eat xweb">
	
	<!-- imports -->
	<xsl:import href="tmpl/default-layout.xsl"/>
	
	<!-- layout variables -->
	<xsl:variable name="layout.global.nav.page" select="''"/>
	
	<!-- helper variables -->
	<xsl:variable name="originalRecipe" select="$aux/eat:ui/eat:recipe[1]"/>
	<xsl:variable name="recipe" select="$aux/eat:ui/eat:recipe[2]"/>
	
	<xsl:template match="xweb:x-data" mode="page-title">
		<xsl:value-of select="key('i18n','import-recipe-ingredients.title')"/>
	</xsl:template>
	
	<xsl:template match="xweb:x-data" mode="page-head-content">
		<link rel="stylesheet" type="text/css" href="{$web-context}/css/edit-recipe.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="{$web-context}/css/jquery.autocomplete.css" media="screen" />
		<script type="text/javascript" src="{$web-context}/js/jquery-1.3.2.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/jquery.ajaxQueue.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/jquery.autocomplete.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/xweb-locale.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/ieat-util.js" xml:space="preserve"> </script>
		<script type="text/javascript" src="{$web-context}/js/edit-recipe.js" xml:space="preserve"> </script>
	</xsl:template>

	<xsl:template match="xweb:x-data" mode="page-body">
		<div class="intro">
			<xsl:value-of select="key('i18n','import-recipe-ingredients.intro')"/>
		</div>
		
		<form method="post" action="{$web-context}{$ctx/xweb:path}">
			<table class="form">
				<tr>
					<th>
						<xsl:value-of select="key('i18n','recipe.name.displayName')"/>
					</th>
					<td>
						<xsl:value-of select="$recipe/eat:name"/>
					</td>
				</tr>
				<tr>
					<th>
						<xsl:if test="$err[@field='recipe.system.systemId']">
							<xsl:attribute name="class">error</xsl:attribute>
						</xsl:if>
						<xsl:value-of select="key('i18n','recipe.system.displayName')"/>
					</th>
					<td>
						<select name="recipe.system.systemId">
							<option/>
							<xsl:apply-templates select="$aux/eat:ui/eat:system"/>
						</select>
					</td>
				</tr>
			</table>
			<table class="form" id="ingredient_table">
				<xsl:apply-templates select="$recipe/eat:ingredient"/>
			</table>

			<input type="submit" name="_target2"
				value="{key('i18n','continue.displayName')}"/>
			<xsl:text> </xsl:text>
			<input type="submit" name="_cancel"
				value="{key('i18n','cancel.displayName')}"/>
			
		</form>
	</xsl:template>
	
	<xsl:template match="eat:recipe/eat:ingredient">
		<xsl:variable name="myPosition" select="position()"/>
		<xsl:variable name="row-index" select="$myPosition - 1"/>
		<xsl:variable name="me" select="."/>
		<xsl:variable name="errkey">
			<xsl:text>recipe.ingredient[</xsl:text>
			<xsl:value-of select="$row-index"/>
			<xsl:text>]</xsl:text>
		</xsl:variable>
		<tr valign="top">
			<xsl:attribute name="class">
				<xsl:text>recipe-ingredient</xsl:text>
				<xsl:if test="($myPosition mod 2) = 0">
					<xsl:text> even</xsl:text>
				</xsl:if>
			</xsl:attribute>
			<th rowspan="2">
				<xsl:value-of select="$myPosition"/>
			</th>
			<td>
				<i>
					<xsl:value-of select="key('i18n','imported-ingredient-original-value.displayName')"/>
					<xsl:text>: </xsl:text>
				</i>
			</td>
			<td>
				<xsl:value-of select="$originalRecipe/eat:ingredient[$myPosition]/@quantity"/>
			</td>
			<td>
				<xsl:value-of select="$originalRecipe/eat:ingredient[$myPosition]/eat:unit"/>
			</td>
			<td>
				<xsl:value-of select="$originalRecipe/eat:ingredient[$myPosition]/eat:ingredient"/>
			</td>
			<td>
				<xsl:value-of select="$originalRecipe/eat:ingredient[$myPosition]/@qualifier"/>
			</td>
		</tr>
		<tr>
			<xsl:if test="($myPosition mod 2) = 0">
				<xsl:attribute name="class">even</xsl:attribute>
			</xsl:if>
			<td>
				<i>
					<xsl:choose>
						<xsl:when test="$err[starts-with(@field,$errkey)]">
							<span class="error">
								<b>
									<xsl:value-of 
										select="key('i18n','imported-ingredient-imported-value.displayName')"/>
									<xsl:text>: </xsl:text>
								</b>
							</span>
						</xsl:when>
						<xsl:otherwise>
							<xsl:value-of 
								select="key('i18n','imported-ingredient-imported-value.displayName')"/>
							<xsl:text>: </xsl:text>
						</xsl:otherwise>
					</xsl:choose>			
				</i>
			</td>
			<td>
				<input type="text" name="recipe.ingredient[{$row-index}].quantity" class="smallnum"
					value="{@quantity}" maxlength="8"/>
			</td>
			<td>
				<select name="recipe.ingredient[{$row-index}].unit.unitId">
					<option value="0"></option>
					<xsl:call-template name="recipe-ingredient">
						<xsl:with-param name="ingredient" select="."/>
					</xsl:call-template>
				</select>
			</td>
			<td>
				<a class="ingredient-type-chooser ingredient" href="#"
					title="Click to use a recipe for this ingredient">
					<xsl:attribute name="class">
						<xsl:text>ingredient-type-chooser </xsl:text>
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:text>recipe</xsl:text>
							</xsl:when>
							<xsl:otherwise>
								<xsl:text>ingredient</xsl:text>
							</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>
					<xsl:attribute name="title">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:value-of select="key('i18n','edit.recipe.ingredientTypeChooser.recipe.title')"/>
							</xsl:when>
							<xsl:otherwise>
								<xsl:value-of select="key('i18n','edit.recipe.ingredientTypeChooser.ingredient.title')"/>
							</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>
					<span class="alt">
						<xsl:value-of select="key('i18n','ingredient.type.chooser.displayName')"/>
					</span>
				</a>
				<div id="recipe.ingredient[{$row-index}].ingredient">
					<xsl:attribute name="style">
						<xsl:text>float: left;</xsl:text>
						<xsl:if test="eat:recipe/@recipeId">
							<xsl:text> display: none;</xsl:text>
						</xsl:if>
					</xsl:attribute>
					<input type="text" 
						name="recipe.ingredient[{$row-index}].ingredient.name" 
						id="recipe.ingredient[{$row-index}].ingredient.name" 
						class="ingredient-autocomplete">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="value">
									<xsl:value-of select="eat:ingredient/eat:name"/>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
					<input type="hidden" 
						name="recipe.ingredient[{$row-index}].ingredient.ingredientId"
						id="recipe.ingredient[{$row-index}].ingredient.ingredientId">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="value">
								<xsl:value-of select="eat:ingredient/@ingredientId"/>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
				</div>
				<div id="recipe.ingredient[{$row-index}].recipe">
					<xsl:attribute name="style">
						<xsl:text>float: left;</xsl:text>
						<xsl:if test="not(eat:recipe/@recipeId)">
							<xsl:text> display: none;</xsl:text>
						</xsl:if>
					</xsl:attribute>
					<input type="text"
						name="recipe.ingredient[{$row-index}].recipe.name"
						id="recipe.ingredient[{$row-index}].recipe.name"
						class="recipe-autocomplete">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="value">
									<xsl:value-of select="eat:recipe/eat:name"/>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
					<input type="hidden" 
						name="recipe.ingredient[{$row-index}].recipe.recipeId"
						id="recipe.ingredient[{$row-index}].recipe.recipeId">
						<xsl:choose>
							<xsl:when test="eat:recipe/@recipeId">
								<xsl:attribute name="value">
									<xsl:value-of select="eat:recipe/@recipeId"/>
								</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="disabled">
									<xsl:text>disabled</xsl:text>
								</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</input>
				</div>
			</td>
			<td>
				<input type="text" name="recipe.ingredient[{$row-index}].qualifier" 
					value="{@qualifier}" maxlength="128"/>
			</td>
		</tr>
	</xsl:template>

	<xsl:template match="eat:system">
		<option value="{@systemId}">
			<xsl:if test="@systemId = $recipe/eat:system/@systemId">
				<xsl:attribute name="selected">selected</xsl:attribute>
			</xsl:if>
			<xsl:value-of select="."/>
		</option>
	</xsl:template>

	<xsl:template name="ingredient-ingredient">
	    	<xsl:param name="ingredient"/>
	    	<option value="{@ingredientId}">
	    		<xsl:if test="@ingredientId = $ingredient/eat:ingredient/@ingredientId">
	    			<xsl:attribute name="selected">selected</xsl:attribute>
	    		</xsl:if>
	    		<xsl:value-of select="eat:name"/>
	    	</option>
	</xsl:template>
    
	<xsl:template name="recipe-ingredient">
		<xsl:param name="ingredient"/>
		<xsl:for-each select="$aux/eat:ui/eat:unit">
			<option value="{@unitId}">
				<xsl:if test="(@unitId = $ingredient/eat:unit/@unitId) 
					or (@abbreviation = $ingredient/eat:unit/@abbreviation)">
					<xsl:attribute name="selected">selected</xsl:attribute>
				</xsl:if>
				<xsl:value-of select="."/>
			</option>
		</xsl:for-each>
	</xsl:template>

</xsl:stylesheet>
