extends ../layout
block content
    script(src="/bower_components/cal-heatmap/cal-heatmap.min.js")
    script.
        var challengeName = 'Profile View';
    .panel.panel-info
        .panel-heading.text-center
            h1 #{username}'s portfolio
        .panel-body
            if (user && user.username === username)
                .row.text-center
                    .col-xs-12.col-sm-10.col-sm-offset-1
                        a.btn.btn-big.btn-primary.btn-block(href="/account") Update my portfolio page or manage my account
                        .button-spacer
                    .col-xs-12.col-sm-10.col-sm-offset-1
                        a.btn.btn-big.btn-success.btn-block(href="/signout") Sign out of Free Code Camp
                        .spacer
            .row
                .col-xs-12
                    .col-xs-12.col-sm-12.col-md-5
                        if picture
                            img.img-center.img-responsive.public-profile-img(src=picture)
                        else
                            img.img-center.img-responsive.public-profile-img(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png')
                        h1.text-center.negative-5.profile-social-icons
                            if (twitterHandle)
                                a.fa.fa-twitter-square.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}", target='_blank')
                            if (githubProfile)
                                a.fa.fa-github-square.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile, target='_blank')
                            if (codepenProfile)
                                a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile, target='_blank')
                            if (linkedinProfile)
                                a.fa.fa-linkedin-square.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile, target='_blank')
                            if (facebookProfile)
                                a.fa.fa-facebook-square.text-primary(title="@#{username}'s Facebook Profile", href=facebookProfile, target='_blank')
                    .visible-md.visible-lg
                        .col-xs-12.col-sm-12.col-md-4.text-justify
                            h1.flat-top.wrappable= name
                            h3.flat-top.bolded.wrappable= location
                            h4.flat-top.wrappable= bio
                    .visible-xs.visible-sm
                        .col-xs-12.col-sm-12.col-md-4.text-center
                            h1.flat-top.wrappable= name
                            h3.flat-top.bolded.wrappable= location
                            h4.flat-top.wrappable= bio
                    .col-xs-12.col-sm-12.col-md-3.text-center
                        .background-svg.img-center
                            .points-on-top
                                = "[ " + (progressTimestamps.length) + " ]"


            .row
                .col-xs-12
                    if (website1Title && website1Link && website1Image)
                        .row
                            .col-xs-12.col-md-5
                                img.img-center.img-responsive.portfolio-image(src=website1Image, alt="@#{username}'s #{website1Title}")
                            .col-xs-12.col-md-7
                                h3.text-center.wrappable.flat-top= website1Title
                                a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
                                    i.fa.icon-beaker
                                    | Try it out
                        br
                    if (website1Title && website1Link && !website1Image)
                        .col-xs-12.col-md-12
                            h3.text-center.wrappable.flat-top= website1Title
                            a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
                                i.fa.icon-beaker
                                | Try it out
                            br
                    if (website2Title && website2Link && website2Image)
                        .row
                            .col-xs-12.col-md-5
                                img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title}")
                            .col-xs-12.col-md-7
                                h3.text-center.wrappable.flat-top= website2Title
                                a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
                                    i.fa.icon-beaker
                                    | Try it out
                        br
                    if (website2Title && website2Link && !website2Image)
                        .col-xs-12.col-md-12
                            h3.text-center.wrappable.flat-top= website2Title
                            a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
                                i.fa.icon-beaker
                                | Try it out
                            br
                    if (website3Title && website3Link && website3Image)
                        .row
                            .col-xs-12.col-md-5
                                img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title}")
                            .col-xs-12.col-md-7
                                h3.text-center.wrappable.flat-top= website3Title
                                a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
                                    i.fa.icon-beaker
                                    | Try it out
                    if (website3Title && website3Link && !website3Image)
                        .col-xs-12.col-md-12
                            h3.text-center.wrappable.flat-top= website3Title
                            a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
                                i.fa.icon-beaker
                                | Try it out

            .spacer
                .hidden-xs.hidden-sm.col-md-12
                    #cal-heatmap.d3-centered
                        script.
                            $(document).ready(function () {
                                setTimeout(function () {
                                    var cal = new CalHeatMap();
                                    var calendar = !{JSON.stringify(calender)};
                                    cal.init({
                                        itemSelector: "#cal-heatmap",
                                        domain: "month",
                                        subDomain: "x_day",
                                        domainGutter: 10,
                                        data: calendar,
                                        cellSize: 15,
                                        align: 'center',
                                        cellRadius: 3,
                                        cellPadding: 2,
                                        tooltip: true,
                                        range: 6,
                                        start: new Date().setDate(new Date().getDate() - 150),
                                        legendColors: ["#cccccc", "#215f1e"],
                                        legend: [1, 2, 3],
                                        label: {
                                            position: "top"
                                        }
                                    });
                                }, 300);
                            });
                    .row
                        .hidden-xs.col-sm-12.text-center
                            .row.text-primary
                                h4.col-sm-6.text-right Longest Streak: #{longestStreak}
                                h4.col-sm-6.text-left Current Streak: #{currentStreak}


                    if (challenges.length > 0)
                        .col-sm-12
                            table.table.table-striped
                                thead
                                    tr
                                        th.col-xs-4 Challenge
                                        th.col-xs-2 Completed
                                        th.col-xs-6 Link
                                for challenge in challenges
                                    tr
                                        td.col-xs-4
                                            a(href='/challenges/' + challenge.name, target='_blank')= challenge.name
                                        td.col-xs-2= moment(challenge.completedDate, 'x').format("MMM DD, YYYY")
                                        td.col-xs-6
                                            a(href=challenge.solution, target='_blank') View my solution

                        br
                    if (bonfires.length > 0)
                        .col-sm-12
                            table.table.table-striped
                                thead
                                    tr
                                        th.col-xs-4 Bonfire
                                        th.col-xs-2 Completed
                                        th.col-xs-6 Solution
                                for bonfire in bonfires
                                    tr
                                        td.col-xs-4
                                            a(href='/challenges/' + bonfire.name, target='_blank')= bonfire.name
                                        td.col-xs-2= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY")
                                        td.col-xs-6
                                            pre.wrappable= bonfire.solution
                                br