<div class="container">
<div class="container__content">
<div data-behavior="tabs">
<div class="vertical-spacing-xxl center-content">
<div role="tablist" aria-label="Panel Tablist" class="tab-list youth-team-tabs">
<a href="#panel-fixtures" role="tab" aria-selected="true" aria-controls="panel-fixtures" id="tab-fixtures">
Fixtures
</a>
<a href="#panel-results" role="tab" aria-selected="false" aria-controls="panel-results" id="tab-results">
Results
</a>
<!-- <a href="#panel-standings" role="tab" aria-selected="false" aria-controls="panel-standings"
id="tab-standings">
Standings
</a> -->
<a href="#panel-squads" role="tab" aria-selected="false" aria-controls="panel-squads" id="tab-squads">
Squad
</a>
</div>
</div>
<div data-behaviour="filter-list" id="panel-fixtures" role="tabpanel" aria-labelledby="tab-fixtures">
<div class="filter-list__filters" data-filter-settings='[{"name": "competition"}]'></div>
<button class="ecalApi" aria-label="Download calendar button opens in a dialog window">Download calendar</button>
<div class="inline-sponsor">
Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
</div>
<section class="fixtures-list">
<div class="fixtures-list__year" data-filter='{ "filter": "season", "name": "2020/2021", "id": "2020/2021" }'>
<div class="fixtures-list__section" data-fixture-noresult="No matches scheduled">
<h3 class="fixtures-list__section-title">October 2020</h3>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "euros", "id": "2" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
</div>
<div class="fixtures-list__section" data-fixture-noresult="No matches scheduled">
<h3 class="fixtures-list__section-title">November 2020</h3>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "euros", "id": "2" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
</div>
</div>
<div class="fixtures-list__year" data-filter='{ "filter": "season", "name": "2019/2020", "id": "2019/2020" }'>
<div class="fixtures-list__section" data-fixture-noresult="No matches scheduled">
<h3 class="fixtures-list__section-title">June 2019</h3>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "euros", "id": "2" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
</div>
<div class="fixtures-list__section" data-fixture-noresult="No matches scheduled">
<h3 class="fixtures-list__section-title">July 2019</h3>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</p>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
</p>
<p class="fixture-detail__time">20:00</p>
<p class="fixture-detail__extra-info">
<img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
<img src="/assets/example-content/logo-itv.png" alt="ITV" />
</p>
</div>
<div class="fixture-card__ctas">
<a href="/" class="cta cta--secondary " name="match-preview">
<p>Match preview</p>
</a>
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
<p>Buy tickets</p>
</a>
</div>
</article>
</div>
</div>
</section>
</div>
<div data-behaviour="filter-list" id="panel-results" role="tabpanel" tabindex="0" aria-labelledby="tab-results">
<div class="filter-list__filters" data-filter-settings='[{"name": "competition"}, {"name": "season", "default": "2020/2021"}]'></div>
<div class="inline-sponsor">
Official sponsor <img src="/assets/example-content/sponsor-logo-deliveroo.svg" alt="Sponsor name" />
</div>
<section class="fixtures-list">
<div class="fixtures-list__year" data-filter='{ "filter": "season", "name": "2020/2021", "id": "2020/2021" }'>
<div class="fixtures-list__section" data-results-noresult="No matches played">
<h2 class="fixtures-list__section-title">October 2020</h2>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "euros", "id": "2" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">euros world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">1</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">4</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">1</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">1</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
</div>
<div class="fixtures-list__section" data-results-noresult="No matches played">
<h2 class="fixtures-list__section-title">November 2020</h2>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "euros", "id": "2" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">euros world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">10</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
</div>
</div>
<div class="fixtures-list__year" data-filter='{ "filter": "season", "name": "2019/2020", "id": "2019/2020" }'>
<div class="fixtures-list__section" data-results-noresult="No matches played">
<h2 class="fixtures-list__section-title">June 2019</h2>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "euros", "id": "2" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">euros world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">1</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">3</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">1</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
</div>
<div class="fixtures-list__section" data-results-noresult="No matches played">
<h2 class="fixtures-list__section-title">July 2019</h2>
<article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"results","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Denmark","matchvenue":"Khalifa International Stadium"}'>
<div class="fixture-card__fixture-info">
<h3 class="fixture-card__tournament">fifa world cup qatar 2022 Euro qualifier
<span class="fixture-card__round">Round of 16</span>
</h3>
<p class="fixture-card__location">Khalifa International Stadium</p>
<p>Thurs 20th Feb <span>20:00 GMT</span></p>
</div>
<div class="fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
<span class="fixture-detail__score">1</span>
</p>
<p class="fixture-detail__col">
<span class="fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />Denmark</span>
<span class="fixture-detail__score">2</span>
</p>
<p class="fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="fixture-card__ctas">
<a href="/components/preview/article-page" class="cta cta--secondary " name="match-report">
<p>Match report & highlights</p>
</a>
</div>
</article>
</div>
</div>
</section>
</div>
<!-- <div id="panel-standings" role="tabpanel" tabindex="0" aria-labelledby="tab-standings">
<section class="current-standings container" data-behavior="tabs">
<div class="container__content">
<div class="container__header">
<h2 class="heading-section ">UEFA Euros 2021</h2>
<div class="inline-sponsor">
Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
</div>
</div>
<div class="current-standings__info">
<p class="text-m current-standings__competition-title">UEFA Euros 2021</p>
<div role="tablist" aria-label="Current standings" class="tab-list">
<a href="#panel-tree" role="tab" aria-selected="false" aria-controls="panel-tree" id="tab-tree" tabindex="0">
Tree
</a>
<a href="#panel-table" role="tab" aria-selected="true" aria-controls="panel-table" id="tab-table" tabindex="0">
Table
</a>
</div>
</div>
<div id="panel-tree" role="tabpanel" aria-labelledby="tab-tree" data-tab-label="Tree">
<div class="tournament-standings">
<opta-widget widget="tournament_tree" competition="4" season="2017" template="centralised" show_crests="true"
show_third_place="true" show_goals_combined="false" date_format="lll" pre_match="false" show_competition_name="true"
competition_naming="full" team_naming="full" show_live="false" show_logo="false" show_title="false"
fixture_height="120" sport="football"></opta-widget>
</div>
</div>
<div id="panel-table" role="tabpanel" aria-labelledby="tab-table" data-tab-label="Table">
<div class="team-standings">
<div class="team-standings__container">
<opta-widget widget="standings" competition="4" season="2017" template="normal" live="false" navigation="tabs"
default_nav="1" side="combined" data_detail="full" show_key="true" show_crests="true"
points_in_first_column="true" lose_before_draw="false" show_form="6" competition_naming="full"
team_naming="full" date_format="dddd D MMMM YYYY" sorting="false" show_live="false"
show_relegation_average="false" show_logo="false" show_title="false" breakpoints="500" sport="football">
</opta-widget>
<div class="team-standings__match-details">
<div class="team-standings__match-stats">
<ul class="team-standings__match-report">
<li class="win">Win</li>
<li class="draw">Draw</li>
<li class="loss">Loss</li>
<li class="notplayed">Not played</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="current-standings__cta">
<a href="/" class="cta cta--primary " ><p>VIEW FIXTURES AND RESULTS</p></a>
</div>
</div>
</section>
<section class="current-standings container" data-behavior="tabs">
<div class="container__content">
<div class="container__header">
<h2 class="heading-section ">UEFA Nations League 2021</h2>
<div class="inline-sponsor">
Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
</div>
</div>
<div class="current-standings__info">
<p class="text-m current-standings__competition-title">UEFA Euros 2021</p>
<div role="tablist" aria-label="Current standings" class="tab-list">
<a href="#panel-tree" role="tab" aria-selected="false" aria-controls="panel-tree" id="tab-tree" tabindex="0">
Tree
</a>
<a href="#panel-table" role="tab" aria-selected="true" aria-controls="panel-table" id="tab-table" tabindex="0">
Table
</a>
</div>
</div>
<div id="panel-tree" role="tabpanel" aria-labelledby="tab-tree" data-tab-label="Tree">
<div class="tournament-standings">
<opta-widget widget="tournament_tree" competition="4" season="2017" template="centralised" show_crests="true"
show_third_place="true" show_goals_combined="false" date_format="lll" pre_match="false" show_competition_name="true"
competition_naming="full" team_naming="full" show_live="false" show_logo="false" show_title="false"
fixture_height="120" sport="football"></opta-widget>
</div>
</div>
<div id="panel-table" role="tabpanel" aria-labelledby="tab-table" data-tab-label="Table">
<div class="team-standings">
<div class="team-standings__container">
<opta-widget widget="standings" competition="4" season="2017" template="normal" live="false" navigation="tabs"
default_nav="1" side="combined" data_detail="full" show_key="true" show_crests="true"
points_in_first_column="true" lose_before_draw="false" show_form="6" competition_naming="full"
team_naming="full" date_format="dddd D MMMM YYYY" sorting="false" show_live="false"
show_relegation_average="false" show_logo="false" show_title="false" breakpoints="500" sport="football">
</opta-widget>
<div class="team-standings__match-details">
<div class="team-standings__match-stats">
<ul class="team-standings__match-report">
<li class="win">Win</li>
<li class="draw">Draw</li>
<li class="loss">Loss</li>
<li class="notplayed">Not played</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="current-standings__cta">
<a href="/" class="cta cta--primary " ><p>VIEW FIXTURES AND RESULTS</p></a>
</div>
</div>
</section>
</div> -->
<div id="panel-squads" role="tabpanel" tabindex="0" aria-labelledby="tab-squads">
<section class="youth-squad-list">
<div class="youth-squad-list__container">
<div class="squad-profiles-wrapper">
<div id="squad-block-goalkeepers" class="player-profile-youth-list" role="region" aria-label="Goalkeepers">
<h2 class="player-profile-youth-list__title">Goalkeepers</h2>
<div class="player-profile-youth-list__players">
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth.png" alt="" />
</div>
<a class="player-name">test
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
</div>
</div>
<div id="squad-block-defenders" class="player-profile-youth-list" role="region" aria-label="Defenders">
<h2 class="player-profile-youth-list__title">Defenders</h2>
<div class="player-profile-youth-list__players">
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
</div>
</div>
<div id="squad-block-midfielders" class="player-profile-youth-list" role="region" aria-label="Midfielders">
<h2 class="player-profile-youth-list__title">Midfielders</h2>
<div class="player-profile-youth-list__players">
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
</div>
</div>
<div id="squad-block-forwards" class="player-profile-youth-list" role="region" aria-label="Forwards">
<h2 class="player-profile-youth-list__title">Forwards</h2>
<div class="player-profile-youth-list__players">
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile-youth">
<div class="player-profile-youth__img-wrapper">
<img src="/assets/example-content/player-profile-youth-2.png" alt="" />
</div>
<a class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
No notes defined.
{
"results": [
{
"season": "2020/2021",
"months": [
{
"month": "October 2020",
"results": [
{
"competition": {
"name": "euros",
"id": "2"
},
"homeTeam": {
"score": 2
},
"awayTeam": {
"score": 2
}
},
{
"competition": {
"name": "fifa",
"id": "1"
},
"homeTeam": {
"score": 1
},
"awayTeam": {
"score": 2
}
},
{
"competition": {
"name": "fifa",
"id": "1"
},
"homeTeam": {
"score": 4
},
"awayTeam": {
"score": 2
}
},
{
"competition": {
"name": "fifa",
"id": "1"
},
"homeTeam": {
"score": 1
},
"awayTeam": {
"score": 1
}
}
]
},
{
"month": "November 2020",
"results": [
{
"competition": {
"name": "euros",
"id": "2"
},
"homeTeam": {
"score": 10
},
"awayTeam": {
"score": 2
}
}
]
}
]
},
{
"season": "2019/2020",
"months": [
{
"month": "June 2019",
"results": [
{
"competition": {
"name": "euros",
"id": "2"
},
"homeTeam": {
"score": 0
},
"awayTeam": {
"score": 0
}
},
{
"competition": {
"name": "fifa",
"id": "1"
},
"homeTeam": {
"score": 1
},
"awayTeam": {
"score": 3
}
},
{
"competition": {
"name": "fifa",
"id": "1"
},
"homeTeam": {
"score": 1
},
"awayTeam": {
"score": 2
}
}
]
},
{
"month": "July 2019",
"results": [
{
"competition": {
"name": "fifa",
"id": "1"
},
"homeTeam": {
"score": 1
},
"awayTeam": {
"score": 2
}
}
]
}
]
}
],
"euros": {
"heading": {
"copy": "UEFA Euros 2021"
}
},
"nations-league": {
"heading": {
"copy": "UEFA Nations League 2021"
}
}
}
class ResultsAnalytics {
constructor({ parentElement }) {
this.fixturesListElement = parentElement.querySelectorAll(
'.fixture-card__ctas a'
);
if (!this.fixturesListElement) {
return;
}
this.bindAnalyticClickEvent();
}
bindAnalyticClickEvent() {
this.fixturesListElement.forEach(button => {
button.addEventListener('click', event => {
event.preventDefault();
const buttonElement = event.target;
const getbuttonClass = buttonElement.getAttribute('class');
const getbuttonlabel = buttonElement.text;
const buttonlabel = getbuttonlabel.toLowerCase();
const buttonURL = buttonElement.getAttribute('href');
const analyticsdata = JSON.parse(
buttonElement.closest('.fixture-card').getAttribute('data-analytics')
);
let buttonName = '';
if (
![
'cta cta--primary',
'cta cta--primary ',
'cta cta--secondary',
'cta cta--secondary ',
].includes(getbuttonClass)
) {
return false;
}
if (
getbuttonClass === 'cta cta--primary' ||
getbuttonClass === 'cta cta--primary '
) {
buttonName = 'cta_primary_click';
} else if (
getbuttonClass === 'cta cta--secondary' ||
getbuttonClass === 'cta cta--secondary '
) {
buttonName = 'cta_secondary_click';
}
window.dataLayer.push({
// Below datalayer eventparametes is used for GA4 Implementation
event: 'All Events',
event_name: buttonName,
item_list_name: analyticsdata.matchcategory,
link_text: buttonlabel,
link_url: buttonURL,
team_name: analyticsdata.matchdetail,
category_type: analyticsdata.matchmode,
location: analyticsdata.matchvenue,
tournament: analyticsdata.matchtype,
// Below datalayer eventparametes is used for GA3 Implementation
eventCategory: analyticsdata.pagename,
eventAction: analyticsdata.matchtype,
eventLabel: buttonlabel,
eventparameter1: analyticsdata.matchmode,
eventparameter2: analyticsdata.matchdetail,
eventparameter3: analyticsdata.matchvenue,
});
// Remove datalayer eventparametes after every event is fired
/*
When an event is populated into the DataLayer,
the values are persistent across all tags firing afterwards,
so removal of the paramaters is important for duplication of values across tags.
*/
window.dataLayer.push({
event: 'Removal Tag',
event_name: undefined,
item_list_name: undefined,
link_text: undefined,
link_url: undefined,
team_name: undefined,
location: undefined,
tournament: undefined,
// Below datalayer eventparametes is used for GA3 Implementation
eventCategory: undefined,
eventAction: undefined,
eventLabel: undefined,
eventparameter1: undefined,
eventparameter2: undefined,
eventparameter3: undefined,
});
const windowLocation = buttonElement.getAttribute('target');
const redirectUrl = buttonElement.getAttribute('href');
window.open(redirectUrl, windowLocation || '_self');
return true;
});
});
}
}
export default parentElement => {
return new ResultsAnalytics({ parentElement });
};
/* eslint-disable prettier/prettier */
class FilterList {
constructor({ parentElement }) {
this.filtersContainer = parentElement.querySelector(
'.filter-list__filters'
);
this.sections = parentElement.querySelectorAll('.fixtures-list__section');
this.cards = parentElement.querySelectorAll('[data-filter]');
this.filterSettings = this.getFilterOptions();
const dropDowns = this.createCompetitionSelectors();
if (!dropDowns) {
return;
}
dropDowns.forEach(dropdown => {
this.filtersContainer.appendChild(dropdown);
});
}
handleChange({ currentValue, filter }) {
this.cards.forEach(card => {
const currentCardFilterData = JSON.parse(card.dataset.filter);
if(currentCardFilterData.filter !== filter) {
return
}
if (
currentValue === 'all' || currentCardFilterData.id === currentValue
) {
card.style.removeProperty('display');
} else {
card.style.setProperty('display', 'none');
}
});
// Update the sections - manage the 'no-results' class for any empty sections.
this.sections.forEach(section => {
const cards = section.querySelectorAll('.fixture-card');
if (Array.from(cards).some(card => card.style.display !== 'none')) {
section.classList.remove('fixtures-list__section--noresults');
} else {
section.classList.add('fixtures-list__section--noresults');
}
});
}
getFilterOptions() {
const filterBy = JSON.parse(this.filtersContainer.dataset.filterSettings);
const cardValues = Array.from(this.cards)
.map(card => JSON.parse(card.dataset.filter))
.flat();
if (!filterBy || !cardValues) {
return null;
}
// INFO: We are taking all the filter values from each card
// in the filter list and reducing it down to so that we have an object
// of filters with no repeated values.
return filterBy.map(filter => {
const values = cardValues.reduce(
(acc, cardValue) =>
filter.name === cardValue.filter &&
!acc.find(item => item.id === cardValue.id) ?
[...acc, { name: cardValue.name, id: cardValue.id }] :
[...acc],
[]
);
return { ...filter, current: filter.default, values };
});
}
createCompetitionSelectors() {
// Loop through each filter and create select elements for each item
return this.filterSettings.map(filter => {
const select = document.createElement('select');
const optionAll = document.createElement('option');
optionAll.value = 'all';
optionAll.text = `All ${filter.name}s`;
select.appendChild(optionAll);
filter.values.forEach(value => {
const option = document.createElement('option');
option.value = value.id;
option.text = value.name;
if (filter.default && filter.default === value.id) {
option.selected = true;
this.handleChange({
currentValue: value.id,
filter: filter.name,
})
}
select.appendChild(option);
});
select.addEventListener('change', event =>
this.handleChange({
currentValue: event.target.value,
filter: filter.name,
})
);
select.classList.add('dropdown');
return select;
});
}
}
export default parentElement => {
return new FilterList({ parentElement });
};
// NOTE: This dropdown isn't inside .fixtures-list as it may have reuse value.
// If this causes issues, it can be moved inside .fixtures-list
.dropdown {
@include text-xs;
-webkit-appearance: none;
appearance: none;
background: rgba(236, 238, 243, 0.2) url('./assets/images/vector.svg')
no-repeat right 2rem center;
border: none;
border-bottom: 1px solid $color-interface-light;
text-transform: uppercase;
padding: 1em 3.5em 1em 1em;
}
.ecalApi {
@include text-s;
-webkit-appearance: none;
appearance: none;
background: transparent url('./assets/images/icon-calendar.svg') no-repeat
right $spacing-s center;
background-size: 2rem 2rem;
border: 1px solid;
color: $black;
padding: 0.5rem;
padding-right: calc(2rem + (#{$spacing-s} * 2));
text-transform: uppercase;
}
// RESULTS LIST
// Repeatable .fixture-card items, with headings and inof
.fixtures-list {
position: relative;
&__section {
display: grid;
row-gap: $spacing-m;
margin-bottom: $spacing-m;
position: relative;
}
&__section-title {
@include text-l;
align-items: baseline;
color: var(--brand-primary);
justify-content: space-between;
text-transform: uppercase;
&::after {
content: '';
display: block;
border-bottom: 1px solid $color-borders;
flex-grow: 1;
}
}
&__section--noresults {
&::after {
@include text-xs;
content: 'No matches played';
color: $color-interface-light;
display: block;
text-transform: uppercase;
position: absolute;
top: 0.5rem;
right: 0;
}
}
&__section--noresults &__section-title {
color: $color-interface-light;
}
@media screen and (min-width: $mq-small) {
&__section-title {
display: flex;
&::after {
margin-left: $spacing-l;
max-width: calc(100% - 16rem);
}
}
&__info {
top: 1rem;
}
}
@media screen and (min-width: $mq-medium) {
.results-december-gap {
row-gap: 0;
}
}
}
// LAYOUT OF FULL LIST
// including filters and sponsor
[data-behaviour='filter-list']:not([hidden]) {
column-gap: $spacing-l;
display: grid;
row-gap: $spacing-xl;
.filter-list__filters {
display: flex;
justify-content: space-between;
.dropdown {
flex-grow: 1;
+ .dropdown {
margin-left: $spacing-l;
}
}
}
.inline-sponsor {
justify-content: center;
}
@media screen and (min-width: $mq-small) {
grid-template-columns: auto auto 1fr;
.fixtures-list {
grid-column: 1 / -1;
}
.filter-list__filters {
justify-content: flex-start;
.dropdown {
flex-grow: 0;
padding-right: 4.5rem;
}
}
.inline-sponsor {
justify-content: flex-end;
grid-column: 3;
}
}
}
#panel-fixtures {
.fixtures-list__section--noresults::after {
content: attr(data-fixture-noresult);
}
}
#panel-results {
.filter-list__filters {
@media screen and (max-width: $mq-small) {
.dropdown:first-child {
max-width: 16rem;
}
}
}
.fixtures-list__section--noresults::after {
content: attr(data-results-noresult);
}
}
<div class="container">
<div class="container__content">
<div data-behavior="tabs">
<div class="vertical-spacing-xxl center-content">
<div role="tablist" aria-label="Panel Tablist" class="tab-list youth-team-tabs">
<a href="#panel-fixtures" role="tab" aria-selected="true" aria-controls="panel-fixtures" id="tab-fixtures">
Fixtures
</a>
<a href="#panel-results" role="tab" aria-selected="false" aria-controls="panel-results" id="tab-results">
Results
</a>
<!-- <a href="#panel-standings" role="tab" aria-selected="false" aria-controls="panel-standings"
id="tab-standings">
Standings
</a> -->
<a href="#panel-squads" role="tab" aria-selected="false" aria-controls="panel-squads"
id="tab-squads">
Squad
</a>
</div>
</div>
<div data-behaviour="filter-list" id="panel-fixtures" role="tabpanel" aria-labelledby="tab-fixtures">
<div class="filter-list__filters" data-filter-settings='[{"name": "competition"}]'></div>
<button class="ecalApi" aria-label="Download calendar button opens in a dialog window">Download calendar</button>
{{render '@inline-sponsor'}}
<section class="fixtures-list">
{{#each results}}
<div class="fixtures-list__year"
data-filter='{ "filter": "season", "name": "{{this.season}}", "id": "{{this.season}}" }'>
{{#each this.months}}
<div class="fixtures-list__section" data-fixture-noresult="No matches scheduled">
<h3 class="fixtures-list__section-title">{{this.month}}</h3>
{{#each this.results}}
{{ render '@fixture-card' this merge="true" }}
{{/each}}
</div>
{{/each}}
</div>
{{/each}}
</section>
</div>
<div data-behaviour="filter-list" id="panel-results" role="tabpanel" tabindex="0" aria-labelledby="tab-results">
<div class="filter-list__filters"
data-filter-settings='[{"name": "competition"}, {"name": "season", "default": "2020/2021"}]'></div>
{{render '@inline-sponsor--deliveroo-example'}}
<section class="fixtures-list">
{{#each results}}
<div class="fixtures-list__year"
data-filter='{ "filter": "season", "name": "{{this.season}}", "id": "{{this.season}}" }'>
{{#each this.months}}
<div class="fixtures-list__section" data-results-noresult="No matches played">
<h2 class="fixtures-list__section-title">{{this.month}}</h2>
{{#each this.results}}
{{ render '@fixture-card--result' this merge="true" }}
{{/each}}
</div>
{{/each}}
</div>
{{/each}}
</section>
</div>
<!-- <div id="panel-standings" role="tabpanel" tabindex="0" aria-labelledby="tab-standings">
{{render '@current-standings' euros merge=true}}
{{render '@current-standings' nations-league merge=true}}
</div> -->
<div id="panel-squads" role="tabpanel" tabindex="0" aria-labelledby="tab-squads">
{{render '@youth-squad-list'}}
</div>
</div>
</div>
</div>