doctype html
html
    head
        link(href="../style2.css" rel="stylesheet" type="text/css")
        meta(charset="UTF-8")
        meta(name="viewport" content="user-scalable=no, width=device-width")

    body.recipe
        section.header
            .image(style="background-image: url('./large.png')")

            .about
                h1 #{title}

                .timing
                    if timings.prep
                        | prep #{timings.prep}
                    if timings.prep && timings.cook
                        | , 
                    if timings.cook
                        | cook #{timings.cook}

                .icons
                    each icon in icons
                        .icon(class=icon)
                    if servings
                        .icon.serving
                        | × #{servings}

                .description #{description}

        section.instructions
            - let stepNumber = 1
            each step in steps
                .step
                    h3 #{stepNumber}
                    .ingredients
                        ul
                            if step.ingredients
                                each ingredient in step.ingredients
                                    li
                                        .amount #{asFraction(ingredient.amount)} #{ingredient.unit}
                                        .item #{ingredient.item}
                    .detail !{step.directions}
                - stepNumber++

        if credit
            section.credits
                if credit.name
                    | #{credit.name}
                if credit.name && credit.url
                    | , 
                if credit.url
                    a(href=credit.url) #{credit.url}

        section.navigation
            a(href="..") « Back