<div class="page-wrapper efl-article-page">
<section class="efl-hero-banner with-image" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/hero-banner-4.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/hero-banner-3.jpg">
<img src="/assets/example-content/hero-banner-3.jpg" alt="">
</picture>
</div>
</section>
<div class="efl-page-content">
<div class="efl-page-content__tray">
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
<div class="efl-article-info">
<div class="article-header">
<div class="article-header__category" data-category="Get Started">Interview</div>
<h1><span class="jumpTohide">Gareth Southgate: I want the players to play with freedom</span></h1>
<p>Gareth Southgate tells Peter Glynn that he wants young english players to have the freedom to express themselves</p>
</div>
<div class="tag-cloud--container">
<div class="tag-cloud">
<div class="tag-cloud__item">
<span>Article</span>
</div>
<div class="tag-cloud__item">
<span>All ages</span>
</div>
<div class="tag-cloud__item">
<span>Guide</span>
</div>
<div class="tag-cloud__item">
<span>Physical</span>
</div>
<div class="tag-cloud__item">
<span>Psychological</span>
</div>
<div class="tag-cloud__item">
<span>Social</span>
</div>
</div>
</div>
<div class="article-author article-author--crest">
<div class="article-author__inner">
<h4>William Dalton</h4>
<p>10 min read - 10 Mar 2020</p>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
</div>
<div class="global-rte-content">
<p><span class="articleDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
<table>
<tbody>
<tr>
<td>
<p><strong>Objective</strong></p>
</td>
<td>
<p><strong>Space</strong></p>
</td>
<td>
<p><strong>Task</strong></p>
</td>
</tr>
<tr>
<td>
<p>Play forward</p>
</td>
<td>
<p>A narrow and long area, split into halves.</p>
</td>
<td>
<p><span data-contrast="none" class="TextRun SCXW222114590 BCX0" style="background-color: #ffffff; margin: 0px; padding: 0px; line-height: 17.2667px; color: #000000;"><span class="NormalTextRun SCXW222114590 BCX0" style="margin: 0px; padding: 0px;">Score as many goals as
possible. If you score, the number of one-touch passes made before the goal equates to the number of
points you’re awarded. For example, five one-touch passes equal five goals. </span></span></p>
</td>
</tr>
</table>
<p></p>
</div>
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
<div class="jump-to-section--container">
<section class="jump-to-section" data-behaviour="jump-to-section" aria-expanded="false" aria-controls="jump-to-section-minimize">
<div class="jump-to-section--header" tabindex="0" role="button" aria-label="On this page">
<h6 class="efl-heading-5">On this page</h6>
<div type="button" id="jump-to-section-minimize" class="jump-to-section-minimize" href="#" tabindex="-1">
<canvas id="jump-to-section-collapse-animation" width="25" height="48"></canvas>
</div>
</div>
<div class="jump-to-section__inner" data-share-collapse="false" data-bookmark-collapse="false">
<div class="jump-to-section__content">
<ul class="jump-to-section__links"></ul>
</div>
<div class="jump-to-section__actions">
<div class="jump-to-section__actions-group">
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
<hr>
<button class="jump-to-section-share-button" id="jump-to-section-share-button" aria-label="Share this page">Share</button>
</div>
<div class="jump-to-section__social-links">
<button class="efl-profile-left-popup__back" aria-label="go back to share"></button>
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
</div>
<div>
<a class="linkedin" href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="efl-survey" data-behavior="efl-survey" data-survey-page-id="0adce9dc54d9477c9b4dec27d2cb92a3" data-fanid="1112">
<div class="efl-survey__header">
<canvas id="efl-survey__header--icon" width="48" height="48"></canvas>
<button class="efl-survey__close" aria-label="close efl survey"></button>
</div>
<div class="efl-survey__questions">
<div class="efl-survey__questions--steps step1" data-question-id="5f85f9e1837e411b958e2bddb39c2d6a">
<div class="steps-no">1/2</div>
<h4>Is this session plan useful?</h4>
<a class="cta cta--primary survey-useful-yes" data-answer-id="44fb0a97693d47d38451c5a6e9c48b1e">Yes</a>
<a class="cta cta--primary survey-useful-no" data-answer-id="686ebe8efb0c45899f38b81fc3c4c060">No</a>
</div>
<div class="efl-survey__questions--steps step2 hidden" data-question-id="8a861add140447789f420198d5b5b231">
<div class="steps-no">2/2</div>
<h4>Have you / will you use this in practise?</h4>
<a class="cta cta--primary survey-practise-yes" data-answer-id="b50384d2a5e544d4beb632298199a572">Yes</a>
<a class="cta cta--primary survey-practise-no" data-answer-id="f26b0939d09e4e369357888710e2202f">No</a>
</div>
<div class="efl-survey__questions--steps step3 hidden" data-question-id="c8c250f4df23408695deb10a2cce5345">
<h4>Thanks! Your feedback help us to improve our content!</h4>
</div>
<div class="efl-survey__questions--steps step4 hidden" data-question-id="9cdf4b8f4882465cb85462f83c0dba0e">
<div class="steps-no">2/2</div>
<h4>Why not?</h4>
<a class="cta cta--primary survey-not-needed" data-answer-id="03aa8fb7d8274e5faf07c020a469de53">Not needed at the moment</a>
<a class="cta cta--primary survey-complicated" data-answer-id="e31a4944ae1d45698b1556c8128c4c4f">To complicated</a>
<a class="cta cta--primary survey-not-useful" data-answer-id="d8dbbbcd88474b1b809728f889f3a373">Dont find it useful</a>
<a class="cta cta--primary survey-other-reason" data-answer-id="11929ea39f1e4763af2934eeb1be5d35">Other reason</a>
</div>
<div class="efl-survey__questions--steps step5 hidden">
<h4>Would you like to tell us more?</h4>
<textarea maxlength="500" placeholder="Leave your feedback here..."></textarea>
<div class="survey-reason-note">
<p><span class="character-count">0</span>/500 characters</p>
<a class="clear-text" href="#">Clear Text</a>
</div>
<a class="cta cta--primary survey-submit-reason">SUBMIT</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
<section class="session-setup">
<div class="session-setup__inner">
<h2>Session setup</h2>
<p class="session-setup__subtitle">To set up this session make sure to have these tools and rules in places for your players</p>
</div>
<div class="session-setup__grid">
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=1 Ball loading="lazy">
<p>1 Ball</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=1 Ball loading="lazy">
<p>1 Ball</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=4 Cones loading="lazy">
<p>4 Cones</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=15 Mins loading="lazy">
<p>15 Mins</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=Half Pitch loading="lazy">
<p>Half Pitch</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=15 Mins loading="lazy">
<p>15 Mins</p>
</div>
</div>
</section>
<section class="running-the-session">
<div class="running-the-session__inner">
<h3>Running the Session</h3>
<p>Put this session into practice by following our <strong class="darkblue-text">4</strong> setup guidelines.</p>
</div>
<div class="running-the-session__section warm-up_section">
<p class="running-the-session__subheading running-the-session__warm-up">Warm Up</p>
</div>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">01</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">01</span></p>
<p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
</div>
</article>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">02</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">02</span></p>
<p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
</div>
</article>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">03</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">03</span></p>
<p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</article>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">04</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">04</span></p>
<p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</article>
<div class="running-the-session__section no-after">
<p class="running-the-session__subheading running-the-session__cool-down">Cool Down</p>
</div>
<footer>
<div class="article-author article-author--crest">
<div class="article-author__inner">
<h4>William Dalton</h4>
<p>10 min read - 10 Mar 2020</p>
</div>
</div>
<div class="share">
<div class="share__fallback" data-behavior="share-fallback">
<p>Share:</p>
<ul class="share__options">
<li>
<button data-behavior="copy-url" aria-label="Copy page link"><img src="/assets/images/share-copy-icon.svg" />
<span class="tooltip">Copy page link</span>
</button>
</li>
<li><a href="https://www.facebook.com/sharer.php?u=https://www.thefa.com/" aria-label="Facebook. Opens in a new tab" target="_blank" class="fb-button"><img src="/assets/images/share-facebook-icon.svg" alt="Facebook" /><span class="tooltip">Share on Facebook. Opens in a new tab</span></a></li>
<li><a href="https://twitter.com/intent/tweet?url=https://www.thefa.com/" aria-label="Twitter. Opens in a new tab" target="_blank" class="twitter-button"><img src="/assets/images/share-twitter-icon.svg" alt="Twitter" /><span class="tooltip">Share on Twitter. Opens in a new tab</span></a></li>
<li><a href="https://wa.me/?text=https://www.thefa.com/" aria-label="Whatsapp. Opens in new Tab" target="_blank" class="whatsapp-button"><img src="/assets/images/share-whatsapp-icon.svg" alt="WhatsApp" /><span class="tooltip">Share on Whatsapp</span></a></li>
</ul>
</div>
<button class="share__native" data-behavior="share-native"><span>Share:</span><img src="/assets/images/share-icon.svg" /></button>
</div>
</footer>
</section>
<section class="efl-large-video-player efl-white" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in youtube video player">
<img src="/assets/example-content/womens-hero.png" alt="" loading="lazy" />
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
</div>
<div class="efl-column-layout efl-column-layout--one full-width">
<section class="efl-large-video-player efl-blue" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="vimeo" data-video-id="516264036">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in vimeo video player">
<img src="/assets/example-content/womens-hero.png" alt="" loading="lazy" />
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
<section class="efl-large-video-player efl-blue" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in youtube video player">
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
</div>
<!-- minimum width column block -->
<div class="efl-column-layout efl-column-layout--one">
<!-- minimum width content -->
</div>
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
<div class="efl-comments-social">
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
</div>
<section class="efl-comments" data-behaviour="efl-comments">
<div class="efl-comments__title">Add a comment</div>
<div class="efl-comments__entry">
<textarea class="efl-comments__add-comment" maxlength="1000"></textarea>
<div class="efl-comments__add-comment--cta">
<p>Charcter count (<span class="character-count">0</span>/1000)</p>
<a class="cta cta--efl efl-comments-send" tabindex="0" aria-disabled="true">
<span>Save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</a>
</div>
</div>
<div class="efl-comments__list">
<div class="efl-comments-item-group reply">
<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="Tim Bamber" src="/assets/example-content/user-comment-1.jpg" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>Tim Bamber</p>
<span data-posted-time="2023-07-11T11:10:20Z"></span>
</div>
</div>
<div class="efl-comments-item__message">
Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don't have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">6</a>
<a class="efl-comments-item__message--reply">Reply</a>
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>
<div class="efl-comments-item-group__reply">
<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="Caroline Hill" src="/assets/example-content/user-comment-2.jpg" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>Caroline Hill</p>
<span data-posted-time="2023-07-11T11:10:20Z"></span>
</div>
</div>
<div class="efl-comments-item__message">
Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don't have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">6</a>
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>
<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="Paul Mady" src="/assets/example-content/user-comment-3.png" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>Paul Mady</p>
<span data-posted-time="2023-07-10T11:10:20Z"></span>
</div>
</div>
<div class="efl-comments-item__message">
Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don't have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">6</a>
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>
</div>
<a class="efl-comments-item-group__showmore hidden"></a>
</div>
<div class="efl-comments-item-group ">
<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="Jonny Mcacky" src="/assets/example-content/user-comment-4.jpg" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>Jonny Mcacky</p>
<span data-posted-time="2023-06-10T11:10:20Z"></span>
</div>
</div>
<div class="efl-comments-item__message">
Morning everyone, I was just wondering what you all use to do your session plans on? I've started using an app on my tablet but it's not great. Wondering if anyone has found any really good apps or websites?
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">2</a>
<a class="efl-comments-item__message--reply">Reply</a>
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>
<div class="efl-comments-item-group__reply">
</div>
<a class="efl-comments-item-group__showmore hidden"></a>
</div>
<div class="efl-comments-item-group ">
<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="Jeremy Fawcett" src="/assets/example-content/user-comment-5.jpg" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>Jeremy Fawcett</p>
<span data-posted-time="2023-05-10T11:10:20Z"></span>
</div>
</div>
<div class="efl-comments-item__message">
I've used The Coaching Manual, it's got so much content and a really good session builder
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">1</a>
<a class="efl-comments-item__message--reply">Reply</a>
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>
<div class="efl-comments-item-group__reply">
</div>
<a class="efl-comments-item-group__showmore hidden"></a>
</div>
</div>
<a class="cta cta--efl efl-comments-load-more" tabindex="0">
<span>Show more comments</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#011e41" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#011e41" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#011e41" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</a>
</section>
<div class="efl-content-warning hidden" data-behavior="efl-content-warning">
<h3>Welfare content warning</h3>
<p>
Some of the content in the welfare hub covers sensitive topics like domestic abuse, knife crime, etc.
</p>
<p>
We are aware that not all of our users are looking for this kind of content, so you can choose whether or not
you would like to see it on your welfare hub.
</p>
<p>
You can always change your decision at a later date.
</p>
<button class="cta cta--primary show-sensitive-content">Show sensitive content</button>
<button class="cta cta--primary cancel-sensitive-content">No, Take me back to the last page</button>
</div </div>
<div class="efl-column-layout__col">
<!-- right column content -->
</div>
</div>
</div>
</div>
No notes defined.
{
"video1": {
"videoId": "ufLSGCZEPrg",
"type": "youtube",
"theme": "efl-white"
},
"video2": {
"videoId": "516264036",
"type": "vimeo"
},
"video3": {
"videoId": "ufLSGCZEPrg",
"type": "youtube",
"no-thumbnail": true
}
}
<div class="page-wrapper efl-article-page">
{{render '@efl-hero-banner--article-with-image'}}
<div class="efl-page-content">
<div class="efl-page-content__tray">
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
{{render '@efl-article-info'}}
{{render '@global-rte--description'}}
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
{{render '@jump-to-section'}}
</div>
</div>
</div>
</div>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
{{render '@session-setup'}}
{{render '@running-the-session'}}
{{render '@efl-large-video-player' video1 merge="true"}}
</div>
<div class="efl-column-layout efl-column-layout--one full-width">
{{render '@efl-large-video-player' video2 merge="true"}}
{{render '@efl-large-video-player' video3 merge="true"}}
</div>
<!-- minimum width column block -->
<div class="efl-column-layout efl-column-layout--one">
<!-- minimum width content -->
</div>
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
{{render '@efl-comments-social'}}
{{render '@efl-comments'}}
{{render '@efl-content-warning'}}
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
</div>
</div>
</div>
</div>