<beginfold id='1'><!--</beginfold id='1'> Mustache / Handlebars / Ractive template <endfold id='1'>--></endfold id='1'>
<beginfold id='2'><!DOCTYPE</beginfold id='2'> html<endfold id='2'>></endfold id='2'>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{{title}}</title>
    </head>
    <beginfold id='1'><!--</beginfold id='1'> CSS <endfold id='1'>--></endfold id='1'>
    <beginfold id='3'><style</beginfold id='3'>>
        <beginfold id='4'>/*</beginfold id='4'> Mustache variable support in CSS is incomplete <endfold id='4'>*/</endfold id='4'>
        {{mustache}}
        [ {{other}} ]
        body <beginfold id='5'>{</beginfold id='5'>
            {{{other}}}
            font-size: 15pt;
            font-family: Verdana;
        <endfold id='5'>}</endfold id='5'>
    <endfold id='3'></style</endfold id='3'>>
    <beginfold id='1'><!--</beginfold id='1'> JavaScript <endfold id='1'>--></endfold id='1'>
    <beginfold id='6'><script</beginfold id='6'>>
        var foo = {{bar}};
        `template {{foo}} ${ var a = {{b}} }`
    <endfold id='6'></script</endfold id='6'>>

    <body>
    <beginfold id='7'>{{#movie</beginfold id='7'>}}
        <beginfold id='8'><div</beginfold id='8'>>
            <h1>{{title}}</h1>
            <img src="{{poster}}" alt="{{title}}"/>
        <endfold id='8'></div</endfold id='8'>>
        <beginfold id='8'><div</beginfold id='8'>>
            Rating - {{ratings.critics_rating}}
        <endfold id='8'></div</endfold id='8'>>
    <endfold id='7'>{{/movie}}</endfold id='7'>
    <beginfold id='7'>{{^movie</beginfold id='7'>}}
        <beginfold id='8'><div</beginfold id='8'>>
            Movie Does Not Exist :(
        <endfold id='8'></div</endfold id='8'>>
    <endfold id='7'>{{/movie}}</endfold id='7'>
    <beginfold id='9'>{{!</beginfold id='9'> this is a comment TODO ALERT <endfold id='9'>}}</endfold id='9'>

    This is a partial {{> partial1 }}
    <beginfold id='7'>{{#block</beginfold id='7'>
        param=foo
        param2=bar}}
        {{block foo=bar}}
    <endfold id='7'>{{/block}}</endfold id='7'>

    <beginfold id='1'><!--</beginfold id='1'> Handlebars <endfold id='1'>--></endfold id='1'>

    <beginfold id='7'>{{#list</beginfold id='7'> people}}{{firstName}} {{lastName}}<endfold id='7'>{{/list}}</endfold id='7'>
    <beginfold id='7'>{{#noop</beginfold id='7'>}}{{body}}<endfold id='7'>{{/noop}}</endfold id='7'>
    <beginfold id='7'>{{#with</beginfold id='7'> story}}
        <beginfold id='8'><div</beginfold id='8'> class="intro">{{{intro}}}<endfold id='8'></div</endfold id='8'>>
        <beginfold id='8'><div</beginfold id='8'> class="body">{{{body}}}<endfold id='8'></div</endfold id='8'>>
    <endfold id='7'>{{/with}}</endfold id='7'>
    <beginfold id='7'>{{#each</beginfold id='7'> comments}}
        <beginfold id='8'><div</beginfold id='8'> class="comment">
            <h2>{{subject}}</h2>
            {{{body}}}
        <endfold id='8'></div</endfold id='8'>>
    <endfold id='7'>{{/each}}</endfold id='7'>
    <beginfold id='7'>{{#list</beginfold id='7'> nav}}
        <a href="{{url}}">{{title}}</a>
    <endfold id='7'>{{/list}}</endfold id='7'>

    <beginfold id='10'>{{!--</beginfold id='10'> Conditionals <endfold id='10'>--}}</endfold id='10'>
    <beginfold id='7'>{{#if</beginfold id='7'> isActive}}
        <img src="star.gif" alt="Active">
    {{else if isInactive}}
        <img src="cry.gif" alt="Inactive">
    {{else}}
        <img src="cry.gif" alt="">
    <endfold id='7'>{{/if}}</endfold id='7'>

    <beginfold id='10'>{{!--</beginfold id='10'> Escaping <endfold id='10'>--}}</endfold id='10'>
    \{{escaped}}
    <beginfold id='11'>{{{{raw}}}}</beginfold id='11'>
        {{escaped}}
    <endfold id='11'>{{{{/raw}}}}</endfold id='11'>

    <beginfold id='10'>{{!--</beginfold id='10'> Whitespace Control <endfold id='10'>--}}</endfold id='10'>
    <beginfold id='7'>{{#each</beginfold id='7'> nav ~}}
        <a href="{{url}}">
            <beginfold id='7'>{{~#if</beginfold id='7'> test}}
                {{~title}}
            {{~^~}}
                Empty
            {{~/if~<endfold id='7'>}}</endfold id='7'>
        </a>
    <endfold id='7'>{{~/each}}</endfold id='7'>

    <beginfold id='10'>{{!--</beginfold id='10'> Helpers <endfold id='10'>--}}</endfold id='10'>
    {{link "See more..." story.url}}
    {{log "Look at me!" level="error"}}

    <beginfold id='10'>{{!--</beginfold id='10'> Partial <endfold id='10'>--}}</endfold id='10'>
    {{> myPartial name=../name }}
    <beginfold id='7'>{{#> myPartial</beginfold id='7'> }}
        Failover content
    <endfold id='7'>{{/myPartial}}</endfold id='7'>
    <beginfold id='7'>{{#*inline</beginfold id='7'> "myPartial"}}
        My Content
    <endfold id='7'>{{/inline}}</endfold id='7'>
    <beginfold id='7'>{{#each</beginfold id='7'> children}}
        {{> myPartial}}
    <endfold id='7'>{{/each}}</endfold id='7'>

    <beginfold id='1'><!--</beginfold id='1'> Delimiters in tags (folding) <endfold id='1'>--></endfold id='1'>
    word<beginfold id='8'><div</beginfold id='8'>>word

    word<endfold id='8'></div</endfold id='8'>>word

    </body>
</html>
