extends ../layout
block content
    .row
        .col-sm-12.col-md-12.col-xs-12
            .panel.panel-primary
                .panel-heading.text-center
                    h1 #{name} (takes #{time} minutes)
                script.
                    var challengeName = null;
                .panel.panel-body
                    .embed-responsive.embed-responsive-16by9
                        iframe.embed-responsive-item(src='//player.vimeo.com/video/#{video}')
                    .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
                        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-big.btn-block.all-challenges Show me all the challenges
                #complete-challenge-dialog.modal(tabindex='-1')
                    .modal-dialog.animated.zoomIn.fast-animation
                        .modal-content
                            .modal-header.challenge-list-header= compliment
                                a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                            .modal-body
                                .text-center
                                    .animated.zoomInDown.delay-half
                                        span.completion-icon.ion-checkmark-circled.text-primary
                                - if (cc)
                                    a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block.next-challenge-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
                                    - if (points && points > 2)
                                        a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank")
                                          i.fa.fa-twitter  
                                             = phrase
                                - else
                                    a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
                #all-challenges-dialog.modal(tabindex='-1')
                    .modal-dialog.animated.fadeInUp.fast-animation
                        .modal-content
                            .modal-header.challenge-list-header Challenges
                                a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
                            .modal-body
                                    include ../partials/challenges
    script.
        $.ajax({
            url: 'https://api-ssl.bitly.com/v3/shorten?access_token=75e7931a19befaafcf108021b6d597e554b2c5c3&longUrl=http%3A%2F%2Ffreecodecamp.com%2Fchallenges%2F' + !{JSON.stringify(number)} + '&format=txt'
        })
                .success(
                function (data) {
                    console.log(data);
                    url = "https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20Bonfire:%20#{name}&url=" + data + "&hashtags=LearnToCode, JavaScript";
                    $('.btn-twitter').attr('href', url);
                }
        );