.row-fluid(ng-controller='UserCtrl')

  // ---- Customize -----
  .span4.border-right
    menu(type='list')
      // gender
      li.customize-menu
        menu(label='Head')
          button.m_head_0.customize-option(type='button', ng-click='set("preferences.gender","m")')
          button.f_head_0.customize-option(type='button', ng-click='set("preferences.gender","f")')
        label.checkbox
          input(type='checkbox', ng-model='user.preferences.showHelm', ng-change='toggleHelm(user.preferences.showHelm)')
          | Show Helm
      // hair
      li.customize-menu
        menu(label='Hair')
          button(class='{{user.preferences.gender}}_hair_blond customize-option', type='button', ng-click='set("preferences.hair","blond")')
          button(class='{{user.preferences.gender}}_hair_black customize-option', type='button', ng-click='set("preferences.hair","black")')
          button(class='{{user.preferences.gender}}_hair_brown customize-option', type='button', ng-click='set("preferences.hair","brown")')
          button(class='{{user.preferences.gender}}_hair_white customize-option', type='button', ng-click='set("preferences.hair","white")')
      // skin
      li.customize-menu
        menu(label='Skin')
          button.customize-option(class='{{user.preferences.gender}}_skin_dead',  type='button', ng-click='set("preferences.skin","dead")')
          button.customize-option(class='{{user.preferences.gender}}_skin_orc',   type='button', ng-click='set("preferences.skin","orc")')
          button.customize-option(class='{{user.preferences.gender}}_skin_asian', type='button', ng-click='set("preferences.skin","asian")')
          button.customize-option(class='{{user.preferences.gender}}_skin_black', type='button', ng-click='set("preferences.skin","black")')
          button.customize-option(class='{{user.preferences.gender}}_skin_white', type='button', ng-click='set("preferences.skin","white")')
      menu(ng-show='user.preferences.gender=="f"', type='list')
        li.customize-menu
          menu(label='Clothing')
            button.f_armor_0_v1.customize-option(type='button', ng-click='set("preferences.armorSet","v1")')
            button.f_armor_0_v2.customize-option(type='button', ng-click='set("preferences.armorSet","v2")')

  // ------ Stats ------
  .span4.border-right
    include ../shared/profiles/stats

  // ------- Edit -------
  .span4
    button.btn.btn-default(ng-click='_editing.profile = true', ng-show='!_editing.profile') Edit
    button.btn.btn-primary(ng-click='_editing.profile = false', ng-show='_editing.profile') Save
    div(ng-show='!_editing.profile')
      h4 Display Name
      span(ng-show='profile.profile.name') {{profile.profile.name}}
      span.muted(ng-hide='profile.profile.name') - None -

      h4 Photo
      img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}')
      span.muted(ng-hide='profile.profile.imageUrl') - None -

      h4 Blurb
      markdown(ng-show='profile.profile.blurb', ng-model='profile.profile.blurb')
      span.muted(ng-hide='profile.profile.blurb') - None -
      //{{profile.profile.blurb | linky:'_blank'}}

      h4 Websites
      ul(ng-show='profile.profile.websites')
        // TODO let's remove links eventually, since we can do markdown on profiles
        li(ng-repeat='website in profile.profile.websites')
          a(target='_blank', ng-href='{{website}}') {{website}}
      span.muted(ng-hide='profile.profile.websites') - None -

    div.whatever-options(ng-show='_editing.profile')
      // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
      .control-group.option-large
        label.control-label Display Name
        input.option-content(type='text', placeholder='Full Name', ng-model='user.profile.name', ng-blur='set("profile.name", user.profile.name)', )
      .control-group.option-large
        label.control-label Photo Url
        input.option-content(type='url', ng-model='user.profile.imageUrl', placeholder='Image Url', ng-blur='set("profile.imageUrl", user.profile.imageUrl)')
      .control-group.option-large
        label.control-label Blurb
        textarea.option-content(style='height:15em;', placeholder='Blurb', ng-model='user.profile.blurb', ng-blur='set("profile.blurb", user.profile.blurb)')
        include ../shared/formatting-help
      .control-group.option-large
        label.control-label Websites
        form(ng-submit='addWebsite()')
          input.option-content(type='url', ng-model='_newWebsite', placeholder='Add Website')
        ul
          // would prefer if there were and index in #each, instead using data-website to search with indexOf
          li(ng-repeat='website in user.profile.websites')
            | {{website}}
            a(ng-click='removeWebsite($index)')
              i.icon-remove