{% 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 disabled'>{{ team.name }}</span>
      {% endfor %}
      </h5>
      {% if teamGroupsArr %}
        <h5>{{ 'Groups'|trans }}:
        <ul>
          {% for teamGroup in teamGroupsArr %}
            <li class='mt-2'>{{ teamGroup.name }}
            {% for user in teamGroup.users %}
              <span class='btn btn-secondary disabled'>{{ user.fullname|raw }}</span>
            {% endfor %}
            </li>
          {% endfor %}
        </ul>
        </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>
      <h4>{% trans %}
            Experiment
            {% plural 2 %}
            Experiments
            {% endtrans %}</h4>
      <p>{{ count }} {% trans %}
          experiments done since
          {% endtrans %} {{ App.Users.userData.register_date|date("l jS \\of F Y") }}</p>
      <div class='row'>
        <div class='col col-md-3'>
          <div class='pie-chart' style='--pie-data: {{ pieDataCss }}'></div>
        </div>
        <div class='col col-md-3'>
          <ul class='pie-legend'>
            {% for status in pieData %}
            <li style='color: {{ status.color }}'><span class='pie-percent' style='--bg: {{ status.color }}'>{{ status.percent }}%</span>{{ status.name }} ({{ status.count }})</li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
</section>

<div id='info' data-page='profile'></div>
{% endblock body %}