<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header sticky gh-member-header">
        <div class="flex flex-column">
            {{#if this.fromAnalytics}}
                <div class="gh-canvas-breadcrumb">
                    <LinkTo @route="posts">
                        Posts
                    </LinkTo>
                    {{svg-jar "arrow-right-small"}}
                    <a href="#/posts/analytics/{{this.postAnalytics}}">
                        Analytics
                    </a>

                    {{#unless this.directlyFromAnalytics}}
                        {{svg-jar "arrow-right-small"}}
                        <a href={{this.membersListUrl}} data-test-link="members-back">
                            Members
                        </a>
                    {{/unless}}

                    {{svg-jar "arrow-right-small"}}
                    <span data-test-screen-title>{{this.memberTitle}}</span>
                </div>
            {{else}}
                <div class="gh-canvas-breadcrumb">
                    <a href={{this.membersListUrl}} data-test-link="members-back">
                        Members
                    </a>
                    {{svg-jar "arrow-right-small"}}
                    <span data-test-screen-title>{{this.memberTitle}}</span>
                </div>
            {{/if}}
        </div>

        <section class="view-actions">
            {{#if this.session.user.canManageMembers}}
                {{#unless this.member.isNew}}
                    <span class="dropdown">
                        <GhDropdownButton
                            @dropdownName="members-actions-menu"
                            @classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
                            @title="Members Actions"
                            data-test-button="member-actions"
                            data-testid="member-actions"
                        >
                            <span>
                                {{svg-jar "settings"}}
                                <span class="hidden">Actions</span>
                            </span>
                        </GhDropdownButton>
                        <GhDropdown
                            @name="members-actions-menu"
                            @tagName="ul"
                            @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
                        >
                            <li>
                                <button
                                    class="mr2"
                                    type="button"
                                    {{on "click" this.toggleImpersonateMemberModal}}
                                    data-test-button="impersonate"
                                >
                                    <span>Impersonate</span>
                                </button>
                            </li>
                            <li>
                                <button
                                    type="button"
                                    class="mr2"
                                    {{on "click" this.confirmLogoutMember}}
                                    data-test-button="logout-member"
                                >
                                    <span>Sign out of all devices</span>
                                </button>
                            </li>
                            <li>
                                {{#if (not-eq this.member.canComment false)}}
                                    <button
                                        type="button"
                                        class="mr2"
                                        {{on "click" this.confirmDisableCommenting}}
                                        data-test-button="disable-commenting"
                                    >
                                        <span>Disable commenting</span>
                                    </button>
                                {{else}}
                                    <button
                                        type="button"
                                        class="mr2"
                                        {{on "click" this.confirmEnableCommenting}}
                                        data-test-button="enable-commenting"
                                    >
                                        <span>Enable commenting</span>
                                    </button>
                                {{/if}}
                            </li>
                            <li>
                                <button
                                    type="button"
                                    class="mr2"
                                    {{on "click" this.confirmDeleteMember}}
                                    data-test-button="delete-member"
                                >
                                    <span class="red">Delete member</span>
                                </button>
                            </li>
                        </GhDropdown>
                    </span>
                {{/unless}}
            {{/if}}

            <GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
        </section>
    </GhCanvasHeader>

    <div>
        <form class="member-basic-info-form">
            <GhMemberSettingsForm
                @member={{this.member}}
                @scratchMember={{this.scratchMember}}
                @setProperty={{this.setProperty}}
                @onLabelEdit={{this.editLabel}}
                @saveMember={{this.save}}
                @isSaveRunning={{this.saveTask.isRunning}}
                @isLoading={{this.isLoading}}
                @onEnableCommenting={{this.confirmEnableCommenting}} />
        </form>
    </div>
</section>

{{#if this.showImpersonateMemberModal}}
    <GhFullscreenModal
        @modal="impersonate-member"
        @model={{this.member}}
        @close={{this.toggleImpersonateMemberModal}}
        @modifier="action wide" />
{{/if}}

{{#if this.showLabelModal}}
    <GhFullscreenModal
        @modal="members-label-form"
        @model={{this.labelModalData}}
        @close={{this.toggleLabelModal}}
        @modifier="action wide"
    />
{{/if}}
