Why won't Jade indent the code?

I cannot get Jade to indent the code in the for loop correctly:

div.container
    - var cell = 0
    - for(var i = 0; i < results.Items.Item.length; i++)
        - if(cell == 0)
            div.row
                div.span3
                    div.cell
                        span #{results.Items.Item[i].ItemAttributes.Title}
        - else
                    div.span3
                        div.cell
                            span #{results.Items.Item[i].ItemAttributes.Title}
        - if(cell < 3)
            - cell++;
        - else
            - cell = 0

The code in the else statement does not go inside div.row but instead renders under div.container, or on the same level as div.row. I need the code in the else statement to render inside div.row. How can I get Jade to do this?

What I'm trying to do is to get div.row to render and then after every 4th div.cell (as counted by the cell object) render another div.row

I believe you have to do it like this:

div.container
    - var cell = 0
    - for(var i = 0; i < results.Items.Item.length; i++)
        div.row
            div.span3
                div.cell
                    span #{results.Items.Item[i].ItemAttributes.Title}

        - if(cell < 3)
            - cell++;
        - else
            div.row
            - cell = 0

use curly braces "{" and "}"

div.container
        - var cell = 0
        - for(var i = 0; i < results.Items.Item.length; i++){
            - if(cell == 0){
                div.row
                    div.span3
                        div.cell
                            span #{results.Items.Item[i].ItemAttributes.Title}
            - }
            - else{
                        div.span3
                            div.cell
                                span #{results.Items.Item[i].ItemAttributes.Title}
            - }
            - if(cell < 3)
                - cell++
            - else
                - cell = 0
        - }