extends ../layout
block content
    .row
        .col-sm-12.col-md-8.col-xs-12
            .panel.panel-primary
                .panel-heading #{name} (takes #{time} minutes)
                .panel.panel-body
                    .embed-responsive.embed-responsive-16by9
                        iframe.embed-responsive-item(src='//player.vimeo.com/video/#{video}')
                    h3 Steps:
                    h4
                        ol
                            for step in steps
                                li!= step
                    .btn.btn-primary.btn-big.btn-block.completed-challenge I've completed this challenge
                    .ten-pixel-break
                    .btn.btn-success.btn-large.btn-block.skip-challenge I want to skip this challenge for now
                - if (cc[2] > 0)
                    .panel-footer.text-center
                        span Need a break? Check out our: 
                        a(href="https://gitter.im/FreeCodeCamp/FreeCodeCamp", target="_blank") Chat Room
                        |  , 
                        a(href="http://blog.freecodecamp.com", target="_blank") Blog
                        |  , or 
                        a(href="http://forum.freecodecamp.com", target="_blank") Forum
                        | .
                #complete-dialog.modal
                    .modal-dialog.animated.zoomIn.fast-animation
                        .modal-content
                            .modal-header
                                a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
                                .text-center
                                    h1.animated.zoomInDown Nicely done!
                                    .animated.zoomInUp.delay-1
                                        span.landing-icon.ion-checkmark-circled.text-primary
                                a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
                #skip-dialog.modal
                    .modal-dialog.animated.zoomIn.fast-animation
                        .modal-content
                            .modal-header
                                a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
                                .text-center
                                    h1.animated.zoomInDown No problem.
                                    h2.animated.zoomInDown You can retry this challenge any time.
                                    .animated.zoomInUp.delay-1
                                        span.landing-icon.ion-skip-forward.text-success
                                a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(aria-hidden='true') Take me to my next challenge
        .col-sm-12.col-md-4.col-xs-12
            include ../partials/challenges