script(id='partials/options.settings.html', type="text/ng-template")
  ul.nav.nav-tabs
    li(ng-class="{ active: $state.includes('options.settings.settings') }")
      a(ui-sref='options.settings.settings')
        =env.t('settings')
    li(ng-class="{ active: $state.includes('options.settings.api') }")
      a(ui-sref='options.settings.api')
        =env.t('API')
    li(ng-class="{ active: $state.includes('options.settings.export') }")
      a(ui-sref='options.settings.export')
        =env.t('dataexport')
    li(ng-class="{ active: $state.includes('options.settings.subscription') }")
      a(ui-sref='options.settings.subscription')=env.t('subscription')

  .tab-content
    .tab-pane.active
      div(ui-view)

script(type='text/ng-template', id='partials/options.settings.settings.html')
  .row-fluid
    .personal-options.span6
      h2=env.t('settings')
      h4=env.t('customDayStart')
      .option-group.option-short
        input.option-content.option-time(type='number', min='0', max='24', ng-model='user.preferences.dayStart', ng-change='saveDayStart()')
        span.input-suffix= ':00 (' + env.t('24HrClock') + ')'
      div
        small
          div=env.t('clockInfo')
          .alert.alert-danger 
            =env.t('subWarning1')
            a(href='https://github.com/HabitRPG/habitrpg/issues/1057' target='_blank')=env.t('subWarning2')
            =env.t('subWarning3')
      hr
      h4=env.t('language')
      select(ng-model='language.code', ng-options='lang.code as lang.name for lang in avalaibleLanguages', ng-change='changeLanguage()')
      hr
      h4=env.t('misc')
      label.checkbox
        input(type='checkbox', ng-click='set({"preferences.hideHeader":user.preferences.hideHeader?false:true})', ng-checked='user.preferences.hideHeader!==true')
        =env.t('showHeader')
         
        i.icon-question-sign(popover-trigger='mouseenter', popover-placement='right', popover=env.t('showHeaderpop'))
      label.checkbox
        input(type='checkbox', ng-click='toggleStickyHeader()', ng-checked='user.preferences.stickyHeader!==false')
        =env.t('stickyHeader')
         
        i.icon-question-sign(popover-trigger='mouseenter', popover-placement='right', popover=env.t('stickyHeaderpop'))
      label.checkbox
        input(type='checkbox', ng-model='user.preferences.newTaskEdit', ng-change='set({"preferences.newTaskEdit": user.preferences.newTaskEdit?true: false})')
        =env.t('newtaskedit')
         
        i.icon-question-sign(popover-trigger='mouseenter', popover-placement='right', popover=env.t('newtaskeditpop'))
      label.checkbox
        input(type='checkbox', ng-model='user.preferences.tagsCollapsed', ng-change='set({"preferences.tagsCollapsed": user.preferences.tagsCollapsed?true: false})')
        =env.t('startcollapsed')
         
        i.icon-question-sign(popover-trigger='mouseenter', popover-placement='right', popover=env.t('startcollapsedpop'))
      label.checkbox
        input(type='checkbox', ng-model='user.preferences.advancedCollapsed', ng-change='set({"preferences.advancedCollapsed": user.preferences.advancedCollapsed?true: false})')
        =env.t('startacollapsed')
         
        i.icon-question-sign(popover-trigger='mouseenter', popover-placement='right', popover=env.t('startacollapsedpop'))
      button.btn(ng-click='showTour()', popover-placement='right', popover-trigger='mouseenter', popover=env.t('showtourpop1'))= env.t('showtour')
      br
      button.btn(ng-click='showBailey()', popover-trigger='mouseenter', popover-placement='right', popover=env.t('showtourpop'))= env.t('showtour2')
      br
      button.btn(ng-click='modals.restore = true', popover-trigger='mouseenter', popover-placement='right', popover=env.t('fixvalpop'))= env.t('fixval')
      div(ng-if='user.preferences.disableClasses==true')
        button.btn(ng-click='user.ops.changeClass({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('enableclasspop'))= env.t('enableclass')
      div(ng-if='!user.preferences.disableClasses && user.flags.classSelected')
        button.btn(ng-click='showClassesTour()', popover-trigger='mouseenter', popover-placement='right', popover=env.t('classtourpop'))= env.t('showclass')

      //- Why is ng-if='user.auth.local' validating for users *without* user.auth.local (facebook users)? adding .username here for extra
      div(ng-if='user.auth.local.username')
        hr
        h4=env.t('changePass')
        form(ng-submit='changePassword(changePass)', ng-show='user.auth.local')
          .control-group
            input(type='password', placeholder=env.t('oldPass'), ng-model='changePass.oldPassword', required)
          .control-group
            input(type='password', placeholder=env.t('newPass'), ng-model='changePass.newPassword', required)
          .control-group
            input(type='password', placeholder=env.t('confirmPass'), ng-model='changePass.confirmNewPassword', required)
          input.btn(type='submit', value=env.t('submit'))

      hr
      h4=env.t('dangerZone')
      a.btn.btn-danger(ng-click='modals.reset = true', popover-trigger='mouseenter', popover-placement='right', popover=env.t('resetaccpop'))= env.t('resetaccount')
      a.btn.btn-danger(ng-click='modals.delete = true', popover-trigger='mouseenter', popover=env.t('deleteaccpop'))= env.t('deleteaccount')

script(type='text/ng-template', id='partials/options.settings.api.html')
  .row.fluid
    .span6
      h2=env.t('API')
      small=env.t('APIText')
      h6=env.t('userId')
      pre.prettyprint {{user.id}}
      h6=env.t('APIToken')
      pre.prettyprint {{user.apiToken}}
      h6=env.t('qrcode')
      img(src='https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=%7B%22address%22%3A%22https%3A%2F%2Fhabitrpg.com%22%2C%22user%22%3A%22{{user.id}}%22%2C%22key%22%3A%22{{user.apiToken}}%22%7D&choe=UTF-8&chld=L', alt='qrcode')

script(id='partials/options.settings.export.html', type="text/ng-template")
  .row.fluid
    .span6
      h2=env.t('dataexport')
      small=env.t('dataexports')
      h4=env.t('habithistory')
      =env.t('exporthistory')
      a(href="/export/history.csv")= ' ' + env.t('csv')
      h4=env.t('userdata')
      =env.t('exportuserdata')
      a(href="/export/userdata.xml")= ' ' + env.t('xml') + ' '
      a(href="/export/userdata.json")= env.t('json')

script(id='partials/options.settings.subscription.perks.html',type='text/ng-template')
  table.table.table-striped
    tr
      td
        span.dashed-underline(popover=env.t('disableAdsText'),popover-trigger='mouseenter',popover-placement='right')=env.t('disableAds')
    tr
      td
        span.dashed-underline(popover=env.t('buyGemsGoldText', {gemCost: "{{Shared.planGemLimits.convRate}}", gemLimit: "{{Shared.planGemLimits.convCap}}"}),popover-trigger='mouseenter',popover-placement='right')=env.t('buyGemsGold')
    tr
      td
        span.dashed-underline(popover=env.t('retainHistoryText'),popover-trigger='mouseenter',popover-placement='right')=env.t('retainHistory')
    tr
      td
        span.dashed-underline(popover=env.t('doubleDropsText'),popover-trigger='mouseenter',popover-placement='right')=env.t('doubleDrops')
    //-tr
    //-  td +20 gems to your account
    tr
      td
        span.dashed-underline(popover=env.t('supportDevsText'),popover-trigger='mouseenter',popover-placement='right')=env.t('supportDevs')
    tr
      td.alert.alert-info $5 
        =env.t('monthUSD')

script(id='partials/feature-matrix-check.html',type='text/ng-template')
  span.task-checker.action-yesno
    input.focusable(type='checkbox', checked)
    label

script(id='partials/options.settings.subscription.html',type='text/ng-template')

  .well
    h2=env.t('individualSub')
    div(ng-if='!user.purchased.plan.customerId')
      div(ng-include="'partials/options.settings.subscription.perks.html'")
      .btn.btn-primary(ng-click='showStripe(true)')=env.t('subscribe')
      //-small.muted PayPal coming soon.

    div(ng-if='user.purchased.plan.customerId')
      .well
        div(style='font-size:22px')
          i.icon-ok=env.t('subscribed')
        div(ng-include="'partials/options.settings.subscription.perks.html'")
      .btn.btn-small.btn-danger(ng-click='cancelSubscription()')=env.t('cancelSub')


  //-.well.subscription-features
    h2=env.t('adminSub')

    table.table.table-striped
      tr
        th.feature-name
        //th.feature-name.muted Family (Coming Soon)
        //th.feature-name.muted Bronze (Coming Soon)
        //th.feature-name.muted Silver (Coming Soon)
        th.feature-name=env.t('gold')
        th.feature-name.muted
          !=env.t('morePlans')
      tr
        th
          span.dashed-underline(popover=env.t('organizationSubText'),popover-trigger='mouseenter',popover-placement='right')=env.t('organizationSub')
        //td(ng-include="'partials/feature-matrix-check.html'")
        //td(ng-include="'partials/feature-matrix-check.html'")
        //td(ng-include="'partials/feature-matrix-check.html'")
        td(ng-include="'partials/feature-matrix-check.html'")
        td
      tr
        th
          span.dashed-underline(popover=env.t('hostingTypeText'),popover-trigger='mouseenter',popover-placement='right')=env.t('hostingType')
        //td Shared
        //td Shared
        //td Shared
        td=env.t('dedicated')
        td

      tr
        th
          span.dashed-underline(popover=env.t('customDomainText'),popover-trigger='mouseenter',popover-placement='right')=env.t('customDomain')
        //td.muted
        //td.muted
        //td.muted
        td(ng-include="'partials/feature-matrix-check.html'")
        td
      tr
        th
          span.dashed-underline(popover=env.t('maxPlayersText'),popover-trigger='mouseenter',popover-placement='right')=env.t('maxPlayers')
        //td.muted 10
        //td.muted 50
        //td.muted 150
        td=env.t('unlimited')
        td
      tr
        th
          span.dashed-underline(popover=env.t('priSupportText'),popover-trigger='mouseenter',popover-placement='right')=env.t('priSupport')
        //td.muted
        //td.muted
        //td.muted
        td(ng-include="'partials/feature-matrix-check.html'")
        td
      tr
        th
          span.dashed-underline(popover=env.t('timeSupportText'),popover-trigger='mouseenter',popover-placement='right')=env.t('timeSupport')
        //td.muted 10
        //td.muted 20
        //td.muted 30
        td=env.t('unlimited')
        td
      tr
        th
          h5=env.t('gameFeatures')
          ul(style='margin:0 0 10px 25px;')
            li=env.t('gameNoAds')
            li
              span.dashed-underline(popover=env.t('gold2GemText'),popover-trigger='mouseenter',popover-placement='right')=env.t('gold2Gem')
            li
              span.dashed-underline(popover=env.t('infiniteGemText'),popover-trigger='mouseenter',popover-placement='right')=env.t('infiniteGem')
        //td(ng-include="'partials/feature-matrix-check.html'")
        //td(ng-include="'partials/feature-matrix-check.html'")
        //td(ng-include="'partials/feature-matrix-check.html'")
        td(ng-include="'partials/feature-matrix-check.html'")
        td
      tr
        th=env.t('price')
        //td.alert.alert-info ??? USD / Month
        //td.alert.alert-info ??? USD / Month
        //td.alert.alert-info ??? USD / Month
        td.alert.alert-info ??? 
          =env.t('monthUSD')
        td