Efl Comments Social

<div class="efl-comments-social">
    <div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
        <div class="efl-learner-profile-in-page-bookmark__wrapper">
            <a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
            <button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
            <button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
            <div class="efl-learner-profile-in-page-bookmark__list hidden">
                <p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
                <a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
                <div class="bookmark-list">
                    <div aria-checked="true" class="bookmark-list--item">
                        <input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
                        <label for="checkbox--my-bookmark-list">My Bookmark list</label>
                    </div>
                    <div aria-checked="false" class="bookmark-list--item">
                        <input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
                        <label for="checkbox---attacking-list">Attacking list</label>
                    </div>
                    <div aria-checked="false" class="bookmark-list--item">
                        <input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
                        <label for="checkbox---defending-list">Defending list</label>
                    </div>
                    <div aria-checked="false" class="bookmark-list--item">
                        <input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
                        <label for="checkbox---coaching">Coaching</label>
                    </div>
                </div>
                <a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
                <a class="bookmark-done">Done</a>
                <a href="#" class="cta cta--primary  view-all-bookmarks" tabindex="0">View all bookmarks</a>

            </div>
            <div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
                <div class="efl-learner-profile__social-links__list">
                    <div>
                        <div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
                            <img src=/assets/example-content/learner-profile/copy.svg>
                        </div>
                        <p>Copy link</p>
                    </div>
                    <div>
                        <a href="#" aria-label="Facebook">
                            <img src=/assets/example-content/learner-profile/facebook.svg>
                        </a>
                        <p>Facebook</p>
                    </div>
                    <div>
                        <a href="#" aria-label="Twitter">
                            <img src=/assets/example-content/learner-profile/twitter.svg>
                        </a>
                        <p>Twitter</p>
                    </div>
                    <div>
                        <a href="#" aria-label="Linkedin">
                            <img src=/assets/example-content/learner-profile/linkedin.svg>
                        </a>
                        <p>Linkedin</p>
                    </div>
                    <div>
                        <a href="#" aria-label="Whatsapp">
                            <img src=/assets/example-content/learner-profile/whatsapp.svg>
                        </a>
                        <p>Whatsapp</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
            <h3><span class="jumpTohide">SIGN IN</span></h3>
            <div class="popup-copy">
                In order to bookmark this article, please Sign In or Create an EFL Account.
            </div>
            <a href="#" class="cta cta--primary  in-page-bookmark-login" tabindex="0">Login</a>

            <a href="#" class="cta cta--primary  in-page-bookmark-signup" tabindex="0">Sign up</a>

        </div>
        <div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
            <div class="steps step1">
                <div class="efl-learner-profile__section--header">
                    <h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
                </div>
                <div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
                    Give your list a name, then select 'create'.
                </div>
                <div class="efl-learner-profile-bookmark__popup--form">
                    <label>List name</label>
                    <input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
                    <p><span class="bookmark-list-name-count">0</span>/100</p>
                    <div class="bookmark-desc-wrapper hidden">
                        <label>List description</label>
                        <textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
                        <p><span class="bookmark-list-desc-count">0</span>/500</p>
                    </div>
                    <div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
                    <button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
                        <span>create</span>
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                            <rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                            </rect>
                            <rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                            </rect>
                            <rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                            </rect>
                        </svg>
                    </button>
                    <button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
                        <span>save</span>
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                            <rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                            </rect>
                            <rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                            </rect>
                            <rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                            </rect>
                        </svg>
                    </button>
                    <button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
                    <input type="hidden" class="bookmark-list-article-link" value="/articles">
                    <input type="hidden" class="bookmark-list-session-link" value="/sessions">
                </div>
            </div>
            <div class="steps step2 hidden">
                <div class="efl-learner-profile__section--header">
                    <h4 class="exist">List already exists</h4>
                </div>
                <div class="efl-learner-profile__section--nocourse-copy">
                    The name you've chosen for this list already exists.
                </div>
                <button class="cta cta--primary  edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
            </div>
            <div class="steps step3 hidden">
                <div class="efl-learner-profile__section--header">
                    <h4 class="exist">Delete list</h4>
                </div>
                <div class="efl-learner-profile__section--nocourse-copy no-border">
                    Are you sure you want to delete this list?
                </div>
                <button class="cta cta--primary  delete-bookmark-list" aria-label="yes, delete this list">
                    <span>Yes, delete this list</span>
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                        <rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                        </rect>
                        <rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                        </rect>
                        <rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                        </rect>
                    </svg>
                </button>
                <button class="cta cta--primary  cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
            </div>
            <div class="steps step4 hidden">
                <div class="efl-learner-profile__section--header">
                    <h4 class="exist">Remove Bookmark</h4>
                </div>
                <div class="efl-learner-profile__section--nocourse-copy no-border">
                    Are you sure you want to remove this bookmark?
                </div>
                <button class="cta cta--primary  remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
                <button class="cta cta--primary  cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
            </div>
            <div class="steps step5 hidden">
                <div class="efl-learner-profile__section--header">
                    <h4 class="exist">Innapropriate content</h4>
                </div>
                <div class="efl-learner-profile__section--nocourse-copy">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
                <button class="cta cta--primary  error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
            </div>
            <div class="steps step6 hidden">
                <div class="efl-learner-profile__section--header">
                    <h4 class="exist">Error</h4>
                </div>
                <div class="efl-learner-profile__section--nocourse-copy">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
                <button class="cta cta--primary  server-error-bookmark" aria-label="try again bookmark">Try again</button>
            </div>
        </div>
    </div>
</div>