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) + " ]"
            .spacer
                .hidden-xs.hidden-sm.col-md-12
                    #cal-heatmap.d3-centered
                        script.
                            $(document).ready(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"
                                    }
                                });
                            });
                    .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