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')
        | 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 Warning: this is a highly-experimental feature, and many <a href='https://github.com/HabitRPG/habitrpg/issues/1057' target='_blank'>experience issues</a> with it.
      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')
        &nbsp;
        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')
        &nbsp;
        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')
        &nbsp;
        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')
        &nbsp;
        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')
        &nbsp;
        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="Ads will stay disabled while you have an active account (original users with disabled ads are grandfathered).",popover-trigger='mouseenter',popover-placement='right')
          | Disable ads
    tr
      td
        span.dashed-underline(popover="(1 Gem costs {{Shared.planGemLimits.convRate}} Gold) Addresses the \"pay to win\" concern, as everything is now achievable through hard work. There's a {{Shared.planGemLimits.convCap}}G monthly conversion cap to prevent farming.",popover-trigger='mouseenter',popover-placement='right')
          | Buy Gems with Gold
    tr
      td
        span.dashed-underline(popover="Makes your full history available in graphs and export. Non-subscriber histories get consolidated for database optimization.",popover-trigger='mouseenter',popover-placement='right')
          | Retain full history entries
    tr
      td
        span.dashed-underline(popover="Complete your stable faster!",popover-trigger='mouseenter',popover-placement='right')
          | Daily drop-caps doubled
    //-tr
    //-  td +20 gems to your account
    tr
      td
        span.dashed-underline(popover="This open source project can use all the help it can get. Help us keep Habit alive!",popover-trigger='mouseenter',popover-placement='right')
          | Supports the developers
    tr
      td.alert.alert-info $5 USD / Month

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 Individual Subscription
    div(ng-if='!user.purchased.plan.customerId')
      div(ng-include="'partials/options.settings.subscription.perks.html'")
      .btn.btn-primary(ng-click='showStripe(true)') Subscribe
      //-small.muted PayPal coming soon.

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


  //-.well.subscription-features
    h2 Administrator Subscriptions

    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 Gold
        th.feature-name.muted More Plans<br/>Coming Soon
      tr
        th
          span.dashed-underline(popover="Members of the organization participate outside of HabitRPG proper, providing focus for your participants.",popover-trigger='mouseenter',popover-placement='right')
            | Private Organization
        //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="Shared hosting means your organization uses the same database as HabitRPG proper even though you don't interact with Habitica. Dedicated means you get your own database and server. You can choose to have HabitRPG host your server/db, or we can install it on your own servers.",popover-trigger='mouseenter',popover-placement='right')
            | Hosting Type
        //td Shared
        //td Shared
        //td Shared
        td Dedicated
        td

      tr
        th
          span.dashed-underline(popover="We can optionally give you your own domain for the installation.",popover-trigger='mouseenter',popover-placement='right')
            | Custom Domain
        //td.muted
        //td.muted
        //td.muted
        td(ng-include="'partials/feature-matrix-check.html'")
        td
      tr
        th
          span.dashed-underline(popover="The maximum number of players in your private organization.",popover-trigger='mouseenter',popover-placement='right')
            | Max Participants
        //td.muted 10
        //td.muted 50
        //td.muted 150
        td Unlimited
        td
      tr
        th
          span.dashed-underline(popover="First to be provided for with support.",popover-trigger='mouseenter',popover-placement='right')
            | Priority support on tickets & hosting
        //td.muted
        //td.muted
        //td.muted
        td(ng-include="'partials/feature-matrix-check.html'")
        td
      tr
        th
          span.dashed-underline(popover="We will provide support for training, bugs, installation, and feature requests.",popover-trigger='mouseenter',popover-placement='right')
            | Support Hours / Month
        //td.muted 10
        //td.muted 20
        //td.muted 30
        td Unlimited
        td
      tr
        th
          h5 In-Game features
          ul(style='margin:0 0 10px 25px;')
            li Ads disabled for members
            li
              span.dashed-underline(popover="Members will be able to purchase gems with gold, meaning none of your participants need to buy anything with real money.",popover-trigger='mouseenter',popover-placement='right')
                | Gems purchasable with gold
            li
              span.dashed-underline(popover="We will provide the organization leaders with as many gems as they need, for things like challenge prizes, guild-creation, etc.",popover-trigger='mouseenter',popover-placement='right')
                | Infinite leader gems
        //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
          | Price
        //td.alert.alert-info ??? USD / Month
        //td.alert.alert-info ??? USD / Month
        //td.alert.alert-info ??? USD / Month
        td.alert.alert-info ??? USD / Month
        td