<div class="efl-profile-page">
<div class="efl-learner-profile-onboarding-journey hidden" role="dialog" aria-modal="true" data-behavior="efl-learner-profile-onboarding-journey" data-onboarding-journey="false">
<div class="efl-learner-profile-onboarding-journey__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/learner-profile-onboarding-journey-1.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/learner-profile-onboarding-journey-2.jpg">
<img class="bg-image" src="/assets/example-content/learner-profile-onboarding-journey-2.jpg" alt="" loading="lazy">
</picture>
<div class="efl-learner-profile-onboarding-journey__overlay first-step">
<div class="efl-learner-profile-onboarding-journey__overlay--wrapper">
<h4 class="welcome">Welcome</h4>
<h2 class="name">Anthony Kelly</h2>
<!-- <img src="/assets/example-content/onboarding-journey-ball.svg"/> -->
<canvas id="onboarding-journey-football-animation" width="400" height="135"></canvas>
<div class="loading-bar"><span></span></div>
<p data-text-default="Loading your Account <br> Please bare with us. Won’t take long." data-lost-connection="Lost connection">
Loading your Account <br> Please bare with us. Won’t take long.
</p>
<a href="/" class="cta cta--primary tryAgain hidden" tabindex="0">Try again</a>
</div>
</div>
<div class="efl-learner-profile-onboarding-journey__overlay carousel-step hidden">
<div data-glide-el="track">
<div class="glide__slides">
<div class="carousel-skip-step">
<div class="step-info">
<h2>Your Learner Bio</h2>
<p>Small description to give context of this particular area of the account.</p>
<button class="cta cta--primary nextStep" aria-label="Your Learner Bio next">Next</button>
<button class="skip-journey" aria-label="Your Learner Bio skip">Skip</button>
</div>
<div class="carousel-skip-step__player-wrap">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/onboading-journey-bio-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/onboading-journey-bio-desk.png">
<img src="/assets/example-content/onboading-journey-bio-desk.png" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="carousel-skip-step">
<div class="step-info">
<h2>Your FA Learnings</h2>
<p>Small description to give context of this particular area of the account.</p>
<button class="cta cta--primary nextStep" aria-label="Your FA Learnings next">Next</button>
<button class="skip-journey" aria-label="Your FA Learnings skip">Skip</button>
</div>
<div class="carousel-skip-step__player-wrap">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/onboading-journey-mylearning-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/onboading-journey-mylearning-desk.png">
<img src="/assets/example-content/onboading-journey-mylearning-desk.png" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="carousel-skip-step">
<div class="step-info">
<h2>Your FA Bookmarks</h2>
<p>Small description to give context of this particular area of the account.</p>
<button class="cta cta--primary nextStep" aria-label="Your FA Bookmarks next">Next</button>
<button class="skip-journey" aria-label="Your FA Bookmarks skip">Skip</button>
</div>
<div class="carousel-skip-step__player-wrap">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/onboading-journey-bookmark-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/onboading-journey-bookmark-desk.png">
<img src="/assets/example-content/onboading-journey-bookmark-desk.png" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="carousel-skip-step">
<div class="step-info">
<h2>Your Bundles</h2>
<p>Small description to give context of this particular area of the account.</p>
<button class="cta cta--primary nextStep" aria-label="Your Bundles next">Next</button>
<button class="skip-journey" aria-label="Your Bundles skip">Skip</button>
</div>
<div class="carousel-skip-step__player-wrap">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/onboading-journey-bundle-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/onboading-journey-bundle-desk.png">
<img src="/assets/example-content/onboading-journey-bundle-desk.png" alt="" loading="lazy">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-tab--container">
<ul role="tablist" class="efl-learner-profile-tab">
<li>
<a id=bio role="tab" tabindex="0" aria-selected="true">
Bio
</a>
</li>
<li>
<a id=my-learning role="tab" tabindex="0" aria-selected="false">
My Learning
</a>
</li>
<li>
<a id=bookmarks role="tab" tabindex="0" aria-selected="false">
Bookmarks
</a>
</li>
<li>
<a id=bundles role="tab" tabindex="0" aria-selected="false">
Bundles
</a>
</li>
<li>
<a id=personalisation role="tab" tabindex="0" aria-selected="false">
Personalisation
</a>
</li>
</ul>
</div>
<div class="efl-learner-profile__section efl-learner-profile-age-check hidden">
<div class="steps">
<div class="efl-learner-profile__section--header">
<h4 class="exist">You cannot access the Bio tab</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">Sorry! Bio's aren't available for under 18s. We've redirected you to My Learning.</div>
<a href="#" class="cta cta--primary profile-age-check" tabindex="0">Ok</a>
</div>
</div>
<div data-page="bio" aria-hidden="false" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<!-- EFL Profile layout column block -->
<section class="efl-profile-hero-banner" data-behavior="efl-profile-hero-banner" data-learner-profile-youth="false">
<div class="efl-profile-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/learner-profile-hero-bg-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/learner-profile-hero-bg-desk.png">
<img src="/assets/example-content/learner-profile-hero-bg-desk.png" alt="">
</picture>
<div class="efl-profile-hero-banner__overlay">
<div class="efl-profile-hero-banner__content">
<div class="efl-profile-hero-banner__content--profile">
<div class="efl-profile-hero-banner__content--profile__picture">
<div class="efl-profile-hero-banner__content--profile__picture--dp" data-fanid="62023850" data-individual-profile-photoid="1939807" data-public-profile-fanid="1222" data-experience-editor="false">
<button class="change-profile-pic" aria-label="change profile picture"></button>
<img src="" class="hidden">
</div>
<button class="edit-pic hidden" aria-label="edit profile picture"></button>
</div>
<div class="efl-profile-hero-banner__content--profile__name">
<h1>Chloe Kelly</h1>
</div>
<div class="efl-profile__select" role="combobox">
<div class="efl-profile__select--label" rel="button" role="combobox" tabindex="0" aria-expanded="false">
<span class="filter">Football Coach</span>
</div>
<div aria-expanded="false" role="list" class="efl-profile__select--list">
<ul>
<li tabindex="0" data-value="Football Coach">Football Coach</li>
<li tabindex="0" data-value="Futsal Coach">Futsal Coach</li>
<li tabindex="0" data-value="Goalkeeping Coach">Goalkeeping Coach</li>
<li tabindex="0" data-value="Safeguarding Officer">Safeguarding Officer</li>
<li tabindex="0" data-value="Volunteer">Volunteer</li>
</ul>
</div>
<select class="efl-profile__select--select">
<option value="Football Coach">Football Coach</option>
<option value="Futsal Coach">Futsal Coach</option>
<option value="Goalkeeping Coach">Goalkeeping Coach</option>
<option value="Safeguarding Officer">Safeguarding Officer</option>
<option value="Volunteer">Volunteer</option>
</select>
</div>
<div class="efl-profile-hero-banner__content--profile__visible">
<span>Your bio is public.</span>
<a class="learn-more" aria-label="learn more" tabindex="0" aria-describedby="efl-profile-setting-left-popup">Learn more</a>
</div>
</div>
<div class="efl-profile-hero-banner__content--settings">
<button class="profile-setting" aria-label="profile setting" aria-describedby="efl-profile-setting-left-popup"></button>
</div>
</div>
</div>
</div>
<div class="efl-profile-left-popup" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close add a profile picture popup window"></button>
<div class="efl-learner-profile-add-photo" data-behavior="efl-learner-profile-add-photo">
<h3>Add a profile picture</h3>
<div class="">
<div id="cropme">
<p class="instructions">
Position your face in the clear circle below
</p>
<img alt="myimage" id="myImage" />
<button class="crop-button" aria-label="crop photo" id="crop-image"></button>
</div>
<div data-camera="false" id="preview">
<p class="instructions retake">
Happy? Hit 'use this photo'. To try again, select 'retake photo'.
</p>
<p class="instructions another-photo">
Happy? Hit 'use this photo'. To try again, select 'Upload Another Photo'.
</p>
<img alt="preview image" id="preview-image" />
<button class="cta cta--efl " id="use-photo" aria-label="use this photo!">
<span>Use This Photo!</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--secondary " id="retake-photo" aria-label="retake photo">Retake Photo</button>
<div class="efl-profile-upload-another-photo">
<label for="efl-profile-upload-another-photo">Upload Another Photo</label>
<input type="file" id="efl-profile-upload-another-photo" role="button" aria-label="upload another photo">
</div>
<div class="upload-error hidden">
<div class="upload-error--alert" role="dialog" aria-modal="true" aria-atomic="true">
<h5>Error</h5>
<p></p>
<button class="cta cta--efl " id="upload-error-alert" aria-label="ok Upload error">Ok</button>
</div>
</div>
</div>
<div id="camera">
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<button class="cta cta--efl efl-profile-capture-photo" id="efl-profile-capture-photo" aria-label="capture photo">Capture photo</button>
<canvas id="cropme-canvas"></canvas>
</div>
<div id="default" class="active">
<p class="instructions">
Select from the options below.
</p>
<button class="cta cta--efl efl-profile-take-photo" id="efl-profile-take-photo" aria-label="take photo">Take photo</button>
<div class="efl-profile-add-photo">
<label for="efl-profile-upload-photo">Upload Photo</label>
<input type="file" id="efl-profile-upload-photo" tabindex="0" role="button" aria-label="upload photo">
</div>
</div>
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="please-take-a-new-photo" aria-label="please take a new photo">Please Take a New Photo</button>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropme@latest/dist/cropme.min.css">
</div>
<div class="efl-profile-left-popup" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup" id="efl-profile-setting-left-popup">
<div class="efl-learner-profile__section--header">
<h3>Bio settings</h3>
</div>
<button class="efl-profile-left-popup__close" aria-label="close profile settings popup window"></button>
<div class="efl-profile-left-popup--inner">
<div class="efl-learner-profile-settings" data-behavior="efl-learner-profile-settings">
<section>
<h4 class="lock">Privacy</h4>
<div class="efl-learner-profile-settings--inner">
<p data-privacy-on-text="Your profile is set to public and can be viewed by others." data-privacy-off-text="Your profile is set to private and can't be viewed by others.">Your profile is set to private and can't be viewed by others.</p>
<label class="switch" for="learner-profile-privacy-check">
<input tabindex="0" type="checkbox" id="learner-profile-privacy-check" aria-label="privacy">
<span class="slider round"></span>
</label>
</div>
</section>
<section>
<h4 class="hand">Availability</h4>
<div class="efl-learner-profile-settings--inner">
<p data-availability-on-text="Your profile is marked as available. This means clubs can contact you about potential roles." data-availability-off-text="Your profile is marked as unavailable. This means clubs can't contact you about potential roles.">Your profile is currently marked as unavailable. Clubs cannot contact you to ask about your availability for volunteering roles</p>
<label class="switch" for="learner-profile-availability-check">
<input tabindex="0" type="checkbox" id="learner-profile-availability-check" aria-label="availability">
<span class="slider round"></span>
</label>
</div>
<div class="efl-learner-profile-settings__select hidden" role="combobox">
<div class="efl-learner-profile-settings__select--label" rel="button" role="combobox" tabindex="0" aria-expanded="false">
<span class="filter">Football Coach</span>
</div>
<div aria-expanded="false" role="list" class="efl-learner-profile-settings__select--list">
<ul>
<li tabindex="0" data-value="Football Coach">Football Coach</li>
<li tabindex="0" data-value="Futsal Coach">Futsal Coach</li>
<li tabindex="0" data-value="Goalkeeping Coach">Goalkeeping Coach</li>
<li tabindex="0" data-value="Safeguarding Officer">Safeguarding Officer</li>
<li tabindex="0" data-value="Volunteer">Volunteer</li>
</ul>
</div>
<select class="efl-learner-profile-settings__select--select">
<option value="Football Coach">Football Coach</option>
<option value="Futsal Coach">Futsal Coach</option>
<option value="Goalkeeping Coach">Goalkeeping Coach</option>
<option value="Safeguarding Officer">Safeguarding Officer</option>
<option value="Volunteer">Volunteer</option>
</select>
</div>
</section>
<section>
<h4 class="location">Location</h4>
<div class="efl-learner-profile-settings--inner">
<p data-location-on-text="Your profile location is switched on. We'll never share your precise location." data-location-off-text="Your profile location is switched off. ">Your profile location is switched off. </p>
<label class="switch" for="learner-profile-location">
<input tabindex="0" type="checkbox" id="learner-profile-location" aria-label="location">
<span class="slider round"></span>
</label>
</div>
<div class="efl-learner-profile-settings--enter-location hidden">
<div id="bioSettingLocationContainer">
<input type="text" name="location" placeholder="Enter-Location" class="bioSettingLocation" id="bioSettingLocation" autocomplete="off">
</input>
</div>
<input type="hidden" class="learner-profile-place" value="" />
</div>
</section>
<section>
<h4 class="share">Share my profile</h4>
<p>Copy your profile URL to share with others</p>
<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 to share my profile" 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 class="linkedin" 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>
</section>
</div>
</div>
</div>
</section>
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
<section aria-expanded="true" class="efl-learner-profile__section" data-behavior="efl-learner-profile-about-me">
<div class="efl-learner-profile__section--header">
<h3 class="about-me">About Me</h3>
<button aria-label="edit about me" class="efl-learner-profile__section--edit"></button>
</div>
<p class="read-only-section">Write a short introduction about yourself, relevant experience and a touch of your personality</p>
<div class="efl-profile-left-popup about-me" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close about me popup window"></button>
<div class="efl-learner-profile__section--header">
<h3 class="about-me">About Me</h3>
</div>
<div class="efl-profile-left-popup--inner">
<p>Keen on coaching or raring to ref? It's time to introduce yourself.</p>
<textarea id="about-me" maxlength="500" placeholder="Let people know who you are and why you're here..."></textarea>
<div class="options">
<p><span class="character-count">0</span>/500 characters</p>
<div class="clear-text" role="button" aria-label="clear text about me" tabindex="0">Clear Text</div>
</div>
<button class="cta cta--efl " id="about-me-save-button" aria-label="save about me" 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>
</button>
</div>
<div class="efl-profile-left-popup__toast-notification" tabindex="-1" aria-label=""><canvas id="rive" width="36" height="36"></canvas>About Me Saved</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true" aria-live="polite" data-unsaved-changes-header="You have unsaved changes" data-unsaved-changes-copy="Continue editing to save your changes." data-fill-all-fields-header="you must fill in all fields" data-fill-all-fields-copy="Continue editing to save your changes." data-make-bio-public-header="Time to make your bio public?" data-make-bio-public-copy="Publishing your bio allows others to view your information. This is a great way to connect with clubs, coaches and the football community." data-innapropriate-content-header="Innapropriate content" data-innapropriate-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-iwf-error-content-header="Error" data-iwf-error-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="about-me-continue-editing-button" aria-label="Continue Editing">Continue Editing</button>
<button class="cta cta--secondary " id="about-me-lose-my-changes-button" aria-label="Lose My Changes">Lose My Changes</button>
<button class="cta cta--efl " id="about-me-make-bio-public-button" aria-label="Make Bio Public">Make Bio Public</button>
<button class="cta cta--secondary " id="about-me-keep-bio-private-button" aria-label="Keep Bio Private">Keep Bio Private</button>
<button class="cta cta--efl " id="efl-learner-profile-edit-about-me-button" aria-label="Edit About Me">Edit About Me</button>
<button class="cta cta--efl " id="efl-learner-profile-error-about-me-button" aria-label="Try again">Try again</button>
</div>
</div>
</section>
<section class="efl-learner-profile__section my-qualifications" data-behavior="efl-learner-profile-my-qualifications">
<div class="efl-learner-profile__section--header">
<h3 class="my-qualifications">My qualifications</h3>
<button aria-label="edit my qualification" class="efl-learner-profile__section--edit"></button>
</div>
<h4 class="efl-learner-profile__section--subheading">England Football Learning Qualifications</h4>
<p class="paragraph my-placeholder-text">Our records show that you haven't completed any qualification with England Football Learning, the FA or Bootroom </br>
Not to panic though! If you believe this is incorrect, please write to us <a href="https://help.thefa.com/support/home" target="_blank" aria-label="write to us link open in new window">here</a> </p>
<div class="efl-learner-profile__section__qualification--container">
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-0">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-1">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-2">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a href="#" class="efl-learner-profile__section__qualification myqualification" id="efl-learner-profile-qualification-3">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more my qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less my qualifications">Show Less</button>
</div>
<h4 class="efl-learner-profile__section--subheading">Other Qualifications</h4>
<p class="paragraph other-placeholder-text">Courses completed outside of England Football Learning, the FA or
Bootroom need to be added manually and cannot be verified</p>
<div class="efl-learner-profile__section__qualification--container other" id="efl-learner-profile-other-qualification-page-list">
<div class="efl-learner-profile-other-qualification-page-list--item">
<div class="efl-learner-profile__section__qualification other" data-qualification-detail='{
"name": "Grade one name of other qualification 1" ,
"description" : "Bit of descriptive text about their experience. Limited to 100 characters",
"dateCompleted" : "2023/02/25"}' data-edit-id="0">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Aug 2014</div>
<h5>Grade one name of other qualification 1</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
</div>
<div class="efl-learner-profile__section__qualification other" data-qualification-detail='{
"name": "Grade one name of other qualification 2" ,
"description" : "Bit of descriptive text about their experience. Limited to 100 characters",
"dateCompleted" : "2013/07/25"}' data-edit-id="1">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jul 2013</div>
<h5>Grade one name of other qualification 2</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
</div>
<div class="efl-learner-profile__section__qualification other" data-qualification-detail='{
"name": "Grade One name of other qualification 3" ,
"description" : "Bit of descriptive text about their experience. Limited to 100 characters",
"dateCompleted" : "2012/06/25"}' data-edit-id="2">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2012</div>
<h5>Grade One name of other qualification 3</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
</div>
</div>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more other qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less other qualifications">Show Less</button>
</div>
<div class="efl-profile-left-popup my-qualifications" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close my qualifications popup window"></button>
<div class="efl-learner-profile__section--header">
<h3 class="my-qualifications">My Qualifications</h3>
</div>
<div id="my-qualifications-editable" class="efl-profile-left-popup--inner">
<h4 class="efl-learner-profile__section--subheading"><strong>England Football Learning qualifications</strong></h4>
<p class="paragraph">Any courses that you have completed via England Football Learning, FA or Bootrom will appear automatically</p>
<div class="efl-learner-profile__section__qualification--container">
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<a class="efl-learner-profile__section__qualification myqualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src=../../assets/example-content/efl-qualification.svg alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2020</div>
<h4>Introduction to Coaching Disabled Football</h4>
</div>
</a>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more my qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less my qualifications">Show Less</button>
<p class="missing-something">Missing something? <a href="">Let us know</a>.</p>
</div>
<h4 class="efl-learner-profile__section--subheading"><strong>Other qualifications</strong></h4>
<p class="paragraph other-placeholder-text">Courses completed outside of England Football Learning, the FA or
Bootroom need to be added manually and cannot be verified</p>
<div class="efl-learner-profile__section__qualification--container other" id="efl-learner-profile-other-qualification-popup-list">
<div class="efl-learner-profile-other-qualification-popup-list--item">
<div class="efl-learner-profile__section__qualification other" data-end-date="2023/02/25" data-edit-id="0">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Aug 2014</div>
<h5>Grade one name of other qualification 1</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
<button aria-label="edit Grade one name of other qualification 1 qualification" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__qualification other" data-end-date="2013/07/25" data-edit-id="1">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jul 2013</div>
<h5>Grade one name of other qualification 2</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
<button aria-label="edit Grade one name of other qualification 2 qualification" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__qualification other" data-end-date="2012/06/25" data-edit-id="2">
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Jun 2012</div>
<h5>Grade One name of other qualification 3</h5>
<p>Bit of descriptive text about their experience. Limited to 100 characters</p>
</div>
<button aria-label="edit Grade One name of other qualification 3 qualification" class="efl-learner-profile__section__qualification--edit"></button>
</div>
</div>
<button class="cta cta--secondary" id="show-more-button" aria-label="show more other qualifications">Show More</button>
<button class="cta cta--secondary" id="show-less-button" aria-label="show less other qualifications">Show Less</button>
</div>
<button class="cta cta--secondary " id="add-qualification-button" aria-label="add a qualification">Add a Qualification</button>
</div>
<div id="my-qualifications-form" class="efl-profile-left-popup--inner hidden" data-unsaved="false" data-public="false">
<button class="efl-profile-left-popup__back" aria-label="back to my qualifications">Back</button>
<h4 class="efl-learner-profile__section--subheading" data-form-title-add="Add Qualifications" data-form-title-edit="Edit Qualifications"><strong>Add Qualifications</strong></h4>
<form>
<label for="my-qualifications-form--name">Name of the Qualification</label>
<input type="text" name="qualification name" autocomplete="off" id="my-qualifications-form--name" />
<p><span class="character-count__name">0</span>/100 characters</p>
<label for="my-qualifications-form--date">Month that the qualification was Completed</label>
<div class="my-qualifications-form--date-container">
<input autocomplete="off" type="text" name="month of qualification" id="my-qualifications-form--date" />
</div>
<label for="my-qualifications-form--desc">Description of what the course involved</label>
<textarea rows="3" cols="30" maxlength="500" name="description of course" id="my-qualifications-form--desc"></textarea>
<p><span class="character-count__textarea">0</span>/500 characters</p>
</form>
<button class="cta cta--efl " id="my-qualifications-save-form-button" aria-label="save changes qualification" 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>
</button>
<button class="cta cta--secondary" id="delete-qualification-button" aria-label="delete qualification">Delete Qualification</button>
</div>
<div class="efl-profile-left-popup__toast-notification" data-toast-update-text="Qualification Saved" data-toast-delete-text="Qualification Deleted" tabindex="-1" aria-label="">
<canvas id="rive" width="36" height="36"></canvas>
Qualification Saved
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true" aria-live="polite" data-unsaved-changes-header="You have unsaved changes" data-unsaved-changes-copy="Continue editing to save your changes." data-fill-all-fields-header="you must fill in all fields" data-fill-all-fields-copy="Continue editing to save your changes." data-make-bio-public-header="Time to make your bio public?" data-make-bio-public-copy="Publishing your bio allows others to view your information. This is a great way to connect with clubs, coaches and the football community." data-innapropriate-content-header="Innapropriate content" data-innapropriate-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-iwf-error-content-header="Error" data-iwf-error-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-invalid-data-content-header="Error" data-invalid-data-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="my-qualifications-continue-editing-button" aria-label="Continue Editing">Continue Editing</button>
<button class="cta cta--secondary " id="my-qualifications-lose-my-changes-button" aria-label="Lose My Changes">Lose My Changes</button>
<button class="cta cta--efl " id="my-qualifications-make-bio-public-button" aria-label="Make Bio Public">Make Bio Public</button>
<button class="cta cta--secondary " id="my-qualifications-keep-bio-private-button" aria-label="Keep Bio Private">Keep Bio Private</button>
<button class="cta cta--efl " id="efl-learner-profile-edit-qualification-button" aria-label="Edit Qualification">Edit Qualification</button>
<button class="cta cta--efl " id="efl-learner-profile-error-qualification-button" aria-label="Try again">Try again</button>
</div>
</div>
</section>
<section class="efl-learner-profile__section previous-experience" data-behavior="efl-learner-profile-previous-experience">
<div class="efl-learner-profile__section--header">
<h3 class="previous-experience">My previous experience</h3>
<button aria-label="edit my previous experience" class="efl-learner-profile__section--edit"></button>
</div>
<p class="paragraph placeholder-text">Share past experience within football or any sport</p>
<div class="efl-learner-profile__section__experience--container">
<div class="efl-learner-profile__section__experience--pagelist">
<div class="efl-learner-profile__section__experience" data-experience-detail='{
"name": "Name of team / experience 1" ,
"role" : "Name of role taken",
"description" : "Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.",
"dateStarted" : "2012/07/25",
"dateCompleted" : "2012/08/25"}' data-edit-id="0">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Jul 2012 - Aug 2012</div>
<h5>Name of team / experience 1</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
</div>
<div class="efl-learner-profile__section__experience" data-experience-detail='{
"name": "Name of team / experience 2" ,
"role" : "Name of role taken",
"description" : "Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.",
"dateStarted" : "2011/03/25",
"dateCompleted" : "2011/04/25"}' data-edit-id="1">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Mar 2011 - Apr 2011</div>
<h5>Name of team / experience 2</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
</div>
<div class="efl-learner-profile__section__experience" data-experience-detail='{
"name": "Name of team / experience 3" ,
"role" : "Name of role taken",
"description" : "Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.",
"dateStarted" : "2010/05/25",
"dateCompleted" : "2010/06/25"}' data-edit-id="2">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">May 2010 - Jun 2010</div>
<h5>Name of team / experience 3</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
</div>
</div>
<button class="cta cta--secondary" id="show-all-button" aria-label="show all 3 experiences">Show All 3 Experiences</button>
<button class="cta cta--secondary" id="show-less-cta" aria-label="show less previous experiences">Show Less</button>
</div>
<div class="efl-profile-left-popup previous-experience" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close previous experience popup window"></button>
<div class="efl-learner-profile__section--header">
<h3 class="previous-experience">My previous experience</h3>
</div>
<div id="previous-experience-main" class="efl-profile-left-popup--inner">
<p class="paragraph">Coach? Medic? Referee? If you're already involved in football, share your previous experience below.</p>
<div class="efl-learner-profile__section__experience--container">
<div class="efl-learner-profile__section__experience--list">
<div class="efl-learner-profile__section__experience" data-start-date="2012/07/25" data-end-date="2012/08/25" data-edit-id="0">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Jul 2012 - Aug 2012</div>
<h5>Name of team / experience 1</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
<button aria-label="edit Name of team / experience 1 experience" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__experience" data-start-date="2011/03/25" data-end-date="2011/04/25" data-edit-id="1">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">Mar 2011 - Apr 2011</div>
<h5>Name of team / experience 2</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
<button aria-label="edit Name of team / experience 2 experience" class="efl-learner-profile__section__qualification--edit"></button>
</div>
<div class="efl-learner-profile__section__experience" data-start-date="2010/05/25" data-end-date="2010/06/25" data-edit-id="2">
<div class="efl-learner-profile__section__experience__content">
<div class="efl-category-title">May 2010 - Jun 2010</div>
<h5>Name of team / experience 3</h5>
<p class="role"><strong>Name of role taken</strong></p>
<p>Bit of descriptive text about their experience with the team and what they learned. Limited to 500 characters.</p>
</div>
<button aria-label="edit Name of team / experience 3 experience" class="efl-learner-profile__section__qualification--edit"></button>
</div>
</div>
<button class="cta cta--secondary" id="show-all-button" aria-label="show all 3 experiences">Show All 3 Experiences</button>
<button class="cta cta--secondary" id="show-less-cta" aria-label="show less previous experiences">Show Less</button>
</div>
<button class="cta cta--secondary" id="previous-experience-add-button" aria-label="add experience">Add Experience</button>
</div>
<div id="previous-experience-form" class="efl-profile-left-popup--inner hidden">
<button class="efl-profile-left-popup__back" aria-label="back to previous experiences">Back</button>
<h4 class="efl-learner-profile__section--subheading" data-form-title-add="Add Experience" data-form-title-edit="Edit Experience"><strong>Add Experience</strong></h4>
<form>
<label for="previous-experience-form--title">Title of experience</label>
<input type="text" name="experience title" autocomplete="off" id="previous-experience-form--title" maxlength="100" />
<p><span class="character-count__name">0</span>/100 characters</p>
<label for="previous-experience-form--role">Your role</label>
<input type="text" name="experience role" autocomplete="off" id="previous-experience-form--role" maxlength="100" />
<p><span class="character-count__role">0</span>/100 characters</p>
<label>Date of Experience</label>
<div class="previous-experience-form--date-range">
<input autocomplete="off" type="text" placeholder="Date from" name="start date of experience" id="previous-experience-form--date-start" />
<input autocomplete="off" type="text" placeholder="Date to" name="end date of experience" id="previous-experience-form--date-end" />
</div>
<label for="previous-experience-form--desc">Description of experience</label>
<textarea rows="3" cols="30" maxlength="500" name="description of experience" id="previous-experience-form--desc" maxlength="500"></textarea>
<p><span class="character-count__textarea">0</span>/500 characters</p>
</form>
<button class="cta cta--efl " id="previous-experience-save-experience-button" aria-label="save experience" aria-disabled="true">
<span>Save Experience</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--secondary" id="delete-experience-button" aria-label="delete experience">Delete Experience</button>
</div>
<div class="efl-profile-left-popup__toast-notification" tabindex="-1" aria-label="" data-toast-update-text="Previous Experience Saved!" data-toast-delete-text="Previous Experience Deleted!">
Previous Experience Saved!
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true" aria-live="polite" data-unsaved-changes-header="You have unsaved changes" data-unsaved-changes-copy="Continue editing to save your changes." data-fill-all-fields-header="you must fill in all fields" data-fill-all-fields-copy="Continue editing to save your changes." data-make-bio-public-header="Time to make your bio public?" data-make-bio-public-copy="Publishing your bio allows others to view your information. This is a great way to connect with clubs, coaches and the football community." data-innapropriate-content-header="Innapropriate content" data-innapropriate-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-iwf-error-content-header="Error" data-iwf-error-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-invalid-data-content-header="Error" data-invalid-data-content-copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est
ipsum commodo mi, a rutrum urna mauris ut.</p>
<button class="cta cta--efl " id="previous-experience-continue-editing-button" aria-label="Continue Editing">Continue Editing</button>
<button class="cta cta--secondary " id="previous-experience-lose-changes-button" aria-label="Lose My Changes">Lose My Changes</button>
<button class="cta cta--efl " id="previous-experience-make-bio-public-button" aria-label="Make Bio Public">Make Bio Public</button>
<button class="cta cta--secondary " id="previous-experience-keep-bio-private-button" aria-label="Keep Bio Private">Keep Bio Private</button>
<button class="cta cta--efl " id="efl-learner-profile-edit-previous-experience-button" aria-label="Edit Experience">Edit Experience</button>
<button class="cta cta--efl " id="efl-learner-profile-error-previous-experience-button" aria-label="Try again">Try again</button>
</div>
</div>
</section>
</article>
</div>
</div>
<section aria-expanded="true" class="efl-learner-profile__social-links">
<h3>Share your profile</h3>
<p>Grow your England Football Learning network by sharing your Learner Biog.</p>
<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 to share my profile" 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 class="linkedin" 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>
</section>
</div>
<div data-page="my-learning" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<!-- EFL Profile layout column block -->
<div class="efl-load-screen hidden" role="dialog" aria-modal="true" data-behavior="efl-load-screen" data-load-screen="true">
<div class="efl-load-screen__overlay">
<h2 class="title">Loading your qualifications</h2>
<canvas id="load-screen-football-animation" width="400" height="135"></canvas>
<div class="loading-bar"><span></span></div>
<p data-text-default="Please bear with us. this may take a few minutes." data-lost-connection="Lost connection">
Please bear with us. this may take a few minutes.
</p>
</div>
</div>
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">My learning</span></h1>
<div class="efl-hero-banner-copy">
Your current courses, previous qualifications and recommendations for ongoing learning
</div>
</div>
</div>
</div>
</section>
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
<section class="efl-learner-profile__section active-courses" data-behavior="efl-learner-profile-courses">
<div class="efl-learner-profile__section--header">
<h3 class="active-courses">Active Courses</h3>
</div>
<div class="accordion efl-learner-profile-courses" data-behaviour="accordion">
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="active-courses-0" aria-expanded="false" aria-controls="active-courses-0-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Started Jan 2022</div>
<h5>Sudden Cardiac Arrest</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="active-courses-0-panel" role="region" aria-labelledby="active-courses-0">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Continue learning</a></li>
<li><a class="external-link" target="_blank">Course materials</a></li>
<li><a class="external-link" target="_blank">Ask the community</a></li>
<li><a class="external-link" target="_blank">Ask a coach developer</a></li>
<li><a class="external-link" target="_blank">Recommended reading</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="active-courses-1" aria-expanded="false" aria-controls="active-courses-1-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification-red.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Started Jan 2022</div>
<h5>Introduction to Coaching Disabled Football</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="active-courses-1-panel" role="region" aria-labelledby="active-courses-1">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Continue learning</a></li>
<li><a class="external-link" target="_blank">Course materials</a></li>
<li><a class="external-link" target="_blank">Ask the community</a></li>
<li><a class="external-link" target="_blank">Ask a coach developer</a></li>
<li><a class="external-link" target="_blank">Recommended reading</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="active-courses-2" aria-expanded="false" aria-controls="active-courses-2-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Started Jan 2022</div>
<h5>National Futsal Course</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="active-courses-2-panel" role="region" aria-labelledby="active-courses-2">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Continue learning</a></li>
<li><a class="external-link" target="_blank">Course materials</a></li>
<li><a class="external-link" target="_blank">Ask the community</a></li>
<li><a class="external-link" target="_blank">Ask a coach developer</a></li>
<li><a class="external-link" target="_blank">Recommended reading</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="active-courses-3" aria-expanded="false" aria-controls="active-courses-3-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">Started Jan 2022</div>
<h5>Face-to-face PE CPD for Teachers - Part Two</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="active-courses-3-panel" role="region" aria-labelledby="active-courses-3">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Continue learning</a></li>
<li><a class="external-link" target="_blank">Course materials</a></li>
<li><a class="external-link" target="_blank">Ask the community</a></li>
<li><a class="external-link" target="_blank">Ask a coach developer</a></li>
<li><a class="external-link" target="_blank">Recommended reading</a></li>
</ul>
</div>
</div>
</div>
</div>
<button class="cta cta--secondary show-more-courses" aria-label="show more courses">Show More</button>
<button class="cta cta--secondary show-less-courses" aria-label="show less courses">Show Less</button>
</section>
<section class="efl-learner-profile__section completed-courses" data-behavior="efl-learner-profile-courses">
<div class="efl-learner-profile__section--header">
<h3 class="completed-courses">My Qualifications</h3>
</div>
<div class="accordion efl-learner-profile-courses" data-behaviour="accordion">
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="completed-courses-0" aria-expanded="false" aria-controls="completed-courses-0-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">completed Jan 2019</div>
<h5>EE Playmaker by England Football</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="completed-courses-0-panel" role="region" aria-labelledby="completed-courses-0">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Talk to the community</a></li>
<li><a class="external-link" target="_blank">Download certificate</a></li>
<li><a class="external-link" target="_blank">Top up your knowledge</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="completed-courses-1" aria-expanded="false" aria-controls="completed-courses-1-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification-red.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">completed Jan 2019</div>
<h5>Introduction to Coaching Disabled Football</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="completed-courses-1-panel" role="region" aria-labelledby="completed-courses-1">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Talk to the community</a></li>
<li><a class="external-link" target="_blank">Download certificate</a></li>
<li><a class="external-link" target="_blank">Top up your knowledge</a></li>
</ul>
</div>
</div>
</div>
</div>
<button class="cta cta--secondary show-more-courses" aria-label="show more courses">Show More</button>
<button class="cta cta--secondary show-less-courses" aria-label="show less courses">Show Less</button>
</section>
<section class="efl-learner-profile__section expired-courses" data-behavior="efl-learner-profile-courses">
<div class="efl-learner-profile__section--header">
<h3 class="expired-courses">Expired Courses</h3>
</div>
<div class="accordion efl-learner-profile-courses" data-behaviour="accordion">
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="expired-courses-0" aria-expanded="false" aria-controls="expired-courses-0-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification-red.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">EXPIRED feb 2022</div>
<h5>Introduction to Coaching Football</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="expired-courses-0-panel" role="region" aria-labelledby="expired-courses-0">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<p>
You failed to complete this course within a given timeframe. You must repurchase this course in order to complete it.
</p>
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Repurchase course</a></li>
<li><a class="external-link" target="_blank">Remove from list</a></li>
</ul>
</div>
</div>
</div>
</div>
<button class="cta cta--secondary show-more-courses" aria-label="show more courses">Show More</button>
<button class="cta cta--secondary show-less-courses" aria-label="show less courses">Show Less</button>
</section>
</article>
</div>
<section class="signpost membership-signpost membership-signpost--invert membership-signpost--efl-blue">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
</div>
<div class="signpost__info">
<h3 class="signpost__heading">Course Availability</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>
<hr />
<span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>
</div>
</a href="#">
</section>
</div>
</div>
<div data-page="bookmarks" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Your Bookmarks</span></h1>
<div class="efl-hero-banner-copy">
Articles and sessions you’ve saved for later
</div>
</div>
</div>
</div>
</section>
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
<div class="efl-learner-profile-bookmark__back hidden" tabindex="0" aria-label="back to bookmark lists"><button tabindex="-1">Back to my bookmark lists</button></div>
<section class="efl-learner-profile__section create-bookmark-list efl-learner-profile-bookmark" data-behavior="create-bookmark-list" data-edit-bookmark-id="">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list">Build a new bookmark list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Get organised and sort your bookmarked content into separate lists.
</div>
<button class="cta cta--primary create-new-bookmark-list" id="create-new-bookmark-list" aria-label="create list bookmark">Create list</button>
<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>
</section>
<section class="efl-learner-profile__section bookmark-list efl-learner-profile-bookmark" data-behavior="create-bookmark-list" data-edit-bookmark-id="0">
<div class="efl-learner-profile-bookmark__list">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">My bookmark list</h3>
<button aria-label="edit or delete bookmark of My bookmark list" class="efl-learner-profile__section--dot" aria-expanded="false"></button>
<div class="efl-learner-profile-bookmark__list--manage hidden">
<button class="edit-list" aria-label="edit list bookmark">Rename list</button>
</div>
</div>
<div class="efl-learner-profile-bookmark__tags">
<span>1 Articles</span>
<span>1 Sessions</span>
</div>
<div class="efl-learner-profile-bookmark__items">
<div class="efl-learner-profile-bookmark__items--img" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus, diam vel vehicula iaculis, risus nunc dictum nis.
</div>
<button class="cta cta--primary view-bookmark-list" aria-label="view list bookmark of My bookmark list">view list</button>
</div>
<div class="efl-learner-profile-bookmark__details hidden">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">My bookmark list</h3>
<div class="efl-learner-profile__section--sort">
<button aria-label="sort bookmark list" class="efl-learner-profile__section--sort__link">Sort by: <span> All</span></button>
<div aria-expanded="false" role="list" class="efl-learner-profile__section--sort__list">
<ul>
<li tabindex="0" data-value="All">All</li>
<li tabindex="0" data-value="Articles">Articles</li>
<li tabindex="0" data-value="Sessions">Sessions</li>
</ul>
</div>
<select class="efl-learner-profile__section--sort__select">
<option value="All">All</option>
<option value="Articles">Articles</option>
<option value="Sessions">Sessions</option>
</select>
</div>
</div>
<div class="efl-learner-profile-bookmark__details--list">
<div class="bookmark-item" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<a class="bookmark-item__link">
<div class="bookmark-item__link--img">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="bookmark-item__link--content">
<p>Article</p>
<h5>How to create a great matchday experience</h5>
</div>
</a>
<button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
</div>
<div class="bookmark-item" data-bookmark-page-id="8ed119426dd847cbb99a4b22baba296e">
<a class="bookmark-item__link">
<div class="bookmark-item__link--img">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="bookmark-item__link--content">
<p>Article</p>
<h5>How to create a great matchday experience</h5>
</div>
</a>
<button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
</div>
</div>
</div>
</section>
<section class="efl-learner-profile__section bookmark-list efl-learner-profile-bookmark" data-behavior="create-bookmark-list" data-edit-bookmark-id="1">
<div class="efl-learner-profile-bookmark__list">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">Attacking list</h3>
<button aria-label="edit or delete bookmark of Attacking list" class="efl-learner-profile__section--dot" aria-expanded="false"></button>
<div class="efl-learner-profile-bookmark__list--manage hidden">
<button class="edit-list" aria-label="edit list bookmark">Rename list</button>
<button class="delete-list" aria-label="delete list bookmark">Delete list</button>
</div>
</div>
<div class="efl-learner-profile-bookmark__tags">
<span>1 Articles</span>
<span>1 Sessions</span>
</div>
<div class="efl-learner-profile-bookmark__items">
<div class="efl-learner-profile-bookmark__items--img" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="efl-learner-profile-bookmark__items--img" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
</div>
<button class="cta cta--primary view-bookmark-list" aria-label="view list bookmark of Attacking list">view list</button>
</div>
<div class="efl-learner-profile-bookmark__details hidden">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">Attacking list</h3>
<div class="efl-learner-profile__section--sort">
<button aria-label="sort bookmark list" class="efl-learner-profile__section--sort__link">Sort by: <span> All</span></button>
<div aria-expanded="false" role="list" class="efl-learner-profile__section--sort__list">
<ul>
<li tabindex="0" data-value="All">All</li>
<li tabindex="0" data-value="Articles">Articles</li>
<li tabindex="0" data-value="Sessions">Sessions</li>
</ul>
</div>
<select class="efl-learner-profile__section--sort__select">
<option value="All">All</option>
<option value="Articles">Articles</option>
<option value="Sessions">Sessions</option>
</select>
</div>
</div>
<div class="efl-learner-profile-bookmark__details--list">
<div class="bookmark-item" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<a class="bookmark-item__link">
<div class="bookmark-item__link--img">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="bookmark-item__link--content">
<p>Article</p>
<h5>How to create a great matchday experience</h5>
</div>
</a>
<button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
</div>
<div class="bookmark-item" data-bookmark-page-id="8ed119426dd847cbb99a4b22baba296e">
<a class="bookmark-item__link">
<div class="bookmark-item__link--img">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="bookmark-item__link--content">
<p>Article</p>
<h5>How to create a great matchday experience</h5>
</div>
</a>
<button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
</div>
</div>
</div>
</section>
<section class="efl-learner-profile__section bookmark-list efl-learner-profile-bookmark" data-behavior="create-bookmark-list" data-edit-bookmark-id="2">
<div class="efl-learner-profile-bookmark__list">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">Defending list</h3>
<button aria-label="edit or delete bookmark of Defending list" class="efl-learner-profile__section--dot" aria-expanded="false"></button>
<div class="efl-learner-profile-bookmark__list--manage hidden">
<button class="edit-list" aria-label="edit list bookmark">Rename list</button>
<button class="delete-list" aria-label="delete list bookmark">Delete list</button>
</div>
</div>
<div class="efl-learner-profile-bookmark__tags">
<span>1 Articles</span>
<span>1 Sessions</span>
</div>
<div class="efl-learner-profile-bookmark__items">
<div class="efl-learner-profile-bookmark__items--img" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="efl-learner-profile-bookmark__items--img" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="efl-learner-profile-bookmark__items--img" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
</div>
<button class="cta cta--primary view-bookmark-list" aria-label="view list bookmark of Defending list">view list</button>
</div>
<div class="efl-learner-profile-bookmark__details hidden">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">Defending list</h3>
<div class="efl-learner-profile__section--sort">
<button aria-label="sort bookmark list" class="efl-learner-profile__section--sort__link">Sort by: <span> All</span></button>
<div aria-expanded="false" role="list" class="efl-learner-profile__section--sort__list">
<ul>
<li tabindex="0" data-value="All">All</li>
<li tabindex="0" data-value="Articles">Articles</li>
<li tabindex="0" data-value="Sessions">Sessions</li>
</ul>
</div>
<select class="efl-learner-profile__section--sort__select">
<option value="All">All</option>
<option value="Articles">Articles</option>
<option value="Sessions">Sessions</option>
</select>
</div>
</div>
<div class="efl-learner-profile-bookmark__details--list">
<div class="bookmark-item" data-bookmark-page-id="08619b1b8cc34f5a95eb809ec15837ad">
<a class="bookmark-item__link">
<div class="bookmark-item__link--img">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="bookmark-item__link--content">
<p>Article</p>
<h5>How to create a great matchday experience</h5>
</div>
</a>
<button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
</div>
<div class="bookmark-item" data-bookmark-page-id="8ed119426dd847cbb99a4b22baba296e">
<a class="bookmark-item__link">
<div class="bookmark-item__link--img">
<img src="/assets/example-content/news-horizontal-1.jpg" alt="" loading="lazy" />
</div>
<div class="bookmark-item__link--content">
<p>Article</p>
<h5>How to create a great matchday experience</h5>
</div>
</a>
<button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
</div>
</div>
</div>
</section>
<section class="efl-learner-profile__section bookmark-list efl-learner-profile-bookmark" data-behavior="create-bookmark-list" data-edit-bookmark-id="3">
<div class="efl-learner-profile-bookmark__list">
<div class="efl-learner-profile__section--header">
<h3 class="bookmark-list">Coaching</h3>
<button aria-label="edit or delete bookmark of Coaching" class="efl-learner-profile__section--dot" aria-expanded="false"></button>
<div class="efl-learner-profile-bookmark__list--manage hidden">
<button class="edit-list" aria-label="edit list bookmark">Rename list</button>
<button class="delete-list" aria-label="delete list bookmark">Delete list</button>
</div>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-bookmark-list">
This list is empty. To add content, check out our <a>articles</a> and <a>sessions</a> pages.
</div>
</div>
</section>
</article>
</div>
</div>
</div>
<div data-page="bundles" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Available Bundles</span></h1>
<div class="efl-hero-banner-copy">
Description for bundle learning and Achievements so far
</div>
</div>
</div>
</div>
</section>
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
<section class="efl-learner-profile__section efl-bundles-overview-card-list" data-behavior="efl-bundle-overview-list">
<div class="efl-bundles-overview-card-list__details">
<div class="efl-learner-profile__section--header">
<h2 class="bundles-list">My bundle list</h2>
</div>
<div class="efl-bundles-overview-card-list__details--list">
<a class="efl-bundles-overview-card" href="#" target="_blank">
<div class="efl-bundles-overview-card__content">
<div class="efl-bundles-overview-card__content--info">
<p>COACHING SKILLS</p>
<div class="title">The basics</div>
<hr>
<div class="quiz-time">
<span>20 - mins</span>
<span>5 - Quizzes</span>
</div>
</div>
<div class="efl-bundles-overview-card__content--img">
<img src="/assets/example-content/bundles-tropy-1.svg" />
</div>
</div>
<div class="efl-bundles-overview-card__status not-started">Not started</div>
</a>
<a class="efl-bundles-overview-card" href="#" target="_blank">
<div class="efl-bundles-overview-card__content">
<div class="efl-bundles-overview-card__content--info">
<p>COACHING SKILLS</p>
<div class="title">Session design</div>
<hr>
<div class="quiz-time">
<span>20 - mins</span>
<span>5 - Quizzes</span>
</div>
</div>
<div class="efl-bundles-overview-card__content--img">
<img src="/assets/example-content/bundles-tropy-2.svg" />
</div>
</div>
<div class="efl-bundles-overview-card__status started">Started</div>
</a>
<a class="efl-bundles-overview-card" href="#" target="_blank">
<div class="efl-bundles-overview-card__content">
<div class="efl-bundles-overview-card__content--info">
<p>COACHING SKILLS</p>
<div class="title">Communication and connection</div>
<hr>
<div class="quiz-time">
<span>20 - mins</span>
<span>5 - Quizzes</span>
</div>
</div>
<div class="efl-bundles-overview-card__content--img">
<img src="/assets/example-content/bundles-tropy-3.svg" />
</div>
</div>
<div class="efl-bundles-overview-card__status complete">Complete!</div>
</a>
<a class="efl-bundles-overview-card" href="#" target="_blank">
<div class="efl-bundles-overview-card__content">
<div class="efl-bundles-overview-card__content--info">
<p>COACHING SKILLS</p>
<div class="title">Session design</div>
<hr>
<div class="quiz-time">
<span>20 - mins</span>
<span>5 - Quizzes</span>
</div>
</div>
<div class="efl-bundles-overview-card__content--img">
<img src="/assets/example-content/bundles-tropy-2.svg" />
</div>
</div>
<div class="efl-bundles-overview-card__status started">Started</div>
</a>
</div>
</div>
</section>
</article>
</div>
<div class="efl-column-layout efl-column-layout--one full-width">
<section class="efl-full-width-carousel efl-full-width-carousel--other-bundles">
<h2>Why not try these other bundles</h2>
<div class="carousel" data-behavior="full-width-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-3.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-4.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-5.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-6.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-3.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-4.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-5.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-6.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-3.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-4.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-5.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-6.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-1.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
<li>
<a href="#" class="bundle-card">
<div class="bundle-card__image">
<img src="/assets/example-content/bundle-carousel/bundle-img-2.jpg" />
</div>
<div class="bundle-card__content">
<p class="bundle-card__content--category">bundle</p>
<div class="bundle-card__content--title">Bundle name</div>
</div>
<div class="bundle-card__trophy">
<img src="/assets/example-content/bundle-carousel/bundle-trophy.svg" />
</div>
</a>
</li>
</ul>
</div>
<div class="full-width-carousel-nav-block">
<div class="full-width-carousel-nav-wrapper">
<div class="full-width-carousel-navigation" data-glide-el="controls">
</div>
</div>
</div>
<button aria-label="Previous" class="full-width-carousel__cta full-width-carousel__prev"><span class="visually-hidden">Previous
page</span>
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.36326 10.0377L1.06884 10.8172L8.70084 19.2327L10.6387 17.6736L3.71231 10.0378L10.6387 2.40189L8.70084 0.842773L1.06884 9.25827L0.36326 10.0377Z" fill="white" />
</svg></button>
<button aria-label="Next" class="full-width-carousel__cta full-width-carousel__next"><span class="visually-hidden">Next
page</span><svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8471 9.41443L9.18146 8.63462L1.98146 0.216612L0.153321 1.7762L6.68762 9.41434L0.15332 17.0525L1.98146 18.6121L9.18146 10.1941L9.8471 9.41443Z" fill="white" />
</svg></button>
</div>
<a href="#" class="view-all-bundles">View All Bundles</a>
</section>
</div>
</div>
</div>
<div data-page="personalisation" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Personal preferences</span></h1>
<div class="efl-hero-banner-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
</div>
</div>
</div>
</section>
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
<section class="progressive-profiling-settings" data-behavior="progressive-profiling-settings" data-fanid="111">
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballGender">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">What are you here to do</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-1" value="Start learning" tabindex="-1">
<label for="setting-1-opt-1" tabindex="0">Start learning</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-2" value="Find courses" tabindex="-1">
<label for="setting-1-opt-2" tabindex="0">Find courses</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-3" value="Find session plans" tabindex="-1">
<label for="setting-1-opt-3" tabindex="0">Find session plans</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-4" value="Find articles" tabindex="-1">
<label for="setting-1-opt-4" tabindex="0">Find articles</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-5" value="Find ongoing learning" tabindex="-1">
<label for="setting-1-opt-5" tabindex="0">Find ongoing learning</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballDisciplines">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">How long have you worked or volunteered in football?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-1" value="I have never worked or volunteered" tabindex="-1">
<label for="setting-2-opt-1" tabindex="0">I have never worked or volunteered</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-2" value="1 year" tabindex="-1">
<label for="setting-2-opt-2" tabindex="0">1 year</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-3" value="1 - 5 yers" tabindex="-1">
<label for="setting-2-opt-3" tabindex="0">1 - 5 yers</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-4" value="5 - 10 years" tabindex="-1">
<label for="setting-2-opt-4" tabindex="0">5 - 10 years</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-5" value="10+ years" tabindex="-1">
<label for="setting-2-opt-5" tabindex="0">10+ years</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballType">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">Who do you work with?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-1" value="Male players" tabindex="-1">
<label for="setting-3-opt-1" tabindex="0">Male players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-2" value="Female players" tabindex="-1">
<label for="setting-3-opt-2" tabindex="0">Female players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-3" value="Mixed players" tabindex="-1">
<label for="setting-3-opt-3" tabindex="0">Mixed players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-4" value="Disabled players" tabindex="-1">
<label for="setting-3-opt-4" tabindex="0">Disabled players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-5" value="Age 5 - 11" tabindex="-1">
<label for="setting-3-opt-5" tabindex="0">Age 5 - 11</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-6" value="Age 12 - 16" tabindex="-1">
<label for="setting-3-opt-6" tabindex="0">Age 12 - 16</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-7" value="Age 17 - 21" tabindex="-1">
<label for="setting-3-opt-7" tabindex="0">Age 17 - 21</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-8" value="Ages 22+" tabindex="-1">
<label for="setting-3-opt-8" tabindex="0">Ages 22+</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-9" value="None" tabindex="-1">
<label for="setting-3-opt-9" tabindex="0">None</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballType">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">What level do you work at?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-1" value="Grassroots" tabindex="-1">
<label for="setting-4-opt-1" tabindex="0">Grassroots</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-2" value="Talent development" tabindex="-1">
<label for="setting-4-opt-2" tabindex="0">Talent development</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-3" value="Senior" tabindex="-1">
<label for="setting-4-opt-3" tabindex="0">Senior</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-4" value="None" tabindex="-1">
<label for="setting-4-opt-4" tabindex="0">None</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballType">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">What’s your role in football?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-1" value="Coach" tabindex="-1">
<label for="setting-5-opt-1" tabindex="0">Coach</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-2" value="Referee" tabindex="-1">
<label for="setting-5-opt-2" tabindex="0">Referee</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-3" value="Medic/first aid" tabindex="-1">
<label for="setting-5-opt-3" tabindex="0">Medic/first aid</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-4" value="Talent ID" tabindex="-1">
<label for="setting-5-opt-4" tabindex="0">Talent ID</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-5" value="Club admin" tabindex="-1">
<label for="setting-5-opt-5" tabindex="0">Club admin</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-6" value="Teacher" tabindex="-1">
<label for="setting-5-opt-6" tabindex="0">Teacher</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-7" value="Safeguarding officer" tabindex="-1">
<label for="setting-5-opt-7" tabindex="0">Safeguarding officer</label>
</div>
</div>
</div>
<hr>
<a class="cta cta--efl save-preference-settings" tabindex="0" aria-disabled="true">
<span>Save Preferences</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>
</section>
</article>
</div>
</div>
</div>
</div>
No notes defined.
{
"efl-hero-banner": {
"title": "My learning",
"copy": "Your current courses, previous qualifications and recommendations for ongoing learning"
},
"efl-hero-banner2": {
"title": "Your Bookmarks",
"copy": "Articles and sessions you’ve saved for later"
},
"efl-hero-banner3": {
"title": "Available Bundles",
"copy": "Description for bundle learning and Achievements so far"
},
"efl-hero-banner4": {
"title": "Personal preferences",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
}
}
<div class="efl-profile-page">
{{render '@efl-learner-profile-onboarding-journey'}}
{{render '@efl-learner-profile-tab'}}
{{render '@efl-learner-profile-age-check'}}
<div data-page="bio" aria-hidden="false" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<!-- EFL Profile layout column block -->
{{render '@efl-profile-hero-banner'}}
<div class="efl-column-layout efl-profile-layout">
{{render '@efl-learner-profile'}}
</div>
</div>
{{render '@efl-learner-profile-social-links'}}
</div>
<div data-page="my-learning" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
<!-- EFL Profile layout column block -->
{{render '@efl-load-screen'}}
{{render '@efl-hero-banner--article-session-index-hero' efl-hero-banner merge=true}}
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
{{render '@efl-learner-profile-courses'}}
{{render '@efl-learner-profile-courses--my-qualifications'}}
{{render '@efl-learner-profile-courses--expired-courses'}}
{{!-- {{render '@efl-learner-profile-courses--no-active-courses'}} --}}
</article>
</div>
{{render '@membership-signpost--efl-blue' merge="true"}}
</div>
</div>
<div data-page="bookmarks" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
{{render '@efl-hero-banner--article-session-index-hero' efl-hero-banner2 merge=true}}
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
<div class="efl-learner-profile-bookmark__back hidden" tabindex="0" aria-label="back to bookmark lists"><button tabindex="-1">Back to my bookmark lists</button></div>
{{render '@efl-learner-profile-bookmark'}}
{{render '@efl-learner-profile-bookmark--my-bookmark-list-1'}}
{{render '@efl-learner-profile-bookmark--my-bookmark-list-2'}}
{{render '@efl-learner-profile-bookmark--my-bookmark-list-3'}}
{{render '@efl-learner-profile-bookmark--empty-bookmark-list'}}
</article>
</div>
</div>
</div>
<div data-page="bundles" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
{{render '@efl-hero-banner--article-session-index-hero' efl-hero-banner3 merge=true}}
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
{{render '@efl-bundles-overview-card-list'}}
</article>
</div>
<div class="efl-column-layout efl-column-layout--one full-width">
{{render '@efl-full-width-carousel--other-bundles'}}
</div>
</div>
</div>
<div data-page="personalisation" aria-hidden="true" tabindex="0" class="efl-page-content-subpage onboarding-loading">
<!-- below placeholders are dynamic we need to update based on component-->
<div class="efl-page-content__dynamic-placeholder">
{{render '@efl-hero-banner--article-session-index-hero' efl-hero-banner4 merge=true}}
<div class="efl-column-layout efl-profile-layout">
<article class="efl-learner-profile">
{{render '@progressive-profiling-settings'}}
</article>
</div>
</div>
</div>
</div>