{% extends 'base.html' %}

{% block body %}
<!-- USER INFOS -->
<section class='box'>
    <i class='fas fa-user fa-lg mr-1 align-top'></i><h5 class='d-inline'>{{ 'Info'|trans }}</h5>
    <hr>
    <div>
      <h4>{{ App.Users.userData.fullname|raw }} ({{ App.Users.userData.email }})</h4>
      <!-- TEAM -->
      <h5>{{ 'Member of:'|trans }}
      {% for team in teamsArr %}
        <span class='btn btn-secondary'>{{ team.name }}</span>
      {% endfor %}
      </h5>
      {% if teamGroupsArr %}
        <h5>{{ 'Groups'|trans }}:
          {% for group in teamGroupsArr %}
          <span class='btn btn-secondary'>{{ group.name }}</span>
          {% endfor %}
        </h5>
      {% endif %}
      <p><a href='ucp.php'>{% trans %}Go to user control panel{% endtrans %}</a>
    </div>
</section>

<!-- STATUS STAT -->
<section class='box'>
    {% if count == 0 %}
      {{ 'No statistics available yet.'|trans }}
    {% else %}
    <i class='fas fa-chart-pie fa-lg mr-1'></i><h5 class='d-inline'>{{ 'Statistics'|trans }}</h5>
        <hr>
        <p>{{ count }} {% trans %}
            experiments done since
            {% endtrans %} {{ App.Users.userData.register_date|date("l jS \\of F Y") }}</p>
        <div id='stats' data-stats='{{ statsJson|raw }}' data-title='{% trans %}
                Experiment
                {% plural 2 %}
                Experiments
                {% endtrans %}'
        data-colors='{{ colorsJson|raw }}'></div>
        <div id='pieChart' class='text-center'></div>
    {% endif %}
</section>

<script src='https://www.gstatic.com/charts/loader.js'></script>
{% endblock body %}