{#
/**
 * @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 single-training charts-loading">
    <div class="loader"></div>
    <div class="top-section">
      <div class="filters">
        {{ element.year }}
        {{ element.month }}
      </div>
    </div>

    <div class="bottom-section">
      <div class="canvas-container">
        <h3 class="content-box__title">{{ 'Training progress'|t }}</h3>
        <canvas id="training-progress-chart" class="training-progress-chart donut-chart donut-chart__md"></canvas>
      </div>

      <div class="canvas-container">
        <h3 class="content-box__title">{{ 'Training completion'|t }}</h3>
        <canvas id="training-completion-chart" class="training-completion-chart donut-chart donut-chart__md"></canvas>
      </div>
    </div>
  </div>
  {{ element.user_metrics }}
</div>

