zulip/web/templates/user_profile_modal.hbs

<div class="micromodal" id="user-profile-modal" data-user-id="{{user_id}}" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1">
        <div class="modal__container new-style" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
            <div class="modal__header">
                {{#unless is_bot}}
                <div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
                    <span class="{{user_circle_class}} user_circle user_profile_presence"></span>
                </div>
                {{/unless}}
                <h1 class="modal__title user_profile_name_heading" id="name">
                    <span class="user_profile_name">{{full_name}}</span>
                    {{#if is_bot}}
                    <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                    {{/if}}
                    {{#if is_me}}
                    <a href="/#settings/profile" class="user_profile_edit_button">
                        <i class="fa fa-edit" id="user_profile_edit_button_icon" aria-hidden="true"></i>
                    </a>
                    {{/if}}
                </h1>
                <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
            </div>
            <div id="tab-toggle" class="center"></div>
            <main class="modal__body" id="body" data-simplebar data-simplebar-auto-hide="false">
                <div class="tab-data">
                    <div class="tabcontent active" id="profile-tab">
                        <div class="top">
                            <div class="col-wrap col-left">
                                <div id="default-section">
                                    {{#if email}}
                                    <div id="email" class="default-field">
                                        <div class="name">{{t "Email" }}</div>
                                        <div class="value">{{email}}</div>
                                    </div>
                                    {{/if}}
                                    <div id="user-id" class="default-field">
                                        <div class="name">{{t "User ID" }}</div>
                                        <div class="value">{{user_id}}</div>
                                    </div>
                                    <div id="user-type" class="default-field">
                                        <div class="name">{{t "Role" }}</div>
                                        {{#if is_bot}}
                                            {{#if is_system_bot}}
                                            <div class="value">{{t "System bot" }}</div>
                                            {{else}}
                                            <div class="value">{{t "Bot" }}</div>
                                            {{/if}}
                                        {{else}}
                                            <div class="value">{{user_type}}</div>
                                        {{/if}}
                                    </div>
                                    <div id="date-joined" class="default-field">
                                        <div class="name">{{t "Joined" }}</div>
                                        <div class="value">{{date_joined}}</div>
                                    </div>
                                    {{#if user_time}}
                                    <div class="default-field">
                                        <div class="name">{{t "Local time" }}</div>
                                        <div class="value">{{user_time}}</div>
                                    </div>
                                    {{/if}}
                                </div>
                            </div>
                            <div class="col-wrap col-right">
                                <div id="avatar" {{#if user_is_guest}} class="guest-avatar" {{/if}}
                                  style="background-image: url('{{user_avatar}}');">
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div id="content">
                                {{#if is_bot}}
                                    <div class="field-section">
                                        <div class="name">{{t "Bot type" }}</div>
                                        <div class="bot_info_value">{{bot_type}}</div>
                                    </div>
                                    {{#if bot_owner}}
                                    <div class="field-section bot_owner_user_field" data-field-id="{{bot_owner.user_id}}">
                                        <div class="name">{{t "Owner" }}</div>
                                        <div class="pill-container not-editable">
                                            <div class="input" contenteditable="false" style="display: none;"></div>
                                        </div>
                                    </div>
                                    {{/if}}
                                {{else}}
                                    {{> user_custom_profile_fields profile_fields=profile_data}}
                                {{/if}}
                            </div>
                        </div>
                    </div>

                    <div class="tabcontent" id="user-profile-streams-tab">
                        <div class="alert stream_list_info"></div>
                        {{#if show_user_subscribe_widget}}
                            <div class="header-section">
                                <h3 class="stream-tab-element-header">{{t 'Subscribe {full_name} to streams'}}</h3>
                            </div>
                            {{> user_profile_subscribe_widget}}
                        {{/if}}
                        <div class="stream-list-top-section">
                            <div class="header-section">
                                <h3 class="stream-tab-element-header">{{t 'Subscribed streams' }}</h3>
                            </div>
                            <input type="text" class="stream-search modal_text_input" placeholder="{{t 'Filter streams' }}" />
                            <button type="button" class="clear_search_button" id="clear_stream_search">
                                <i class="fa fa-remove" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="subscription-stream-list">
                            <table class="user-stream-list" data-empty="{{t 'No stream subscriptions.'}}"></table>
                        </div>
                    </div>

                    <div class="tabcontent" id="user-profile-groups-tab">
                        <div class="subscription-group-list">
                            <table class="user-group-list" data-empty="{{t 'No user group subscriptions.'}}"></table>
                        </div>
                    </div>
                    <div class="tabcontent" id="manage-profile-tab"></div>
                </div>
            </main>
            <footer class="modal__footer">
                <button type="button" class="modal__btn dialog_exit_button" aria-label="{{t 'Close this dialog window' }}" data-micromodal-close>{{t "Cancel" }}</button>
                <button type="button" class="modal__btn dialog_submit_button">
                    <span>{{t "Save changes"}}</span>
                    <div class="modal__spinner"></div>
                </button>
            </footer>
        </div>
    </div>
</div>