England Football

Player Profile Stats 

<div class="player-profile-stats">
    <div class="player-profile-stats__select-competition" data-behaviour="player-profile-stats-select">
        <div class="player-profile-stats__label">SELECT STATS</div>
        <div class="player-profile-stats__dropdown" role="button" aria-label="SELECT STATS">
            <label for="player-stats-select">
                <select id="player-stats-select" class="custom-select">
                    <option value="" selected>Select Competition</option>
                    <option value="3_2020_114">European Championship Finals (2020)</option>
                    <option value="235_112020_114">Competition 235 (2020)</option>
                    <option value="336_112022_114">European World Cup Qualifiers (2022)</option>
                </select>
            </label>
        </div>
    </div>
    <div class="player-profile-stats__opta" data-player-id="">
    </div>
</div>

No notes defined.

{
  "heading": {
    "copy": "CURRENT SEASON STATS"
  }
}
  • Content: 
    import {
  loadNewChildWidgets,
  resumeChildWidgets,
  pauseChildWidgets,
} from '../../behaviours/opta-interactions/opta-interactions';
import customSelect from '../../behaviours/select/custom-select';

const MOBILE_BREAKPOINT = 800;
const playerStatsSelectElement = document.querySelector(
  '[data-behaviour="player-profile-stats-select"]'
);

if (window.innerWidth >= MOBILE_BREAKPOINT && playerStatsSelectElement) {
  const playerStatstBox = document
    .querySelector('.player-profile-stats')
    .querySelector('.custom-select');

  if (playerStatstBox) {
    customSelect(playerStatstBox);
  }
}

const generateOptaWidget = (
  competition,
  season,
  team,
  playerId,
  navigation
) => {
  return `
  <opta-widget data-behaviour="player-profile-stats" widget="season_player_stats" competition="${competition}" season="${season}" team="${team}"
  player="${playerId}" preselected_player="all" template="normal" navigation="${navigation}" default_nav="1" 
  show_split_stats="false" round_navigation="tabs" show_general="true" show_distribution="true" 
  show_attack="true" show_defence="true" show_discipline="true" show_goalkeeping="true" 
  team_naming="full" player_naming="full" show_logo="true" show_title="true" breakpoints="400" 
  sport="football" load="false"></opta-widget>`;
};

const generateOptaWidgetBlock = (competitionSelect, playerId) => {
  const navigation =
    window.innerWidth < MOBILE_BREAKPOINT ? 'dropdown' : 'tabs';

  competitionSelect.querySelectorAll('option').forEach(option => {
    if (option.value) {
      const dataVal = option.value.split('_');
      const competition = dataVal[0];
      const season = dataVal[1];
      const team = dataVal[2];
      const optaHtml = generateOptaWidget(
        competition,
        season,
        team,
        playerId,
        navigation
      );
      const listDiv = document.createElement('div');

      listDiv.id = `opta-widget-${option.value}`;
      listDiv.className = 'widget-hide';
      listDiv.innerHTML = optaHtml;
      document
        .querySelector('.player-profile-stats__opta')
        .appendChild(listDiv);
      // const optaObj = document.querySelector(`#opta-widget-${option.value}`);
    }
  });
};

const loadOptaWidgetData = optionValue => {
  const optaObj = document.querySelector(`#opta-widget-${optionValue}`);

  document.querySelectorAll('.player-profile-stats__opta > *').forEach(opta => {
    opta.classList.add('widget-hide');
  });
  pauseChildWidgets(optaObj);
  optaObj.classList.remove('widget-hide');
  loadNewChildWidgets(optaObj);
  resumeChildWidgets(optaObj);
  window.scrollTo(0, window.scrollY + 10);
};

