<section class="team-stats" data-behavior="team-stats">
<div class="team-stats__content">
<div class="team-stats__tabs">
<div role="tablist" aria-label="Season stats" class="tab-list">
<a href="#panel-current-season" role="tab" aria-selected="true" aria-controls="panel-current-season" id="tab-current-season" tabindex="0">
Current season
</a>
<a href="#panel-all-time" role="tab" aria-selected="false" aria-controls="panel-all-time" id="tab-all-time" tabindex="0">
All time
</a>
</div>
</div>
<div id="panel-current-season" role="tabpanel" tabindex="0" aria-labelledby="tab-current-season" data-tab-label="Current season">
<div>
<h2 class="team-stats__title">Current Season stats</h2>
<p class="text-s team-stats__season-timeline">Since 1st Augsut 2021 - Present</p>
<div class="team-stats__list">
<div class="stat-item">
<p>
88
</p>
<span>Total games</span>
</div>
<div class="stat-item">
<p>
88
</p>
<span>Total goals</span>
</div>
<div class="stat-item">
<p>
8.88
</p>
<span>Goals per game</span>
</div>
<div class="stat-item">
<p>
8.88
</p>
<span>Shots per game</span>
</div>
<div class="stat-item">
<p>
88
</p>
<span>Expected goals<i>(xG)</i></span>
</div>
<div class="stat-item">
<p>
88
<sub class="stat-unit">%</sub>
</p>
<span>Average possession</span>
</div>
<div class="stat-item">
<p>
88
<sub class="stat-unit">%</sub>
</p>
<span>Win percentage</span>
</div>
<div class="stat-item">
<p>
88
<sub class="stat-unit">Th</sub>
</p>
<span>Current ranking</span>
</div>
</div>
<div class="team-stats__goals-details">
<div class="team-stats__progress-block">
<div class="tit">How the goals have been scored (%) <span></span></div>
<ul>
<li>
<div class="progress-label">Direct free-kick</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:90%"><span class="visually-hidden">90%</span></div>
</li>
<li>
<div class="progress-label">Penalty</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:10%"><span class="visually-hidden">10%</span></div>
</li>
<li>
<div class="progress-label">Outside box</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:40%"><span class="visually-hidden">40%</span></div>
</li>
<li>
<div class="progress-label">Inside box</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:20%"><span class="visually-hidden">20%</span></div>
</li>
<li>
<div class="progress-label">Header</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:60%"><span class="visually-hidden">60%</span></div>
</li>
<li>
<div class="progress-label">Open play</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:20%"><span class="visually-hidden">20%</span></div>
</li>
<li>
<div class="progress-label">Counter-attack</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:60%"><span class="visually-hidden">60%</span></div>
</li>
<li class="goals-count">
<span>0</span>
<span>10</span>
<span>20</span>
<span>30</span>
<span>40</span>
<span>50</span>
</li>
</ul>
</div>
<div class="team-stats__goal-post">
<div class="tit">Shots on target</div>
<div class="goal-net-outer" data-behavior="team-stats-goal">
<div class="goal-nets">
<div class="top-left"><span>3</span></div>
<div class="top-middle"><span>2</span></div>
<div class="top-right"><span>8</span></div>
<div class="bottom-left"><span>2</span></div>
<div class="bottom-middle"><span>7</span></div>
<div class="bottom-right"><span>1</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="team-stats__player-stats">
<h2 class="team-stats__title">Player statistics</h2>
<div class="carousel-container carousel--desktop-reset">
<div class="carousel-navigation">
<button aria-label="Previous" class="carousel__cta carousel__prev"><span class="visually-hidden">Previous
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg></button>
<button aria-label="Next" class="carousel__cta carousel__next"><span class="visually-hidden">Next
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg></button>
</div>
<div class="carousel player-stats-list" data-behavior="season-stats-carousel">
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Appearances">
<img src="/assets/example-content/player-stats.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Appearances</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">M.Mount</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Goals">
<img src="/assets/example-content/player-stats-2.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Goals</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">H.Kane</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Assists">
<img src="/assets/example-content/player-stats-3.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Assists</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">T.Mings</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Big chances created">
<img src="/assets/example-content/player-stats-4.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Big chances created</div>
<div class="player-stats__value">4 </div>
<div class="player-stats__name">T.Abraham</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Dribbles">
<img src="/assets/example-content/player-stats-5.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Dribbles</div>
<div class="player-stats__value">8 <span>.17 Yrs</span></div>
<div class="player-stats__name">H.Winks</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Tackles">
<img src="/assets/example-content/player-stats-6.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Tackles</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">J.Pickford</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Interceptions">
<img src="/assets/example-content/player-stats-7.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Interceptions</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">M.Rashford</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Clean sheets">
<img src="/assets/example-content/player-stats-8.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Clean sheets</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">R.Sterling</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div role="tablist" class="carousel__pagination"></div>
</div>
</div>
</div>
<div id="panel-all-time" role="tabpanel" tabindex="0" aria-labelledby="tab-all-time" data-tab-label="All time">
<!-- all time stats -->
<div>
<h2 class="team-stats__title">All-time stats</h2>
<p class="text-s team-stats__season-timeline">Since 3rd December 1870 - present</p>
<div class="team-stats__tab-block">
<div class="team-stats__list all-time">
<div class="stat-item">
<p>
8888
</p>
<span>Total games</span>
</div>
<div class="stat-item">
<p>
888
</p>
<span>Total goals</span>
</div>
<div class="stat-item">
<p>
8.88
</p>
<span>Goals per game</span>
</div>
<div class="stat-item">
<p>
88
<sub class="stat-unit">%</sub>
</p>
<span>Win percentage</span>
</div>
<div class="stat-item">
<p>
8.888
</p>
<span>Total players</span>
</div>
</div>
<div class="team-stats__info-block">
<ul>
<li>
<div class="team-stats__label-txt">Best world cup finish</div>
<div class="team-stats__info-txt">Winner 1966</div>
</li>
<li>
<div class="team-stats__label-txt">Best EuroS finish</div>
<div class="team-stats__info-txt">Semi-finals 1966</div>
</li>
<li>
<div class="team-stats__label-txt">Biggest win</div>
<div class="team-stats__info-txt">0-13 Ireland v England 1930</div>
</li>
<li>
<div class="team-stats__label-txt">First game</div>
<div class="team-stats__info-txt">0-1 SCOTLAND V ENGLAND 03.12.1870</div>
</li>
</ul>
</div>
<div>
</div>
</div>
<div class="team-stats__player-stats">
<h2 class="team-stats__title">All-time Player statistics</h2>
<div class="carousel-container carousel--desktop-reset">
<div class="carousel-navigation">
<button aria-label="Previous" class="carousel__cta carousel__prev"><span class="visually-hidden">Previous
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg></button>
<button aria-label="Next" class="carousel__cta carousel__next"><span class="visually-hidden">Next
page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg></button>
</div>
<div class="carousel player-stats-list" data-behavior="all-time-stats-carousel">
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Appearances">
<img src="/assets/example-content/player-stats.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Appearances</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">M.Mount</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Goals">
<img src="/assets/example-content/player-stats-2.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Goals</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">H.Kane</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Assists">
<img src="/assets/example-content/player-stats-3.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Assists</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">T.Mings</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Big chances created">
<img src="/assets/example-content/player-stats-4.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Big chances created</div>
<div class="player-stats__value">4 </div>
<div class="player-stats__name">T.Abraham</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Dribbles">
<img src="/assets/example-content/player-stats-5.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Dribbles</div>
<div class="player-stats__value">8 <span>.17 Yrs</span></div>
<div class="player-stats__name">H.Winks</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Tackles">
<img src="/assets/example-content/player-stats-6.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Tackles</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">J.Pickford</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Interceptions">
<img src="/assets/example-content/player-stats-7.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Interceptions</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">M.Rashford</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="player-stats">
<div class="player-stats__img-wrapper" data-info="Clean sheets">
<img src="/assets/example-content/player-stats-8.png" alt="" />
<div class="player-stats__info-block">
<div class="player-stats__position">Clean sheets</div>
<div class="player-stats__value">88 </div>
<div class="player-stats__name">R.Sterling</div>
</div>
</div>
<div class="player-stats__ranking-card">
<ul>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>11</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>8</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>5</span>
</li>
<li>
<img src="/assets/example-content/player-stats-small-1.png" />
<p>T. Alexander-Arnold</p>
<span>3</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div role="tablist" class="carousel__pagination"></div>
</div>
</div>
</div>
</div>
</div>
</section>
We need to simply the following functionality in such way that it looks for data-behavior="team-stat" first, and then look for .goal-net-outer within the parent. With this approach, we would required to pass only one parentElement and since reset of the elements would be looked within it, we would have more control on the logic which can be reused elsewhere as whole.
export default () => {
const goalStats = document.querySelectorAll('.goal-net-outer');
if (goalStats) {
renderGoalBorder({ parentElement: goalStats });
}
const statsTabs = document.querySelectorAll('[data-behavior="team-stats"]');
const statCarousels = setUpCarousels();
if (statsTabs) {
tabs(statsTabs, () => {
statCarousels.forEach(statCarousel => {
statCarousel.refresh(true);
});
});
}
};
{
"currentTeamStats": [
{
"statName": "Total games",
"statValue": "88"
},
{
"statName": "Total goals",
"statValue": "88"
},
{
"statName": "Goals per game",
"statValue": "8.88"
},
{
"statName": "Shots per game",
"statValue": "8.88"
},
{
"statName": "Expected goals",
"statValue": "88",
"shortName": "(xG)"
},
{
"statName": "Average possession",
"statValue": "88",
"unit": "%"
},
{
"statName": "Win percentage",
"statValue": "88",
"unit": "%"
},
{
"statName": "Current ranking",
"statValue": "88",
"unit": "Th"
}
],
"progress": [
{
"label": "Direct free-kick",
"percentage": "90"
},
{
"label": "Penalty",
"percentage": "10"
},
{
"label": "Outside box",
"percentage": "40"
},
{
"label": "Inside box",
"percentage": "20"
},
{
"label": "Header",
"percentage": "60"
},
{
"label": "Open play",
"percentage": "20"
},
{
"label": "Counter-attack",
"percentage": "60"
}
],
"goalTarget": [
{
"position": "top-left",
"goalCount": "3"
},
{
"position": "top-middle",
"goalCount": "2"
},
{
"position": "top-right",
"goalCount": "8"
},
{
"position": "bottom-left",
"goalCount": "2"
},
{
"position": "bottom-middle",
"goalCount": "7"
},
{
"position": "bottom-right",
"goalCount": "1"
}
],
"alltimeStats": [
{
"statName": "Total games",
"statValue": "8888"
},
{
"statName": "Total goals",
"statValue": "888"
},
{
"statName": "Goals per game",
"statValue": "8.88"
},
{
"statName": "Win percentage",
"statValue": "88",
"unit": "%"
},
{
"statName": "Total players",
"statValue": "8.888"
}
],
"allTimeStatsCarousel": {
"carousel-name": "all-time-stats-carousel"
},
"seasonStatsCarousel": {
"carousel-name": "season-stats-carousel"
}
}
import tabs from '../../behaviours/tabs/tabs';
import carousel from '../carousel/carousel';
const renderGoalBorder = ({ parentElement }) => {
const topLeft = parentElement.querySelector('.top-left span').innerText;
const topMiddle = parentElement.querySelector('.top-middle span').innerText;
const topRight = parentElement.querySelector('.top-right span').innerText;
const bottomLeft = parentElement.querySelector('.bottom-left span').innerText;
const bottomMiddle = parentElement.querySelector('.bottom-middle span')
.innerText;
const bottomRight = parentElement.querySelector('.bottom-right span')
.innerText;
if (topLeft > 0) {
const topLeftborder = (topLeft * 2) / 10;
const topLeftborderLeft = `left:${7.5 - topLeftborder}`;
const topLeftborderTop = `top:${4 - topLeftborder}`;
parentElement
.querySelector('.top-left')
.setAttribute(
'style',
`border-width:${topLeft *
2}px;${topLeftborderLeft}rem;${topLeftborderTop}rem;`
);
}
if (topMiddle > 0) {
const topMiddleborder = (topMiddle * 2) / 10;
const topMiddleborderLeft = `left:calc(50% - ${topMiddleborder}rem)`;
const topMiddleborderTop = `top:${4 - topMiddleborder}`;
parentElement
.querySelector('.top-middle')
.setAttribute(
'style',
`border-width:${topMiddle *
2}px;${topMiddleborderLeft};${topMiddleborderTop}rem;`
);
}
if (topRight > 0) {
const topRightborder = (topRight * 2) / 10;
const topRightborderRight = `right:${6.5 - topRightborder}`;
const topRightborderTop = `top:${4 - topRightborder}`;
parentElement
.querySelector('.top-right')
.setAttribute(
'style',
`border-width:${topRight *
2}px;${topRightborderRight}rem;${topRightborderTop}rem;`
);
}
if (bottomLeft > 0) {
const bottomLeftborder = (bottomLeft * 2) / 10;
const bottomLeftborderLeft = `left:${7.5 - bottomLeftborder}`;
const bottomLeftborderBottom = `bottom:${3 - bottomLeftborder}`;
parentElement
.querySelector('.bottom-left')
.setAttribute(
'style',
`border-width:${bottomLeft *
2}px;${bottomLeftborderLeft}rem;${bottomLeftborderBottom}rem;`
);
}
if (bottomMiddle > 0) {
const bottomMiddleborder = (bottomMiddle * 2) / 10;
const bottomMiddleborderLeft = `left:calc(50% - ${bottomMiddleborder}rem)`;
const bottomMiddleborderBottom = `bottom:${3 - bottomMiddleborder}`;
parentElement
.querySelector('.bottom-middle')
.setAttribute(
'style',
`border-width:${bottomMiddle *
2}px;${bottomMiddleborderLeft};${bottomMiddleborderBottom}rem;`
);
}
if (bottomRight > 0) {
const bottomRightborder = (bottomRight * 2) / 10;
const bottomRightborderRight = `right:${6.5 - bottomRightborder}`;
const bottomRightborderBottom = `bottom:${3 - bottomRightborder}`;
parentElement
.querySelector('.bottom-right')
.setAttribute(
'style',
`border-width:${bottomRight *
2}px;${bottomRightborderRight}rem;${bottomRightborderBottom}rem;`
);
}
};
const setUpCarousels = () => {
const allTimeStatsCarouselElement = document.querySelector(
'[data-behavior="all-time-stats-carousel"]'
);
const seasonStatsCarouselElement = document.querySelector(
'[data-behavior="season-stats-carousel"]'
);
if (!allTimeStatsCarouselElement || !seasonStatsCarouselElement) {
return false;
}
return [
carousel({
carouselElement: allTimeStatsCarouselElement,
dots: '[data-behavior="all-time-stats-carousel"] + .carousel__pagination',
}),
carousel({
carouselElement: seasonStatsCarouselElement,
dots: '[data-behavior="season-stats-carousel"] + .carousel__pagination',
}),
];
};
export default () => {
const goalStats = document.querySelector('.goal-net-outer');
if (goalStats) {
renderGoalBorder({ parentElement: goalStats });
}
const statsTabs = document.querySelector('[data-behavior="team-stats"]');
const statCarousels = setUpCarousels();
const squadStatsTab = document.querySelector('#tab-squad-stats');
if (squadStatsTab) {
squadStatsTab.addEventListener('click', () => {
if (statsTabs) {
statCarousels.forEach(statCarousel => {
statCarousel.refresh(true);
});
}
});
}
if (statsTabs) {
tabs(statsTabs, () => {
statCarousels.forEach(statCarousel => {
statCarousel.refresh(true);
// console.log(statCarousel.dots);
statCarousel.dots
.querySelector('.glider-dot:first-child')
.classList.add('active');
});
});
}
};
/* stylelint-disable no-descending-specificity */
.team-stats {
margin-top: 2rem;
margin-bottom: 2rem;
&__tabs {
display: flex;
justify-content: center;
margin-bottom: 5rem;
}
&__title {
@include heading-l;
color: var(--brand-quaternary);
}
&__season-timeline {
text-transform: uppercase;
color: $color-interface-light;
margin-top: 1.5rem;
}
&__player-stats {
margin-top: 16rem;
}
&__tab-block {
display: grid;
grid-template-columns: 70% 30%;
align-items: self-end;
}
&__list {
display: flex;
margin-top: 0;
}
&__list .stat-item {
display: flex;
font-family: $heading-font;
font-size: 9.4rem;
line-height: 6.6rem;
color: var(--brand-primary);
flex-direction: column;
text-align: center;
position: relative;
flex: 0 100%;
}
&__list .stat-item p {
display: inline;
line-height: 9.4rem;
}
&__list .stat-item span,
&__list .stat-item sub {
@include text-s--narrow;
color: $blue;
text-transform: uppercase;
width: 8rem;
margin: 0 auto;
text-align: center;
position: relative;
top: 1.8rem;
}
&__list .stat-item sub.stat-unit {
position: relative;
color: $blue-accent2;
top: 0;
}
&__list .stat-item span i {
text-transform: initial;
}
&__info-block {
display: flex;
margin-top: 5rem;
margin-left: 3rem;
}
&__info-block ul {
width: 95%;
}
&__info-block ul li {
@include text-s;
text-transform: uppercase;
display: flex;
border-bottom: 1px solid $grey;
margin-top: 1rem;
padding-bottom: 1rem;
}
&__label-txt {
color: #5b6885;
display: flex;
margin-right: 0;
width: 40%;
}
&__info-txt {
color: #1d1d1b;
width: 60%;
text-align: right;
}
&__goals-details {
margin-top: 5.7rem;
display: flex;
}
&__progress-block {
width: 45%;
}
&__goal-post {
width: 55%;
}
&__goals-details .tit {
@include text-m;
color: #1d1d1b;
text-transform: uppercase;
font-weight: bold;
}
&__progress-block ul {
margin-top: 2.3rem;
}
&__progress-block ul li {
display: flex;
margin-bottom: 2rem;
}
&__progress-block ul li.goals-count {
margin-left: calc(25% + 2rem);
display: flex;
width: 75%;
}
&__progress-block ul li.goals-count span {
@include text-xs;
display: flex;
flex-grow: 1;
color: $blue;
}
&__progress-block .progress-label {
@include text-s--narrow;
color: #1d1d1b;
text-transform: uppercase;
width: 25%;
text-align: right;
}
&__progress-block .progress-bar {
width: 65%;
background: #eceef3;
border-radius: 2rem;
height: 0.3rem;
margin-left: 2rem;
position: relative;
}
&__progress-block .progress-bar span {
background: var(--brand-primary);
border-radius: 2rem;
height: 0.3rem;
position: absolute;
}
&__goal-post .goal-net-outer {
margin-top: 2.3rem;
background-image: url(./assets/images/goal-post.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 52.5rem;
height: 23rem;
}
&__goal-post .goal-nets {
background-image: url(./assets/images/goal-nets.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 52.8rem;
height: 21.2rem;
position: relative;
}
&__goal-post .goal-nets div {
display: inline-block;
position: absolute;
border-style: solid;
border-color: rgba(225, 38, 28, 0.3);
border-radius: 50%;
}
&__goal-post .goal-nets span {
@include text-xs;
width: 3rem;
height: 3rem;
background: #c30024;
display: inline-block;
border-radius: 50%;
color: $white;
text-align: center;
line-height: 3rem;
}
&__goal-post .goal-nets div.top-left {
top: 4rem;
left: 7.5rem;
}
&__goal-post .goal-nets div.top-middle {
top: 4rem;
left: 50%;
}
&__goal-post .goal-nets div.top-right {
top: 4rem;
right: 6.5rem;
}
&__goal-post .goal-nets div.bottom-left {
bottom: 3rem;
left: 7.5rem;
}
&__goal-post .goal-nets div.bottom-middle {
bottom: 3rem;
left: 50%;
}
&__goal-post .goal-nets div.bottom-right {
bottom: 3rem;
right: 6.5rem;
}
&__goal-post .goal-stats ul {
display: flex;
}
&__goal-post .goal-stats li {
display: flex;
font-family: $heading-font;
font-size: 6.4rem;
line-height: 4.5rem;
color: $blue-accent2;
flex-grow: 1;
flex-direction: column;
text-align: center;
}
&__goal-post .goal-stats li span {
@include text-s--narrow;
color: $blue;
margin-top: 2.4rem;
}
@media (max-width: $mq-medium) {
.tab-list {
& > [role='tab'] {
flex: 1 1 0;
}
}
&__title,
&__goals-details .tit,
&__season-timeline {
text-align: center;
margin-bottom: 2rem;
}
&__list {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
&__list.all-time {
width: 100%;
}
&__list .stat-item {
display: inherit;
justify-content: center;
margin-right: 0;
width: 100%;
margin-top: 2rem;
margin-bottom: 2rem;
flex: 0 50%;
box-sizing: border-box;
}
&__goals-details {
display: block;
}
&__progress-block {
width: 100%;
overflow: hidden;
margin-bottom: 5.8rem;
}
&__progress-block ul li {
display: block;
}
&__progress-block .progress-label {
text-align: center;
margin-bottom: 1.6rem;
}
&__progress-block .progress-label,
&__progress-block .progress-bar {
width: 100%;
margin-left: 0;
}
&__progress-block ul li.goals-count {
margin-left: 0;
width: 115%;
}
&__goal-post {
width: 100%;
}
&__goal-post .goal-net-outer {
width: 31.5rem;
height: 13.6rem;
margin: 0 auto;
}
&__goal-post .goal-nets {
width: 31.5rem;
height: 13.6rem;
}
&__goal-post .goal-nets span {
width: 1.9rem;
height: 1.9rem;
line-height: 2.1rem;
}
&__tab-block {
display: block;
}
&__info-block {
display: block;
width: 100%;
margin-left: 0;
}
&__info-block ul li {
display: block;
}
&__label-txt,
&__info-txt {
width: 100%;
}
}
.player-stats-list {
margin-top: $spacing-xxl;
}
@media (min-width: 501px) and (max-width: $mq-medium) {
&_list.all-time {
width: 100%;
}
&__list .stat-item {
display: inherit;
justify-content: center;
margin-right: 0;
width: 100%;
margin-top: 2rem;
margin-bottom: 2rem;
flex: 0 25%;
box-sizing: border-box;
}
&__goal-post .goal-net-outer {
width: 52.5rem;
height: 23rem;
margin: 0 auto;
}
&__goal-post .goal-nets {
width: 52.8rem;
height: 21.2rem;
}
&__goal-post .goal-nets span {
width: 3rem;
height: 3rem;
line-height: 3rem;
}
}
@media (min-width: $mq-large) {
&__tab-block {
grid-template-columns: 55% 45%;
}
}
@media screen and (min-width: $mq-medium) {
&__tabs {
margin: 0 7.5rem 5rem;
}
}
}
/* stylelint-enable no-descending-specificity */
<section class="team-stats" data-behavior="team-stats">
<div class="team-stats__content">
<div class="team-stats__tabs">
<div role="tablist" aria-label="Season stats" class="tab-list">
<a href="#panel-current-season" role="tab" aria-selected="true" aria-controls="panel-current-season"
id="tab-current-season" tabindex="0">
Current season
</a>
<a href="#panel-all-time" role="tab" aria-selected="false" aria-controls="panel-all-time"
id="tab-all-time" tabindex="0">
All time
</a>
</div>
</div>
<div id="panel-current-season" role="tabpanel" tabindex="0" aria-labelledby="tab-current-season"
data-tab-label="Current season">
<div>
<h2 class="team-stats__title">Current Season stats</h2>
<p class="text-s team-stats__season-timeline">Since 1st Augsut 2021 - Present</p>
<div class="team-stats__list">
{{#each currentTeamStats}}
<div class="stat-item">
<p>
{{statValue}}
{{#if unit}}<sub class="stat-unit">{{unit}}</sub>{{/if}}
</p>
<span>{{statName}}{{#if shortName}}<i>{{shortName}}</i>{{/if}}</span>
</div>
{{/each}}
</div>
<div class="team-stats__goals-details">
<div class="team-stats__progress-block">
<div class="tit">How the goals have been scored (%) <span></span></div>
<ul>
{{#each progress}}
<li>
<div class="progress-label">{{label}}</div>
<div class="progress-bar" aria-labelledby="progrss-bar"><span style="width:{{percentage}}%"><span class="visually-hidden">{{percentage}}%</span></div>
</li>
{{/each}}
<li class="goals-count">
<span>0</span>
<span>10</span>
<span>20</span>
<span>30</span>
<span>40</span>
<span>50</span>
</li>
</ul>
</div>
<div class="team-stats__goal-post">
<div class="tit">Shots on target</div>
<div class="goal-net-outer" data-behavior="team-stats-goal">
<div class="goal-nets">
{{#each goalTarget}}
<div class="{{position}}"><span>{{goalCount}}</span></div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
<div class="team-stats__player-stats">
<h2 class="team-stats__title">Player statistics</h2>
{{render '@player-stats-list' seasonStatsCarousel merge=true}}
</div>
</div>
<div id="panel-all-time" role="tabpanel" tabindex="0" aria-labelledby="tab-all-time" data-tab-label="All time">
<!-- all time stats -->
<div>
<h2 class="team-stats__title">All-time stats</h2>
<p class="text-s team-stats__season-timeline">Since 3rd December 1870 - present</p>
<div class="team-stats__tab-block">
<div class="team-stats__list all-time">
{{#each alltimeStats}}
<div class="stat-item">
<p>
{{statValue}}
{{#if unit}}<sub class="stat-unit">{{unit}}</sub>{{/if}}
</p>
<span>{{statName}}{{#if shortName}}<i>{{shortName}}</i>{{/if}}</span>
</div>
{{/each}}
</div>
<div class="team-stats__info-block">
<ul>
<li>
<div class="team-stats__label-txt">Best world cup finish</div>
<div class="team-stats__info-txt">Winner 1966</div>
</li>
<li>
<div class="team-stats__label-txt">Best EuroS finish</div>
<div class="team-stats__info-txt">Semi-finals 1966</div>
</li>
<li>
<div class="team-stats__label-txt">Biggest win</div>
<div class="team-stats__info-txt">0-13 Ireland v England 1930</div>
</li>
<li>
<div class="team-stats__label-txt">First game</div>
<div class="team-stats__info-txt">0-1 SCOTLAND V ENGLAND 03.12.1870</div>
</li>
</ul>
</div>
<div>
</div>
</div>
<div class="team-stats__player-stats">
<h2 class="team-stats__title">All-time Player statistics</h2>
{{render '@player-stats-list' allTimeStatsCarousel merge=true}}
</div>
</div>
</div>
</div>
</section>