extends ../layout
block content
    .panel.panel-info
        .panel-heading.text-center
            h1 Challenge Map
        .panel-body
            if (Math.random() > 0.999)
                img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner-dino.png')
                audio(autoplay src='https://s3.amazonaws.com/freecodecamp/t-rex-roar.mp3')
            else
                img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner.png')
            .col-xs-12.col-md-8.col-md-offset-2
                h2.text-center
                    span.text-primary #{camperCount}  
                    | campers have joined our community
                    br
                    | since we launched  
                    span.text-primary #{daysRunning}  
                    | days ago.
                .spacer
                if (user && user.progressTimestamps.length > 5)
                    #tshirt-notice.col-xs-12.col-md-8.col-md-offset-2.hidden
                        h2.text-center Get our first-edition t-shirt
                        img.thumbnail.img-center.img-responsive(src="http://i.imgur.com/o07uuOL.png")
                        p.text-justify Our community has voted. Get our winning design emblazoned on a durable, American-made American Apparel shirt (available in women's and men's sizes). 
                            a(href="https://teespring.com/free-code-camp-shirt-eu" target="_blank") Also ships from Europe
                            | .
                        a.button.btn.btn-block.signup-btn(href="https://teespring.com/get-free-code-camp-t-shirt" target="_blank") Get yours
                        .button-spacer
                        #hideTshirtNoticeButton.button.btn.btn-block.btn-info Hide this forever
                        .spacer
                .row
                    .col-xs-12.col-sm-8.col-sm-offset-2
                        h3 800 Hours of Practice:
                ol
                    for challengeBlock in blocks
                        .row
                            if (user)
                                if (challengeBlock.completed === 100)
                                    .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.map-p.negative-10
                                    .col-xs-12.col-sm-9.col-md-10
                                        li.map-p.faded.negative-10
                                            a(href='#' + challengeBlock.dashedName)= challengeBlock.name
                                else
                                    .hidden-xs.col-sm-3.col-md-2
                                        .progress.progress-bar-padding.text-center.thin-progress-bar
                                            .progress-bar(role='progressbar', aria-valuenow=(challengeBlock.completed), aria-valuemin='0', aria-valuemax='100', style='width: ' + challengeBlock.completed + '%;')
                                    .col-xs-12.col-sm-9.col-md-10
                                        li.map-p.negative-10
                                            a(href='#' + challengeBlock.dashedName)= challengeBlock.name
                            else
                                .hidden-xs.col-sm-3.col-md-2
                                    span.negative-10
                                .col-xs-12.col-sm-9.col-md-10
                                    li.map-p.negative-10
                                        a(href='#' + challengeBlock.dashedName)= challengeBlock.name

                .row
                    .col-xs-12.col-sm-8.col-sm-offset-2.negative-28
                        h3 800 Hours of  
                            a(href="/nonprofits/directory") Real World Work Experience
                            | :
                ol
                    .row
                        .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                        .col-xs-12.col-sm-9.col-md-10
                            li.map-p.negative-10 100-hour Nonprofit Project
                    .row
                        .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                        .col-xs-12.col-sm-9.col-md-10
                            li.map-p.negative-10 200-hour Nonprofit Project #1
                    .row
                        .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                        .col-xs-12.col-sm-9.col-md-10
                            li.map-p.negative-10 200-hour Nonprofit Project #2
                    .row
                        .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                        .col-xs-12.col-sm-9.col-md-10
                            li.map-p.negative-10 300-hour Nonprofit Project
                hr

                for challengeBlock in blocks
                    .row
                        a(href='#' name=challengeBlock.dashedName)
                        .spacer.negative-55

                    .row
                        .hidden-xs.col-sm-3.col-md-2
                            h3.text-primary.text-right.nowrap
                                i.fa.fa-clock-o  #{challengeBlock.time}
                        .col-xs-12.col-sm-9.col-md-10
                            h3 #{challengeBlock.name}  


                    .row
                        ol
                            for challenge in challengeBlock.challenges
                                if challenge.completed
                                    .row
                                        .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.map-p.negative-10
                                        .col-xs-12.col-sm-9.col-md-10
                                            li.faded.map-p.negative-10
                                                a(href="/challenges/#{challenge.dashedName}")
                                                    span.capitalize= challenge.type + ': '
                                                    span= challenge.title
                                                        span.sr-only= " Complete"


                                else
                                    .row
                                        .hidden-xs.col-sm-3.col-md-2
                                            span.negative-10
                                        .col-xs-12.col-sm-9.col-md-10
                                            li.map-p.negative-10
                                                a(href="/challenges/#{challenge.dashedName}")
                                                    span.capitalize= challenge.type + ': '
                                                    span= challenge.title
                                                        span.sr-only= " Incomplete"

                            if (challengeBlock.completed === 100)
                                .button-spacer
                                .row
                                    .col-xs-12.col-sm-8.col-md-6.col-sm-offset-3.col-md-offset-2.hidden
                                        a.btn.btn-lg.btn-block.signup-btn.map-challenge-block-share Section complete. Share your Portfolio with your friends.
                                            .hidden(id="#{challengeBlock.name}")
    script.
        var username = !{JSON.stringify(user && user.username || '')};
        var lastCompleted = !{JSON.stringify(lastCompleted || false)}
        $(document).ready(function () {
            if (!localStorage || !localStorage.hideTshirtNotice) {
                $("#tshirt-notice").removeClass("hidden");
            }
            $("#hideTshirtNoticeButton").on("click", function() {
                $("#tshirt-notice").addClass('animated fadeOut');
                setTimeout(function() {
                    $("#tshirt-notice").hide();
                }, 1000);
                localStorage.hideTshirtNotice = "true";
            });
        });