mixin list
  ul
    li foo
    li bar
    li baz
mixin pet(name)
  li.pet= name

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class, href=href)= name


mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item


doctype html
html
    title TODO supply a title
    body
        - var title = "On Dogs: Man's Best Friend";
        - var author = "enlore";
        - var theGreat = "<span>escape!</span>";

        h1= title
        - var riskyBusiness = "<em>Some of the girls are wearing my mother's clothing.</em>";
        .quote
            p Joel: !{riskyBusiness}

        p Written with love by #{author}
        p This will be safe: #{theGreat}
        - var msg = "not my inside voice";
        p This is #{msg.toUpperCase()}
        p This is #{msg.toUpperCase() == 'aa' ? 1:'not'}
        p.
          If you take a look at this page's source #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") on GitHub],
          you'll see several places where the tag interpolation operator is
          used, like so.
        ul
            each val in [1, 2, 3, 4, 5]
                li= val
        ul
            each val, index in ['zero', 'one', 'two']
                li= index + ': ' + val
        ul
            each val, index in {1:'one',2:'two',3:'three'}
                li= index + ': ' + val
        - var values = [];
        ul
            each val in values.length ? values : ['There are no values']
                li= val
        - var n = 0
        ul
            while n < 4
                li= n++

        //- Use
        +list
        +list
        +article('Ahoj')
        +article('Hello world')
            p This is my
            p Amazing article
        +link('/foo', 'foo')(class="btn")
        +list('my-list', 1, 2, 3, 4)
        | Plain text can include <strong>html</strong>
        p
            | It must always be on its own line
        p Plain text can include <strong>html</strong>
        script.
          if (usingJade)
            console.log('you are awesome')
          else
            console.log('use jade')
        a: img
        img/