<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="ISO-8859-1" indent="yes"/>
    <xsl:template match="/">
        <xsl:for-each select="recipes/recipe">
            <div class="hRecipe">
                <h3 class="hRecipe-title"><xsl:value-of disable-output-escaping="yes" select="title"/></h3>
                <img class="hRecipe-photo" alt="{title}" src="{photo}" />
                <p class="cuisine"><xsl:value-of disable-output-escaping="yes" select="cuisine"/></p>
                <p class="hRecipe-author">Author: <xsl:value-of disable-output-escaping="yes" select="author"/></p>
                <p class="hRecipe-preptime">Preparation time: <xsl:value-of disable-output-escaping="yes" select="preptime"/> <xsl:text> </xsl:text> <xsl:value-of select="preptime/@unit"/>  </p>
                <p class="hRecipe-yield">Serves <xsl:value-of select="yield/@unit"/> <xsl:text> </xsl:text> <xsl:value-of disable-output-escaping="yes" select="yield"/> </p>
                <p class="hRecipe-summary"><xsl:value-of disable-output-escaping="yes" select="description"/></p>
                <h4>Ingredients</h4>
                <ul class="hRecipe-ingredients">
                  <xsl:apply-templates select="item"/>
                </ul>
                <h4>Preparation</h4>
                <ol class="hRecipe-method">
                    <xsl:apply-templates select="method"/> 
                </ol>
            </div>
        </xsl:for-each>
    </xsl:template>
    
    <xsl:template match="item">   
        <li> <h4><xsl:value-of select="@name"/></h4>
            <ul>
        <xsl:for-each select="ingredients/ingredient">
                <li class="ingredient {@usage}"><span class="ingredient-quantity"><xsl:value-of select="@quantity"/></span><xsl:text> </xsl:text><span class="ingredient-unit"><xsl:value-of select="@unit"/></span> of <span class="ingredient-name"><xsl:value-of disable-output-escaping="yes" select="."/></span></li>
        </xsl:for-each>
            </ul>
        </li>
    </xsl:template> 


    <xsl:template match="method">    
        <xsl:for-each select="step">
                <li class="step"><xsl:value-of disable-output-escaping="yes" select="."/></li>               
        </xsl:for-each>
    </xsl:template> 

</xsl:stylesheet>