extends ../layout
block content
    .col-xs-12.col-sm-12.col-md-12
        .panel.panel-primary
            .panel-heading.text-center
                h1 #{username}'s portfolio
            .panel-body
                .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='#{user.gravatar(200)}')
                            h1.text-center.negative-5
                                - if (twitterHandle)
                                    a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}", target='_blank')
                                - if (githubProfile)
                                    a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile, target='_blank')
                                - if (linkedinProfile)
                                    a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile, target='_blank')
                                - if (codepenProfile)
                                    a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile, target='_blank')
                                - if (coderbyteProfile)
                                    a.ion-social-javascript.text-primary(title="@#{username}'s CoderByte Profile", href=coderbyteProfile, 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
                            if (user && user.profile.username === username)
                                a.btn.btn-warning(href="/account") Edit my Profile

                            .background-svg.img-center
                                .points-on-top
                                    = "[ " + points + " ]"


                .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

                - if (ch[0] > 0)
                    .col-sm-12
                        table.table.table-striped
                            thead
                                tr
                                    th Challenge
                                    th Date Finished
                            for challenge in challenges
                                if ch[challenge.challengeNumber] > 0
                                    tr
                                        td= challenges[challenge.challengeNumber].name
                                        td= moment(ch[challenge.challengeNumber], 'X').format("MMM DD, YYYY")
                            br