include ../avatar/generated_avatar

script(type='text/ng-template', id='modals/lowHealth.html')
  .modal-header
    h3.text-center=env.t('losingHealthWarning')
  .modal-body
    .hero-stats(style='position:absolute; margin-left:9em; width:50%')
      .meter-label(tooltip=env.t('health'))
        span.glyphicon.glyphicon-heart
      .meter.health(tooltip='{{Math.round(user.stats.hp * 100) / 100}}')
        .bar(ng-style='{"width": Shared.percent(user.stats.hp, Shared.maxHealth)+"%"}')
        span.meter-text.value
          | {{Math.ceil(user.stats.hp)}} / {{::Shared.maxHealth}}
    .herobox.inline-block(style='padding-top:0em; margin-left:16em')
      .character-sprites(style='display:inline-flex; margin:3em auto')
        +generatedAvatar
    p=env.t('losingHealthWarning2')
    h4=env.t('toRegainHealth')
    ul
      li.spaced=env.t('lowHealthTips1')
      li.spaced=env.t('lowHealthTips2')
    h4=env.t('losingHealthQuickly')
    ul
      li.spaced=env.t('lowHealthTips3')
      li.spaced=env.t('lowHealthTips4')
    h4=env.t('goodLuck')
  .modal-footer(style='margin-top: 0em')
    a.btn.btn-primary(ng-click='acknowledgeHealthWarning(); $close()')=env.t('ok')