{% extends 'Admin/admin.html.twig' %}
{% block title %}{{ "Détail du personnage"|trans }} {{ player.Name }}{% endblock %}
{% block body %}
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">{{ 'Détail du personnage'|trans }}</h6>
  </div>
  <div class="card-body border-0">
    <h1 class="text-center mb-3">{{ player.Name }}</h1>

    {% if player.MapName is defined and player.MapName is not null %}
    <h2 class="text-center mb-3">{{ "Position"|trans }} {{ player.MapName }}</h2>
    {% endif %}

    {% if player.PlayTimeSeconds is defined and player.PlayTimeSeconds is not null %}
    <h2 class="text-center mb-3">{{ "Temps de jeu"|trans }} : {{ player.PlayTimeSeconds|ago }}</h2>
    {% endif %}

    <label>{{ "Vie"|trans }} : {{ player.Vitals[0] }} / {{ player.MaxVitals[0] }}</label>
    <div class="progress mb-3" style="height: 20px;">
      <div class="progress-bar bg-danger" style="width: {{ player.Vitals[0] * 100 / player.MaxVitals[0] }}%;">
        {{ player.Vitals[0] * 100 / player.MaxVitals[0] }}%
      </div>
    </div>

    <label>{{ "Mana"|trans }} : {{ player.Vitals[1] }} / {{ player.MaxVitals[1] }}</label>
    <div class="progress mb-3" style="height: 20px;">
      <div class="progress-bar bg-primary" style="width: {{ player.Vitals[1] * 100 / player.MaxVitals[1] }}%;">
        {{ player.Vitals[1] * 100 / player.MaxVitals[1] }}%
      </div>
    </div>

    <label>{{ "Exp"|trans }} : {{ player.Exp }} / {{ player.ExperienceToNextLevel }}</label>
    <div class="progress mb-3" style="height: 20px;">
      <div class="progress-bar bg-warning" style="width: {{ player.Exp * 100 / player.ExperienceToNextLevel }}%;">
        {{ (player.Exp * 100 / player.ExperienceToNextLevel)|round(1,'floor') }}%
      </div>
    </div>

    <h1 class="text-center">{{ "Inventaire"|trans }}</h1>
    <div id="inventory-container" class="d-flex flex-wrap justify-content-center my-3"></div>

    <h1 class="text-center">{{ "Banque"|trans }}</h1>
    <div id="bank-container" class="d-flex flex-wrap justify-content-center my-3"></div>

    <h1 class="text-center">{{ "Sac à dos"|trans }}</h1>
    <div id="bag-container" class="d-flex flex-wrap justify-content-center my-3"></div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/admin/character_details_ajax.js') }}"></script>
<script>
  const inventoryIds = {{ inventoryIds|json_encode|raw }};
  const bankIds = {{ bankIds|json_encode|raw }};
  const bagIds = {{ bagIds|json_encode|raw }};
</script>
{% endblock %}