codecombat/app/templates/account/profile.jade

extends /templates/base

block content
  if allowedToEditJobProfile
    .profile-control-bar
      if editing
        .progress.profile-completion-progress
          .progress-bar.progress-bar-success(style="width: #{100 * progress}%")
          .progress-text
      a.btn(href="/account/settings")
        i.icon-cog
        span(data-i18n="account_profile.settings") Settings
      if editing
        button.btn.btn-success#toggle-editing
          i.icon-ok
          span(data-i18n="account_profile.done_editing") Done Editing
      else
        button.btn#toggle-editing
          i.icon-cog
          span(data-i18n="account_profile.edit_profile") Edit Profile
      if linkedInAuthorized && editing
        button.btn.btn-success#importLinkedIn
          i.icon-arrow-down
          span Import LinkedIn
      else if editing
        button.btn.linked-in-button
          script(type="in/Login" id="linkedInAuthButton" data-onAuth="contractCallback")
      if profile && profile.active
        button.btn.btn-success#toggle-job-profile-active
          i.icon-eye-open
          span(data-i18n="account_profile.active") Looking for interview offers now
      else
        button.btn#toggle-job-profile-active
          i.icon-eye-close
          span(data-i18n="account_profile.inactive") Not looking for offers right now
      if profile && (profile.active || me.isAdmin())
        if profileApproved
          button.btn.btn-success#toggle-job-profile-approved(disabled=!me.isAdmin())
            i.icon-eye-open
            span(data-i18n='account_profile.approved') Approved
        else if me.isAdmin()
          button.btn#toggle-job-profile-approved
            i.icon-eye-close
            span(data-i18n='account_profile.not_approved') Not Approved
      if me.isAdmin() && !myProfile
        button.btn.edit-settings-button#enter-espionage-mode 007
      //if editing && myProfile
      //  a.sample-profile(href="http://codecombat.com/images/pages/account/profile/sample_profile.png", target="_blank")
      //    button.btn
      //      i.icon-user
      //      span(data-i18n="account_settings.sample_profile") See a sample profile

  if profile && allowedToViewJobProfile
    div(class="job-profile-container" + (editing ? " editable-profile" : ""))
      .job-profile-row
        .left-column.full-height-column
          .sub-column
            #profile-photo-container.editable-section(title="Click to change your photo")
              .editable-icon.glyphicon.glyphicon-pencil
              img.profile-photo(src=user.getPhotoURL(240, true))
              .profile-caption= profile.jobTitle || 'Software Developer'

            #links-container.editable-section
              .editable-display(title="Click to add social and personal links")
                .editable-icon.glyphicon.glyphicon-pencil
                if profileLinks && profileLinks.length
                  ul.links.editable-thinner
                    each link in profileLinks
                      if link.link && link.name
                        li(title=profile.name + " on " + link.name, class=link.icon ? "has-icon" : "")
                          a(href=link.link)
                            if link.icon
                              img(src=link.icon.url, alt=link.icon.name)
                            else
                              button.btn.btn-large.btn-inverse.flat-button= link.name
                else if editing
                  h3.edit-label(data-i18n="account_profile.add_links") Add some links
                  ul.links
                    li.has-icon
                      a(href='http://example.com')
                        img(src='/images/pages/account/profile/icon_github.png', alt='GitHub')
                    li.has-icon
                      a(href='http://example.com')
                        img(src='/images/pages/account/profile/icon_facebook.png', alt='Facebook')
                    li.has-icon
                      a(href='http://example.com')
                        img(src='/images/pages/account/profile/icon_twitter.png', alt='Twitter')
                    li.has-icon
                      a(href='http://example.com/')
                        img(src='/images/pages/account/profile/icon_linkedin.png', alt='LinkedIn')
                  button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_blog") Blog
                  button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_personal_site") Personal Site

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                h3(data-i18n="account_profile.links_header") Personal Links
                p.help-block(data-i18n="account_profile.links_blurb") Link any other sites or profiles you want to highlight, like your GitHub, your LinkedIn, or your blog.
                .editable-array(data-property='links')
                  for link, index in (profile.links || []).concat({})
                    .array-item.link-container.well.well-sm
                      .form-group
                        label.control-label(data-i18n="account_profile.links_name") Link Name
                        input.form-control(type='link-name', maxlength='30', data-schemaformat='link-name', name="root[links][#{index}][name]", value=link.name, data-autocomplete="commonLinkNames", data-autocomplete-min-length=0)
                        if !index
                          p.help-block
                            span(data-i18n="account_profile.links_name_help") What are you linking to?
                            |  Ex.: 'Personal Website', 'GitHub'
                      .form-group
                        label.control-label(data-i18n="account_profile.links_link") Link URL
                        input.form-control(type='url', pattern='^(ht|f)tp(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*(:(0-9)*)*(/?)([a-zA-Z0-9-‌​.?,\'/\+&%$#_=]*)?$', data-schemaformat='url', name="root[links][#{index}][link]", value=link.link)
                        if !index
                          p.help-block Ex.: "https://github.com/nwinter"
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save

            .editable-section#basic-info-container
              - var editableDefaults = editing && profile.city == jobProfileSchema.properties.city.default
              div(class="editable-display" + (editableDefaults ? " edit-example-text" : ""), title="Click to edit your basic info")
                .editable-icon.glyphicon.glyphicon-pencil
                if editableDefaults
                  h3.edit-label(data-i18n="account_profile.basics_header") Update basic info
                div= profile.city + ', ' + profile.country
                div= profile.visa
                div
                  span(data-i18n="account_profile.looking_for") Looking for:
                  |  #{profile.lookingFor}
                div
                  span(data-i18n="account_profile.last_updated") Last updated:
                  |  #{moment(profile.updated).fromNow()}

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                .form-group
                  label.control-label(data-i18n="account_profile.basics_active") Open to Offers
                  select.form-control(name='root[active]')
                    option(value='1', selected=profile.active, data-i18n="account_profile.active") Looking for interview offers now
                    option(value='', selected=!profile.active, data-i18n="account_profile.inactive") Not looking for offers right now
                  p.help-block(data-i18n="account_profile.basics_active_help") Want interview offers right now?
                .form-group
                  label.control-label(data-i18n="account_profile.basics_job_title") Desired Job Title
                  input.form-control(type='text', maxlength='50', name='root[jobTitle]', value=profile.jobTitle)
                  p.help-block
                    span(data-i18n="account_profile.basics_job_title_help") What role are you looking for?
                    |  Ex.: "Full Stack Engineer", "Front-End Developer", "iOS Developer"
                .form-group
                  label.control-label(data-i18n="account_profile.basics_city") City
                  input.form-control(type='city', maxlength='100', data-schemaformat='city', name='root[city]', value=profile.city, data-autocomplete="commonCities", data-autocomplete-min-length=1)
                  p.help-block
                    span(data-i18n="account_profile.basics_city_help") City you want to work in (or live in now).
                    |  Ex.: "San Francisco", "Lubbock, TX"
                .form-group
                  label.control-label(data-i18n="account_profile.basics_country") Country
                  input.form-control(type='country', maxlength='100', data-schemaformat='country', name='root[country]', value=profile.country, data-autocomplete="commonCountries", data-autocomplete-min-length=1)
                  p.help-block
                    span(data-i18n="account_profile.basics_country_help") Country you want to work in (or live in now).
                    |  Ex.: "USA", "France"
                .form-group
                  label.control-label(data-i18n="account_profile.basics_visa") US Work Status
                  select.form-control(name='root[visa]')
                    option(value='Authorized to work in the US', selected=profile.visa == 'Authorized to work in the US') Authorized to work in the US
                    option(value='Need visa sponsorship', selected=profile.visa == 'Need visa sponsorship') Need visa sponsorship
                  p.help-block(data-i18n="account_profile.basics_visa_help") Are you authorized to work in the US, or do you need visa sponsorship?
                .form-group
                  label.control-label(data-i18n="account_profile.basics_looking_for") Looking For
                  select.form-control(name='root[lookingFor]')
                    option(value='Full-time', selected=profile.lookingFor == "Full-time", data-i18n="account_profile.basics_looking_for_full_time") Full-time
                    option(value='Part-time', selected=profile.lookingFor == "Part-time", data-i18n="account_profile.basics_looking_for_part_time") Part-time
                    option(value='Remote', selected=profile.lookingFor == "Remote", data-i18n="account_profile.basics_looking_for_remote") Remote
                    option(value='Contracting', selected=profile.lookingFor == "Contracting", data-i18n="account_profile.basics_looking_for_contracting") Contracting
                    option(value='Internship', selected=profile.lookingFor == "Internship", data-i18n="account_profile.basics_looking_for_internship") Internship
                  p.help-block(data-i18n="account_profile.basics_looking_for_help") What kind of developer position do you want?
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save

            if !editing && !myProfile
              button#contact-candidate.btn.btn-large.btn-inverse.flat-button
                span(data-i18n="account_profile.contact") Contact
                |  #{profile.name.split(' ')[0]}

        .middle-column.full-height-column
          .sub-column
            #name-container.editable-section
              .editable-display(title="Click to fill in your name")
                .editable-icon.glyphicon.glyphicon-pencil
                if editing && !profile.name
                  h3.edit-label(data-i18n="account_profile.name_header") Fill in your name
                else if profile.name
                  h3= profile.name
                else
                  h3(data-i18n="account_profile.name_anonymous") Anonymous Developer

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                .form-group
                  label.control-label(data-i18n="general.name") Name
                  input.form-control(type='text', maxlength='100', name='root[name]', value=profile.name)
                  p.help-block(data-i18n="account_profile.name_help") Name you want employers to see, like 'Nick Winter'.
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save


            #short-description-container.editable-section
              .editable-display(title="Click to write your tagline")
                .editable-icon.glyphicon.glyphicon-pencil
                if editing && (!profile.shortDescription || profile.shortDescription == jobProfileSchema.properties.shortDescription.default)
                  h3.edit-label(data-i18n="account_profile.short_description_header") Write a short description of yourself
                  p.edit-example-text(data-i18n="account_profile.short_description_blurb") Add a tagline to help an employer quickly learn more about you.

                else if profile.shortDescription
                  p.editable-thinner= profile.shortDescription

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                .form-group
                  label.control-label(data-i18n="account_profile.short_description") Tagline
                  textarea.form-control(rows=3, maxlength='140', name='root[shortDescription]')= profile.shortDescription
                  p.help-block(data-i18n="account_profile.short_description_help") Who are you, and what are you looking for? 140 characters max.
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save


            #skills-container.editable-section
              .editable-display.editable-thinner(title="Click to tag your programming skills")
                .editable-icon.glyphicon.glyphicon-pencil
                if editing && (!profile.skills || !profile.skills.length || (profile.skills.length == 1 && profile.skills[0] == 'javascript'))
                  h3.edit-label Tag your programming skills
                  each skill in ["python", "coffeescript", "node", "ios", "objective-c", "javascript", "app-engine", "mongodb", "web dev", "django", "backbone"]
                    code.edit-example-tag= skill
                    span
                else
                  each skill in profile.skills
                    code= skill
                    span

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                h3(data-i18n="account_profile.skills_header") Skills
                p.help-block
                  span(data-i18n="account_profile.skills_help") Tag relevant developer skills in order of proficiency.
                  |  Ex.: "objective-c", "mongodb", "rails", "android", "javascript"
                .editable-array(data-property='skills')
                  for skill, index in (profile.skills || []).concat('')
                    .array-item.skill-array-item
                      input.form-control(type='skill', maxlength='20', pattern='.{1,}', data-schemaformat='skill', name="root[skills][#{index}]", value=skill, data-autocomplete="commonSkills", data-autocomplete-min-length=1)
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save


            #long-description-container.editable-section
              .editable-display(title="Click to start writing your longer description")
                .editable-icon.glyphicon.glyphicon-pencil
                - var modified = profile.longDescription && profile.longDescription != jobProfileSchema.properties.longDescription.default
                if editing && !modified
                  h3.edit-label(data-i18n="account_profile.long_description_header") Describe your desired position
                  p.edit-example-text(data-i18n="account_profile.long_description_blurb") Tell employers how awesome you are and what role you want.
                else if modified
                  div.long-description.editable-thinner!= marked(profile.longDescription)

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                .form-group
                  label.control-label(data-i18n="account_profile.long_description") Self Description
                  textarea.form-control(rows=20, maxlength='600', data-schemaformat='markdown', name='root[longDescription]')= profile.longDescription
                  p.help-block(data-i18n="account_profile.long_description_help") Describe yourself to potential employers. Keep it short and to the point. We recommend outlining the position that would most interest you. Tasteful markdown okay; 600 characters max.
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save

            #work-container.editable-section
              .editable-display(title="Click to add work experience")
                .editable-icon.glyphicon.glyphicon-pencil
                if profile.work && profile.work.length
                  h3.experience-header
                    img.header-icon(src="/images/pages/account/profile/work.png", alt="")
                    span(data-i18n="account_profile.work_experience") Work Experience
                    |  - #{profile.experience}
                    |
                    span(data-i18n=profile.experience == 1 ? "units.year" : "units.years")
                  each job in profile.work
                    if job.role && job.employer
                      div.experience-entry
                        div.duration.pull-right= job.duration
                        | #{job.role} at #{job.employer}
                        .clearfix
                        if job.description
                          div!= marked(job.description)
                else if editing
                  h3.experience-header.edit-label(data-i18n="account_profile.work_header") Chronicle your work history

                  div.experience-entry.edit-example-text
                      div.duration.pull-right June, 2012 - present
                      | UX Designer at Hooli
                      .clearfix
                      div Revolutionized CSS, refactored flattening, and designed all the things.

                  div.experience-entry.edit-example-text
                      div.duration.pull-right 1999 - 2012
                      | Software Engineer at Initrode
                      .clearfix
                      div Built a P2P streaming TPS report fulfillment system.

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                h3(data-i18n="account_profile.work_experience") Work Experience
                .form-group
                  label.control-label(data-i18n="account_profile.work_years") Years of Experience
                  input.form-control(type='text', name='root[experience]', value=profile.experience)
                  p.help-block(data-i18n="account_profile.work_years_help") How many years of professional experience (getting paid) developing software do you have?
                p(data-i18n="account_profile.work_blurb") List your relevant work experience, most recent first.
                .editable-array(data-property='work')
                  for job, index in (profile.work || []).concat({})
                    .array-item.well.well-sm
                      .form-group
                        label.control-label(data-i18n="account_profile.work_employer") Employer
                        input.form-control(type='text', maxlength='100', name="root[work][#{index}][employer]", value=job.employer)
                        p.help-block(data-i18n="account_profile.work_employer_help") Name of your employer.
                      .form-group
                        label.control-label(data-i18n="account_profile.work_role") Job Title
                        input.form-control(type='text', maxlength='100', name="root[work][#{index}][role]", value=job.role)
                        p.help-block(data-i18n="account_profile.work_role_help") What was your job title or role?
                      .form-group
                        label.control-label(data-i18n="account_profile.work_duration") Duration
                        input.form-control(type='text', maxlength='100', name="root[work][#{index}][duration]", value=job.duration)
                        p.help-block
                          span(data-i18n="account_profile.work_duration_help") When did you hold this gig?
                          |  Ex.: "Feb 2013 - present".
                      .form-group
                        label.control-label(data-i18n="account_profile.work_description") Description
                        textarea.form-control(rows=3, maxlength='140', name="root[work][#{index}][description]")= job.description
                        p.help-block(data-i18n="account_profile.work_description_help") What did you do there? (140 chars; optional)
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save


            #education-container.editable-section
              .editable-display(title="Click to add academic experience")
                .editable-icon.glyphicon.glyphicon-pencil
                if profile.education && profile.education.length
                  h3.experience-header
                    img.header-icon(src="/images/pages/account/profile/education.png", alt="")
                    span(data-i18n="account_profile.education") Education
                  each school in profile.education
                    if school.degree && school.school
                      div.experience-entry
                        div.duration.pull-right= school.duration
                        | #{school.degree} at #{school.school}
                        .clearfix
                        if school.description
                          div!= marked(school.description)
                else if editing
                  h3.experience-header.edit-label(data-i18n="account_profile.education_header") Recount your academic ordeals

                  div.experience-entry.edit-example-text
                    div.duration.pull-right 1995 - 1997
                    | Ph.D. Janitorial Science at MIT
                    .clearfix
                    div Anonymously solved problems in algebraic graph theory. Swept floors.

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                h3(data-i18n="accont_profile.education") Education
                p(data-i18n="account_profile.education_blurb") List your academic ordeals.
                .editable-array(data-property='education')
                  for school, index in (profile.education || []).concat({})
                    .array-item.well.well-sm
                      .form-group
                        label.control-label(data-i18n="account_profile.education_school") School
                        input.form-control(type='text', maxlength='100', name="root[education][#{index}][school]", value=school.school)
                        p.help-block(data-i18n="account_profile.education_school_help") Name of your school.
                      .form-group
                        label.control-label(data-i18n="account_profile.education_degree") Degree
                        input.form-control(type='text', maxlength='100', name="root[education][#{index}][degree]", value=school.degree)
                        p.help-block
                          span(data-i18n="account_profile.education_degree_help") What was your degree and field of study?
                          |  Ex.: "Ph.D. Human-Computer Interaction (incomplete)"
                      .form-group
                        label.control-label(data-i18n="account_profile.education_duration") Dates
                        input.form-control(type='text', maxlength='100', name="root[education][#{index}][duration]", value=school.duration)
                        p.help-block
                          span(data-i18n="account_profile.education_duration_help") When?
                          |  Ex.: "Aug 2004 - May 2008".
                      .form-group
                        label.control-label(data-i18n="account_profile.education_description") Description
                        textarea.form-control(rows=3, maxlength='140', name="root[education][#{index}][description]")= school.description
                        p.help-block(data-i18n="account_profile.education_description_help") Highlight anything about this educational experience. (140 chars; optional)
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save


            if user.get('jobProfileNotes') || me.isAdmin()
              div(class="our-notes-section" + (editing ? " deemphasized" : ""))
                h3.experience-header(data-i18n="account_profile.our_notes") Our Notes
                - var notes = user.get('jobProfileNotes') || '';
                if me.isAdmin()
                  textarea#job-profile-notes!= notes
                  button.btn.btn-primary#save-notes-button(data-i18n="common.save") Save
                else
                  div!= marked(notes)

        .right-column.full-height-column
          .sub-column
            #projects-container.editable-section
              .editable-display(title="Click to add your projects")
                .editable-icon.glyphicon.glyphicon-pencil
                if profile.projects && profile.projects.length
                  h3(data-i18n="account_profile.projects") Projects
                  ul.projects
                    each project in profile.projects
                      if project.name
                        li
                          if project.link && project.link.length && project.link != 'http://example.com'
                            a(href=project.link)
                          if project.picture
                            .project-image(style="background-image: url('/file/" + project.picture + "')")
                          p= project.name
                          div!= marked(project.description)
                else if editing
                  h3.edit-label(data-i18n="account_profile.projects_header") Add 3 projects
                  ul.projects
                    li.edit-example-text
                      .project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')")
                      p Cog.js
                      div JS microlibrary to animate fixie bike cogs on ecommerce sites that sell bike hardware.
                    li.edit-example-text
                      .project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')")
                      p Combjoy
                      div Ember.js project that schedules hair stylists to ride in Ubers with you to comb your hair on your way to work.
                    li.edit-example-text
                      .project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')")
                      p Bass Drop
                      div Insert a few lines of JS into your site and get a "Drop the bass!" button for your website. Plays techno.

              form.editable-form
                .editable-icon.glyphicon.glyphicon-remove
                h3(data-i18n="account_profile.projects_header_2") Projects (Top 3)
                p(data-i18n="account_profile.projects_blurb") Highlight your projects to amaze employers.
                for index in [0, 1, 2]
                  - var project = (profile.projects || [])[index] || {};
                  .array-item.well.well-sm
                    .form-group
                      label.control-label(data-i18n="account_profile.projects_name") Project Name
                      input.form-control(type='text', maxlength='100', name="root[projects][#{index}][name]", value=project.name)
                      p.help-block(data-i18n="account_profile.projects_name_help") What was the project called?
                    .form-group
                      label.control-label(data-i18n="account_profile.projects_description") Description
                      textarea.form-control(rows=6, maxlength='400', data-schemaformat='markdown', name="root[projects][#{index}][description]")= project.description
                      p.help-block(data-i18n="account_profile.projects_description_help") Briefly describe the project.
                    .form-group
                      label.control-label(data-i18n="account_profile.projects_picture") Picture
                      .project-image(style="background-image: url('" + (src=project.picture ? "/file/" + project.picture : "/images/pages/account/profile/sample_project.png") + "')")
                      input(type="hidden", name="root[projects][#{index}][picture]", value=project.picture)
                      p.help-block(data-i18n="account_profile.projects_picture_help") Upload a 230x115px or larger image showing off the project.
                    .form-group
                      label.control-label(data-i18n="account_profile.projects_link") Link
                      input.form-control(type='url', pattern='^(ht|f)tp(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*(:(0-9)*)*(/?)([a-zA-Z0-9-‌​.?,\'/\+&%$#_=]*)?$', data-schemaformat='url', name="root[projects][#{index}][link]", value=project.link)
                      p.help-block(data-i18n="account_profile.projects_link_help") Link to the project.
                button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save

  else if allowedToViewJobProfile
    .public-profile-container
      h2(data-i18n="common.loading") Loading...

  else if user
    .public-profile-container
      h2
        span(data-i18n="account_profile.profile_for_prefix") Profile for
        span= user.get('name') || "Anonymous Wizard"
        span(data-i18n="account_profile.profile_for_suffix")

      img.profile-photo(src=user.getPhotoURL(256))

      p To see a private user profile, you may need to log in.

  else
    .public-profile-container
      h2
        span(data-i18n="account_profile.profile_for_prefix") Profile for
        span= userID
        span(data-i18n="account_profile.profile_for_suffix")
        |
        span(data-i18n="loading_error.not_found")