<div id="page-diffs">
    ## Due to these diffs appearing in emails we use <table> rather than a CSS-styled list, and inline styles for the
    ## change backgrounds.
    <table class="diff" cellpadding="0" cellspacing="0">
    #foreach ( $lineChunk in $lineChunks )
        #set ($lineClass = $lineChunk.type.className)
        #set ($lineStyleHtml = "$lineClass")
        #if ($lineClass == "diff-deleted-lines") #set ($lineStyleHtml = ' style="color:#999;background-color:#fdd;text-decoration:line-through;"')
        #elseif ($lineClass == "diff-added-lines") #set ($lineStyleHtml = ' style="background-color: #dfd;"')
        #end
        <tr><td class="$lineClass"$!lineStyleHtml>#trim()
            #if ($lineChunk.isChangedChunk())
                #foreach ( $line in $lineChunk.lines )
                    #foreach ( $wordChunk in $line.wordChunks )
                        #if ($wordChunk.isChangedChunk())<span class="diff-changed-word">
                            #foreach ( $charChunk in $wordChunk.characterChunks )#trim()
                                #set ($charClass = $charChunk.type.className)
                                #set ($charStyleHtml = "$charClass")
                                #if ($charClass == "diff-deleted-chars") #set ($charStyleHtml = ' style="color:#999;background-color:#fdd;text-decoration:line-through;"')
                                #elseif ($charClass == "diff-added-chars") #set ($charStyleHtml = ' style="background-color: #dfd;"')
                                #end
                                <span class="$charClass$charClass"$!charStyleHtml>$charChunk.text</span>
                            #end#end</span>
                        #elseif ($wordChunk.type.className == "diff-unchanged") $wordChunk.text
                        #else
                            #set ($wordClass = $wordChunk.type.className)
                            #set ($wordStyleHtml = "$wordClass")
                            #if ($wordClass == "diff-deleted-words") #set ($wordStyleHtml = ' style="color:#999;background-color:#fdd;text-decoration:line-through;"')
                            #elseif ($wordClass == "diff-added-words") #set ($wordStyleHtml = ' style="background-color: #dfd;"')
                            #end
                            <span class="$wordClass"$!wordStyleHtml>$wordChunk.text</span>
                        #end
                    #end
                #end
            #else
                #set ($textHtml = $lineChunk.getJoinedStringLines("<br>"))
                #if ("$!textHtml" == "")
                    #set ($textHtml = "&nbsp;")
                #end
                #if ($lineChunk.type.className == "diff-snipped")
                    <div class="diff-snip-link">...</div>#if ($allowSnipToggle)<div class="diff-snip-text hidden">$textHtml</div>#end
                #else
                    $textHtml
                #end
            #end
    #end</td></tr>
    #end
    </table>
</div>
#if ($allowSnipToggle)
<script type="text/javascript">
    (function($) {
        $(".diff-snipped").each(function() {
            var snip = $(this).find(".diff-snip-text.hidden");
            snip.removeClass("hidden").hide();       // Hide, JQuery-style
            this.style.cursor = "pointer";
            this.title = "Click to toggle hidden lines of context";  // HACK - not i18ned
            $(this).click(function() {
                var hidden = $(this).find("div:hidden");
                var visible = $(this).find("div:visible");
                visible.slideUp(function() {
                    hidden.slideDown();
                });
            });
        });
    })(AJS.$);
</script>
#end