export default () => {
  const ENTER_KEY_CODE = 13;

  const competitionSelect = document.querySelector(
    '[data-behaviour="player-profile-stats-select"]'
  );

  if (!competitionSelect) {
    return;
  }

  const optaWidgetPanel = document.querySelector('.player-profile-stats__opta');

  const { playerId } = optaWidgetPanel.dataset;

  generateOptaWidgetBlock(competitionSelect, playerId);

  if (window.innerWidth >= MOBILE_BREAKPOINT) {
    const optionSelect = document.querySelectorAll('.select-options li');
    const optionTimer = setInterval(() => {
      if (optionSelect) {
        competitionSelect
          .querySelectorAll('.select-options li')
          .forEach(option => {
            option.addEventListener('click', event => {
              event.stopPropagation();
              loadOptaWidgetData(event.target.getAttribute('rel'));
            });

            option.addEventListener('keydown', event => {
              if (event.keyCode === ENTER_KEY_CODE) {
                event.preventDefault();
                loadOptaWidgetData(event.target.getAttribute('rel'));
              }
            });
          });
        clearInterval(optionTimer);
      }
    }, 500);

    document.addEventListener('click', event => {
      event.stopPropagation();
    });
  } else {
    competitionSelect.addEventListener('change', event => {
      loadOptaWidgetData(event.target.value);
    });
  }
};
  • URL: /components/raw/player-profile-stats/player-profile-stats.js
  • Filesystem Path: src/library/modules/player-profile-stats/player-profile-stats.js
  • Size: 4.1 KB
  • Content: 
    .player-profile-stats {
  text-align: center;
  text-transform: uppercase;
  .heading-section {
    margin-top: 5.2rem;
  }
  &__select-competition {
    background: $grey-light;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2.4rem 1.6rem 2.2rem 1.6rem;
    border-radius: 4px;
    margin-top: 2.8rem;
  }
  &__label {
    @include heading-m;

    line-height: 3.4rem;
    color: var(--brand-primary);
    margin-bottom: 1.6rem;
  }
  &__dropdown {
    position: relative;
    width: 100%;
    &::after {
      content: '';
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      right: 0;
      top: 0;
      padding: 0 0 2px;
      position: absolute;
      pointer-events: none;
      background: url('./assets/images/chevron.svg') no-repeat center center;
      width: 3.8rem;
      height: 3.8rem;
      background-size: 0.8rem 1rem;
      background-color: rgba(236, 238, 243, 0.6);
    }
  }
  select::-ms-expand {
    display: none;
  }
  select {
    font-family: $text-font;
    font-size: 1.4rem;
    line-height: 4.4rem;
    color: var(--brand-primary);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 3.8rem;
    padding: 0 1.6rem;
    background-color: $white;
    -ms-word-break: normal;
    word-break: normal;
    border: 1px solid $grey;
    text-transform: uppercase;
  }
  &__opta {
    margin-top: 2rem;
    .widget-hide {
      display: none;
    }
  }
  &__subtitle {
    @include text-m;

    margin-top: 3.2rem;
    margin-bottom: 2.4rem;
    color: $color-interface-light;
  }
  .select-options li:first-child {
    display: none;
  }
  .Opta .Opta_F_SPS_N > h2 {
    display: none;
  }
  .Opta .Opta-Dropdown > .Opta-Nav h3 {
    @include text-s;

    line-height: 1.4rem;
    background-color: $white;
    color: $crest-blue;
    border-bottom: 1px solid $color-interface-light;
    height: 3.8rem;
  }
  .Opta .Opta-Exp .Opta-Icon::after {
    background: url('./assets/images/vector.svg') center center no-repeat;
  }
  .Opta .Opta-Exp.Opta-Open .Opta-Icon::after {
    transform: rotate(-180deg);
  }
  .Opta .Opta-Nav li {
    border-right: none;
    border-bottom: 0.2rem solid $light-blue;
    width: 100%;
  }
  .Opta .Opta-Nav a {
    @include text-l;

    background-color: transparent;
    color: $color-interface-light;
    line-height: 4.4rem;
    height: 4.4rem;
  }
  .Opta .Opta-Nav li.Opta-On a {
    background-color: transparent;
    color: var(--brand-primary);
  }
  .Opta .Opta-Dropdown > .Opta-Nav ul {
    border: none;
    top: 0;
    li {
      border-bottom: 1px solid $grey-light;
      text-align: left;
      a {
        @include text-s;

        line-height: 3.8rem;
        height: 3.8rem;
      }
    }
    li:nth-child(even) {
      a {
        background-color: $white;
      }
    }
  }
  .Opta .Opta-Nav,
  .Opta .Opta-Tabs .Opta-Nav > ul,
  .Opta .Opta-Tabs .Opta-Nav > ul.Opta-Overflowed:hover {
    background-color: $white;
  }
  .Opta .Opta-Tabs .Opta-Nav > ul {
    display: flex;
    height: 4.4rem;
  }
  .Opta .Opta-Nav li.Opta-On {
    border-bottom: 0.2rem solid var(--brand-primary);
  }
  .Opta .Opta-Stat .Opta-Value {
    font-family: $text-font;
    letter-spacing: 0.02em;
    font-size: 6rem;
    line-height: 4.4rem;
    fill: var(--brand-primary);
    color: var(--brand-primary);
  }
  .Opta .Opta-Stat .Opta-Label {
    @include text-s;

    font-size: 1.8rem;
    line-height: 4.4rem;
    color: #000;
    margin-top: -0.5rem;
  }
  .Opta .Opta_F_SPS_N .Opta-Stats {
    margin: 5.2rem 0 0 0;
  }
  .Opta-Flex-Item {
    border: none !important;
  }
  .Opta-Stats-Section-General {
    border-bottom: 1px solid $light-blue;
    padding-bottom: 3.5rem;
    .Opta-Stat .Opta-Value {
      font-family: $heading-font;
      font-size: 12.4rem;
      line-height: 8.7rem;
      letter-spacing: 0.01em;
    }
    .Opta-Flex-Item {
      border: none !important;
    }
    .Opta-Stat .Opta-Label {
      font-size: 1.4rem;
      line-height: 2rem;
      margin-top: 2.4rem;
      color: $blue;
    }
  }
  .Opta-Stats-Section-Defence-Basic {
    .Opta-Flex-Item {
      border: none !important;
      .Opta-Stats {
        margin-top: 2.4rem;
        margin-bottom: -1rem;
      }
    }
    .Opta-Flex-Item::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 10.3rem;
      display: block;
      margin: 0 auto;
    }
  }
  .Opta-Stats-Section-Defence-Graphs {
    border-bottom: 1px solid $light-blue;
    padding-bottom: 4.5rem;
    .Opta-Flex-Item {
      border: none !important;
    }
    .Opta-Stats-Radial {
      .Opta-Stat {
        width: 21.6rem;
        height: 21.6rem;
      }
      .Opta-Value {
        font-size: 5rem;
        line-height: 5rem;
        transform: translateY(1.5rem);
      }
      .Opta-Label {
        font-size: 1.4rem !important;
        line-height: 4.4rem;
        transform: translateY(3rem);
      }
    }
  }
  .Opta-Stats-Section-Goalkeeping {
    .Opta-Stats-Radial {
      .Opta-Stat {
        width: 21.6rem;
        height: 21.6rem;
      }
      .Opta-Value {
        font-size: 5rem;
        line-height: 5rem;
        transform: translateY(1.5rem);
      }
      .Opta-Label {
        font-size: 1.4rem !important;
        line-height: 4.4rem;
        transform: translateY(3rem);
      }
    }
    .Opta-Stat .Opta-Label::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 10.3rem;
      display: block;
      margin: 0 auto;
    }
  }
  .Opta-Stats-Section-Distribution-Mixed {
    .Opta-Stats-Section-Distribution-Passes {
      margin-top: 3rem;
      .Opta-Label {
        line-height: 2rem;
        margin-top: 0.2rem;
      }
    }
    .Opta-Flex-Item {
      border: none !important;
    }
    .Opta-Stats-Radial {
      .Opta-Stat {
        width: 21.6rem;
        height: 21.6rem;
      }
      .Opta-Value {
        font-size: 5rem;
        line-height: 5rem;
        transform: translateY(1.5rem);
      }
      .Opta-Label {
        font-size: 1.4rem !important;
        transform: translateY(3rem);
      }
    }
    .Opta-Stat .Opta-Label::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 10.3rem;
      display: block;
      margin: 0 auto;
    }
  }
  .Opta-Stats-Section-Distribution-Graphs {
    .Opta-Flex-Item {
      border: none !important;
    }
    .Opta-Stats-Cross .Opta-Graph-Line {
      stroke: $grey;
    }
    .Opta-Stats-Pitch-Halfs .Opta-Graph-Line {
      stroke: $color-interface-light;
    }
    .Opta-Stat .Opta-Label {
      transform: translateY(1rem);
    }
  }
  .Opta-Stats-Section-Distribution-Basic {
    .Opta-Flex-Item {
      border: none !important;
    }
    .Opta-Stat .Opta-Label {
      margin-bottom: -1rem;
    }
    .Opta-Stat .Opta-Label::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 15.3rem;
      display: block;
      margin: 0 auto;
    }
  }
  .Opta-Stats-Section-Attack-Shots {
    .Opta-Stats-Bars-Simple {
      margin-top: 2.9rem !important;
    }
    .Opta-Stats-Nested .Opta-Flex-Item > .Opta-Stats {
      margin-top: 3rem !important;
    }
    .Opta-Stat .Opta-Label::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 10.3rem;
      display: block;
      margin: 0 auto;
    }
  }
  .Opta .Opta-Stats-Goal-Methods .Opta-Goal-Figure {
    float: initial;
    margin: 0 auto;
  }
  .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Simple-Bar {
    padding: 0 1.6rem 0 2rem;
  }
  .Opta-Stats-Section-Discipline {
    .Opta-Stat-Card {
      transform: translateY(-2.3rem);
    }
    .Opta-Stat-Card .Opta-Value {
      transform: rotate(10deg);
      width: 5.1rem !important;
      height: 7.1rem !important;
      border-radius: 4px !important;
      border: none;
      font-size: 0 !important;
      line-height: 4.4rem !important;

      &::after {
        content: attr(data-start);
        font-size: 3.4rem !important;
        transform: rotate(-10deg);
        position: relative;
        top: 15px;
        display: inline-block;
      }
    }
    .Opta-Stat-Yellow .Opta-Value {
      background-color: $amber !important;
      color: $blue !important;
    }
    .Opta-Stat-Red .Opta-Value {
      background-color: $red !important;
      color: $white !important;
    }
    .Opta-Stat .Opta-Label::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 15.3rem;
      display: block;
      margin: 0 auto;
    }
  }
  .Opta-Stats-Section-Attack-Methods {
    .Opta-Goal-Method > div {
      border: none !important;
    }
    .Opta-Stat .Opta-Label::after {
      content: '';
      border-bottom: 1px solid #c4c4c4;
      width: 15.3rem;
      display: block;
      margin: 0 auto;
    }
    .Opta-Stats-Section-Attack-Box {
      margin-top: -5rem !important;
      .Opta-Stats-Text {
        margin-top: 2rem !important;
      }
    }
    .Opta-Stats-Section-Attack--Goal-Methods {
      .Opta-Stats-Goal-Methods {
        margin-top: 0 !important;
        .Opta-Stat .Opta-Label::after {
          content: '';
          border-bottom: 1px solid #c4c4c4;
          width: 15.3rem;
          display: block;
          margin: 0 auto;
        }
      }
      .Opta-Goal-Method .Opta-Goal-Figure {
        background-size: contain;
      }
      .Opta-Goal-Method-Left .Opta-Goal-Figure {
        background-image: url('./assets/images/attack-left-foot.svg');
        width: 10.1rem;
        height: 10.1rem;
      }
      .Opta-Goal-Method-Right .Opta-Goal-Figure {
        background-image: url('./assets/images/attack-right-foot.svg');
        width: 8.4rem;
        height: 10.1rem;
      }
      .Opta-Goal-Method-Headed .Opta-Goal-Figure {
        background-image: url('./assets/images/attack-head.svg');
        width: 10.2rem;
        height: 10.2rem;
      }
      .Opta-Goal-Method-Other .Opta-Goal-Figure {
        background-image: url('./assets/images/attack-other.svg');
        width: 8.5rem;
        height: 10.4rem;
      }
    }
  }
  .Opta .Opta-Stats-Football-Box .Opta-Stat {
    width: 34rem;
  }
  .Opta .Opta-Stats-Radial .Opta-Stat path.Opta-Arc,
  .Opta .Opta-Stats-Cross .Opta-Stat circle {
    fill: var(--brand-primary);
  }
  .Opta .Opta-Graph-Title {
    font-family: $text-font;
    letter-spacing: 0.02em;
    font-size: 2.2rem;
    line-height: 4.4rem;
    font-weight: normal;
    color: $dark-black;
  }
  .Opta .Opta-Stats-Goal-Methods .Opta-Label,
  .Opta .Opta-Stats-Goal-Methods .Opta-Value {
    margin-left: 0;
  }
  .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Bar-Track .Opta-Bar-Fill {
    background: var(--brand-primary);
    height: 0.4rem;
  }
  .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Bar-Track {
    background: $grey;
    height: 0.4rem;
  }
  .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Graph-Title {
    @include text-s;

    line-height: 1.8rem;
    width: 14rem;
    text-align: left;
    color: $dark-black;
  }
  .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Value {
    font-size: 2.4rem;
    width: 4.4rem;
    text-align: right;
  }
  .Opta .Opta-Stats-Radial .Opta-Info {
    display: none;
  }
  .Opta .Opta_F_SPS_N .Opta-Stats-Goal-Methods .Opta-Goal-Method {
    min-width: 25%;
  }

  @media screen and (min-width: $mq-medium) {
    &__subtitle {
      font-size: 1.8rem;
    }
    &__select-competition {
      padding: 2.8rem 1.6rem;
      margin-top: 4.8rem;
      height: 9.4rem;
      flex-direction: row;
    }
    label {
      position: relative;
      width: calc(100% + 3.8rem);
      height: 3.8rem;
      display: block;
      text-align: left;
    }
    &__label {
      margin-right: 2.4rem;
      margin-bottom: 0;
    }
    &__dropdown {
      width: 29rem;
      &::after {
        content: '';
        display: none;
      }
    }
    &__opta {
      margin-top: 4rem;
    }
    .Opta .Opta-Nav li.Opta-On a {
      background-color: transparent;
      color: var(--brand-primary);
    }
    .Opta-Stats-Section-General {
      flex-wrap: nowrap;
    }
    .Opta-Stats-Section-Defence-Basic {
      .Opta-Flex-Item::after {
        width: 22rem;
      }
    }
    .Opta-Stats-Section-Goalkeeping {
      .Opta-Stat .Opta-Label::after {
        width: 13rem;
      }
    }
    .Opta-Stats-Section-Distribution-Basic {
      flex-flow: nowrap;
    }
    .Opta .Opta-Stats-Football-Box .Opta-Stat {
      width: 40rem;
    }
    .Opta-Stats-Section-Attack-Shots {
      .Opta-Stats {
        margin-top: 0;
        .Opta-Stat {
          margin: 0;
        }
      }
      .Opta-Stats-Nested .Opta-Flex-Item:first-child > .Opta-Stats {
        margin-top: 3rem !important;
      }
      .Opta-Stats-Section-Attack-Conversion {
        .Opta-Flex-Item:last-child .Opta-Stats {
          margin-top: 3.5rem;
        }
      }
      .Opta-Stat .Opta-Label::after {
        width: 22rem;
      }
      .Opta-Stats-Bars-Simple > div {
        margin: 2rem 0 !important;
      }
    }
    .Opta-Stats-Section-Defence-Graphs {
      .Opta-Stats-Radial {
        margin-top: 3.2rem !important;
      }
    }
    .Opta-Stats-Section-Discipline {
      .Opta-Flex-Item > div {
        margin-top: 7.5rem !important;
      }
      .Opta-Stat-Card {
        transform: translateY(-3.3rem);
      }
    }
    .Opta-Stats-Section-Distribution-Mixed {
      .Opta-Stats-Section-Distribution-Passes {
        .Opta-Flex-Item > div {
          margin-top: 0;
          .Opta-Stat {
            margin: 0;
          }
        }
        .Opta-Stat .Opta-Label {
          line-height: 4.4rem;
          margin-top: -1.2rem;
        }
      }
      .Opta-Stat .Opta-Label::after {
        width: 22rem;
      }
    }
    .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Graph-Title {
      width: 18rem;
      font-size: 1.8rem;
      line-height: 2.4rem;
    }
    .Opta .Opta-Stats-Bars.Opta-Stats-Bars-Simple .Opta-Simple-Bar {
      padding: 0 3rem 0 5.3rem;
    }
    .Opta-Flex.Opta-Stats-Section-Attack-Methods {
      flex-direction: column-reverse;
      .Opta-Stats-Section-Attack--Goal-Methods {
        .Opta-Stat .Opta-Label::after {
          width: 22rem;
        }
        .Opta-Goal-Method-Left .Opta-Goal-Figure {
          width: 14.2rem;
          height: 14.2rem;
        }
        .Opta-Goal-Method-Right .Opta-Goal-Figure {
          width: 11.7rem;
          height: 14.2rem;
        }
        .Opta-Goal-Method-Headed .Opta-Goal-Figure {
          width: 14.2rem;
          height: 14.2rem;
        }
        .Opta-Goal-Method-Other .Opta-Goal-Figure {
          width: 11.7rem;
          height: 14.2rem;
        }
      }
      .Opta-Stats-Section-Attack-Box {
        .Opta-Stat .Opta-Label::after {
          border: none;
        }
        .Opta-Stats-Football-Box {
          margin-top: 8.2rem !important;
        }
      }
    }
  }
}

