Ghost-Admin/app/components/gh-role-selection.hbs

<div class="gh-roles-container" {{did-insert (perform this.fetchRolesTask)}}>
    {{#if this.fetchRolesTask.isRunning}}
        {{!-- width and height are needed to avoid layout shift after roles have loaded --}}
        <div style="width: 486px; height: 268px">
            <GhLoadingSpinner />
        </div>
    {{else}}
        <div class="gh-radio {{if (eq @selected.name "Contributor") "active"}}" {{on "click" (fn this.setRole "Contributor")}} data-test-option="Contributor">
            <div class="gh-radio-button"></div>
            <div class="gh-radio-content">
                <div class="gh-radio-label">Contributor</div>
                <div class="gh-radio-desc">Can create and edit their own posts, but cannot publish. An Editor needs to approve and publish for them.</div>
            </div>
            <div>
                {{!-- Inner container collapses height to the SVG so popover can align correctly --}}
                <div>
                    {{svg-jar "info"}}
                    <EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="left">Settings</td>
                                    <td>View and edit own profile</td>
                                </tr>
                                <tr>
                                    <td class="left">Posts</td>
                                    <td>Create and edit own draft posts</td>
                                </tr>
                            </tbody>
                        </table>
                    </EmberPopover>
                </div>
            </div>
        </div>

        <div class="gh-radio {{if (eq @selected.name "Author") "active"}}" {{on "click" (fn this.setRole "Author")}} data-test-option="Author">
            <div class="gh-radio-button"></div>
            <div class="gh-radio-content">
                <div class="gh-radio-label">Author</div>
                <div class="gh-radio-desc">A trusted user who can create, edit and publish their own posts, but can’t modify others.</div>
            </div>
            <div>
                {{!-- Inner container collapses height to the SVG so popover can align correctly --}}
                <div>
                    {{svg-jar "info"}}
                    <EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="left">Settings</td>
                                    <td>View and edit own profile</td>
                                </tr>
                                <tr>
                                    <td class="left">Users</td>
                                    <td>Browse users</td>
                                </tr>
                                <tr>
                                    <td class="left">Posts</td>
                                    <td>View, edit and publish own posts, generate slugs</td>
                                </tr>
                                <tr>
                                    <td class="left">Tags</td>
                                    <td>Add tags</td>
                                </tr>
                            </tbody>
                        </table>
                    </EmberPopover>
                </div>
            </div>
        </div>

        <div class="gh-radio {{if (eq @selected.name "Editor") "active"}}" {{on "click" (fn this.setRole "Editor")}} data-test-option="Editor">
            <div class="gh-radio-button"></div>
            <div class="gh-radio-content">
                <div class="gh-radio-label">Editor</div>
                <div class="gh-radio-desc">Can invite and manage other Authors and Contributors, as well as edit and publish any posts on the site.</div>
            </div>
            <div>
                {{!-- Inner container collapses height to the SVG so popover can align correctly --}}
                <div>
                    {{svg-jar "info"}}
                    <EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="left">Settings</td>
                                    <td>View and edit own profile</td>
                                </tr>
                                <tr>
                                    <td class="left">Users</td>
                                    <td>Browse users, manage authors and contributors (invite, revoke, delete)</td>
                                </tr>
                                <tr>
                                    <td class="left">Posts</td>
                                    <td>Create, publish, edit and delete all posts, generate slugs</td>
                                </tr>
                                <tr>
                                    <td class="left">Tags</td>
                                    <td>Edit, add and delete tags</td>
                                </tr>
                            </tbody>
                        </table>
                    </EmberPopover>
                </div>
            </div>
        </div>

        <div class="gh-radio {{if (eq @selected.name "Administrator") "active"}}" {{on "click" (fn this.setRole "Administrator")}} data-test-option="Administrator">
            <div class="gh-radio-button"></div>
            <div class="gh-radio-content">
                <div class="gh-radio-label">Administrator</div>
                <div class="gh-radio-desc">Trusted staff user who should be able to manage all content and users, as well as site settings and options.</div>
            </div>
            <div>
                {{!-- Inner container collapses height to the SVG so popover can align correctly --}}
                <div>
                    {{svg-jar "info"}}
                    <EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="left">Settings</td>
                                    <td>Access all except Stripe settings</td>
                                </tr>
                                <tr>
                                    <td class="left">Users</td>
                                    <td>Manage all users (invite, revoke, delete)</td>
                                </tr>
                                <tr>
                                    <td class="left">Posts</td>
                                    <td>Create, publish, edit and delete all posts, generate slugs</td>
                                </tr>
                                <tr>
                                    <td class="left">Tags</td>
                                    <td>Edit, add and delete tags</td>
                                </tr>
                                <tr>
                                    <td class="left">Database</td>
                                    <td>Import, export and delete all content</td>
                                </tr>
                                <tr>
                                    <td class="left">Email</td>
                                    <td>Send newsletters and test emails</td>
                                </tr>
                            </tbody>
                        </table>
                    </EmberPopover>
                </div>
            </div>
        </div>


        <div class="gh-content-box pa" hidden={{if this.limitErrorMessage false true}}>
            {{html-safe this.limitErrorMessage}} To use selected user role, upgrade to a different plan.
        </div>
    {{/if}}
</div>