{#
/**
 * @file
 * Default theme implementation of a container used to wrap child elements.
 *
 * Used for grouped form items. Can also be used as a theme wrapper for any
 * renderable element, to surround it with a <div> and HTML attributes.
 * See \Drupal\Core\Render\Element\RenderElement for more
 * information on the #theme_wrappers render array property, and
 * \Drupal\Core\Render\Element\container for usage of the container render
 * element.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - children: The rendered child elements of the container.
 * - has_parent: A flag to indicate that the container has one or more parent
     containers.
 *
 * @see template_preprocess_container()
 *
 * @ingroup themeable
 */
#}

{%
  set classes = [
  has_parent ? 'js-form-wrapper',
  has_parent ? 'form-wrapper',
  'statistics-header',
  'content-box',
]
%}
<div {{ attributes.addClass(classes) }}>
  <div class="charts-section charts-loading">
    <div class="loader"></div>
    <div class="left-col">
      <div class="canvas-container">
        <h3 class="content-box__title">{{ 'Trainings progress'|t }}</h3>
        <canvas id="trainings-progress-chart" class="trainings-progress-chart donut-chart donut-chart__md"></canvas>
      </div>
      <div class="canvas-container">
        <h3 class="content-box__title">{{ 'Trainings completion'|t }}</h3>
        <canvas id="trainings-completion-chart" class="trainings-completion-chart donut-chart donut-chart__md"></canvas>
      </div>
    </div>
    <div class="right-col">
      <div class="top-section">
        <h2 class="content-box__title">{{ 'Active users per day (last 30 days)'|t }}</h2>
        <div class="filters">
          {{ element.year }}
          {{ element.month }}
        </div>
      </div>
      <div class="canvas-container">
        <canvas id="active-users-chart" class="active-users-chart line-chart line-chart__lg"></canvas>
      </div>
    </div>
  </div>
  {{ element.content_statistics }}
</div>

