extends ../layout
block content
    .row
        .col-sm-12.col-md-8.col-xs-12
            .panel.panel-primary
                .panel-heading Challenge: #{name}
                .panel.panel-body
                    .challenge-brief
                        h3.text-center
                            span.ion-android-clock
                            span Takes about #{time}
                        .btn.btn-success.btn-large.btn-block.start-challenge Start the challenge
                    .challenge-content.hidden-element
                        .responsive-container
                            iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
                        h3 Steps:
                        h4
                            ol
                                for step in steps
                                    li!= step
                        .btn.btn-success.btn-large.btn-block.completed-challenge I've completed this challenge
                        .ten-pixel-break
                        .btn.btn-primary.btn-large.btn-block.completed-challenge.skip-challenge I want to skip this challenge for now
                .panel-footer.text-center
                    span Need a break?  
                    a(href="http://blog.freecodecamp.com", target="_blank") Check out our blog
                    |   and  
                    a(href="https://twitter.com/freecodecamp", target="_blank") our recent tweets
                    | .
                #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-success
                                a.animated.fadeIn.delay-2.btn.btn-primary.btn-block.complete-button(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-primary
                                a.animated.fadeIn.delay-2.btn.btn-primary.btn-block.skip-button(aria-hidden='true') Take me to my next challenge
        .col-sm-12.col-md-4.col-xs-12
            include ../partials/challenges