doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1: span Pug - node template engine & markup language
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

    //- Attributes
    //- https://pugjs.org/language/attributes.html

    a(href='google.com') Google
    |
    |
    a(class='button' href='google.com') Google
    |
    |
    a(class='button', href='google.com') Google

    - var authenticated = true
    body(class=authenticated ? 'authed' : 'anon')

    input(
      type='checkbox'
      name='agreement'
      checked
    )

    input(data-json=`
      {
        "very-long": "piece of ",
        "data": true
      }
    `)

    div(class='div-class', (click)='play()')
    div(class='div-class' (click)='play()' hidden) hello #{ username }

    - var url = 'pug-test.html';
    a(href='/' + url) Link
    |
    |
    - url = 'https://example.com/'
    a(href=url) Another link

    //- Class Literal

    a.button
    .button

    //- ID Literal

    a#main_link
    #main-link

    //- &attributes

    div#foo(data-bar="foo")&attributes({
      foo: 'bar',
      'data-foo': 'bar'
    })

    - var attributes = {};
    - attributes.class = 'baz';
    div#foo(data-bar="foo")&attributes(attributes)


    //- Case

    - var friends = 10
    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends

    - var friends = 1
    case friends
      when 0: p you have no friends
      when 1: p you have a friend
      default: p you have #{friends} friends


    //- Code
    //- https://pugjs.org/language/code.html

    - for (var x = 0; x < 3; x++)
      li item

    - var list = ["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis"]
    each item in list
      li= item

    p= 'This code is' + ' <escaped>!'

    p!= 'This code is' + ' <strong>not</strong> escaped!'


    //- Comments
    //- https://pugjs.org/language/comments.html

    // just some paragraphs
    p foo
    p bar

    //- will not output within markup
    p foo
    p bar

    //- TODO Block Comments

    body
      //-
        Comments for your template writers.
        Use as much text as you want.
      //
        Comments for your HTML readers.
        Use as much text as you want.


    //- Conditionals
    //- https://pugjs.org/language/conditionals.html

    - var user = { description: 'foo bar baz' }
    - var authorised = false
    #user
      if user.description
        h2.green Description
        p.description= user.description
      else if authorised
        h2.blue Description
        p.description.
          User has no description,
          why not add one...
      else
        h2.red Description
        p.description User has no description

    unless user.isAnonymous
      p You're logged in as #{user.name} now