:root [data-brand='womens'] {
  .player-profile-stats {
    .Opta-Goal-Method-Left .Opta-Goal-Figure {
      background-image: url('./assets/images/attack-left-foot-women.svg');
      width: 9.7rem;
      height: 10.1rem;
    }
    .Opta-Goal-Method-Right .Opta-Goal-Figure {
      background-image: url('./assets/images/attack-right-foot-women.svg');
      width: 9.4rem;
      height: 10.1rem;
    }
    .Opta-Goal-Method-Headed .Opta-Goal-Figure {
      background-image: url('./assets/images/attack-head-women.svg');
      width: 6.9rem;
      height: 10.2rem;
    }
    .Opta-Goal-Method-Other .Opta-Goal-Figure {
      background-image: url('./assets/images/attack-other-women.svg');
      width: 7.8rem;
      height: 10.4rem;
    }

    @media screen and (min-width: $mq-medium) {
      .Opta-Goal-Method-Left .Opta-Goal-Figure {
        width: 12.7rem;
        height: 13.1rem;
      }
      .Opta-Goal-Method-Right .Opta-Goal-Figure {
        width: 12.1rem;
        height: 13rem;
      }
      .Opta-Goal-Method-Headed .Opta-Goal-Figure {
        width: 8.9rem;
        height: 13.1rem;
      }
      .Opta-Goal-Method-Other .Opta-Goal-Figure {
        width: 9.7rem;
        height: 12.9rem;
      }
    }
  }
}
  • URL: /components/raw/player-profile-stats/player-profile-stats.scss
  • Filesystem Path: src/library/modules/player-profile-stats/player-profile-stats.scss
  • Size: 16.2 KB 
<div class="player-profile-stats">
    <div class="player-profile-stats__select-competition" data-behaviour="player-profile-stats-select">
        <div class="player-profile-stats__label">SELECT STATS</div>
        <div class="player-profile-stats__dropdown" role="button" aria-label="SELECT STATS">
            <label for="player-stats-select">
                <select id="player-stats-select" class="custom-select">
                    <option value="" selected>Select Competition</option>            
                    <option value="3_2020_114">European Championship Finals (2020)</option>
                    <option value="235_112020_114">Competition 235 (2020)</option>
                    <option value="336_112022_114">European World Cup Qualifiers (2022)</option>
                </select>
            </label>
        </div>
    </div>
    <div class="player-profile-stats__opta" data-player-id="{{playerId}}">
    </div>
</div>