</div>
                        <div t-if="state.composerType === 'kudos'" class="o_my_company_composer_extra">
                            <select class="form-select form-select-sm" t-model.number="state.kudosRecipientId">
                                <option value="0">Give kudos to...</option>
                                <t t-foreach="state.users" t-as="u" t-key="u.id">
                                    <option t-att-value="u.id" t-esc="u.name"/>
                                </t>
                            </select>
                        </div>
                        <input type="text"
                               class="form-control form-control-sm o_my_company_composer_extra"
                               placeholder="Title (optional)"
                               t-model="state.composerTitle"/>
                        <div t-if="state.pendingImages.length" class="o_my_company_pending_images">
                            <t t-foreach="state.pendingImages" t-as="img" t-key="img.id">
                                <span class="badge text-bg-light me-1" t-esc="img.name"/>
                            </t>
                        </div>
                        <div class="o_my_company_composer_actions">
                            <div class="o_my_company_composer_types">
                                <label class="o_my_company_action_btn mb-0">
                                    <i class="fa fa-image text-success"/> Photo
                                    <input type="file" accept="image/*" multiple="multiple"
                                           class="d-none" t-on-change="onImageSelect"/>
                                </label>
                                <button type="button"
                                        t-att-class="'o_my_company_action_btn ' + (state.composerType === 'kudos' ? 'active' : '')"
                                        t-on-click="() => this.setComposerType('kudos')">
                                    <i class="fa fa-star text-warning"/> Kudos
                                </button>
                                <button type="button"
                                        t-att-class="'o_my_company_action_btn ' + (state.composerType === 'announcement' ? 'active' : '')"
                                        t-on-click="() => this.setComposerType('announcement')">
                                    <i class="fa fa-bullhorn text-primary"/> Announcement
                                </button>
                            </div>
                            <button type="button" class="btn btn-primary btn-sm"
                                    t-att-disabled="state.isPosting"
                                    t-on-click="onSubmitPost">
                                <t t-if="state.isPosting">Posting...</t>
                                <t t-else="">Post</t>
                            </button>
                        </div>
                    </div>

<div class="o_my_company_posts">
                        <t t-if="state.isLoading">
                            <div class="o_my_company_empty">Loading feed...</div>
                        </t>
                        <t t-elif="!filteredPosts.length">
                            <div class="o_my_company_empty">
                                <t t-if="state.feedSearch">No posts match your search.</t>
                                <t t-else="">No posts yet. Be the first to share something!</t>
                            </div>
                        </t>
                        <t t-else="">
                            <t t-foreach="filteredPosts" t-as="post" t-key="post.id">
                                <article t-att-class="'o_my_company_post ' + (post.is_pinned ? 'o_my_company_post--pinned' : '')">
                                    <div class="o_my_company_post_header">
                                        <img t-att-src="post.author_avatar" class="o_my_company_avatar" t-att-alt="post.author_name"/>
                                        <div class="flex-grow-1">
                                            <strong t-esc="post.author_name"/>
                                            <span t-if="post.post_type === 'kudos'" class="o_my_company_badge o_my_company_badge--kudos">
                                                Kudos → <t t-esc="post.kudos_recipient_name"/>
                                            </span>
                                            <span t-elif="post.post_type === 'announcement'" class="o_my_company_badge o_my_company_badge--announcement">Announcement</span>
                                            <div class="o_my_company_meta" t-esc="formatDate(post.create_date)"/>
                                        </div>
                                        <span t-if="post.is_pinned" class="o_my_company_badge">Pinned</span>
                                    </div>
                                    <h5 t-if="post.name" class="o_my_company_post_title" t-esc="post.name"/>
                                    <div t-if="post.body" class="o_my_company_post_body" t-out="renderHtml(post.body)"/>
                                    <div t-if="post.images.length"
                                         t-att-class="'o_my_company_post_images' + (post.images.length === 1 ? ' o_my_company_post_images--single' : '')">
                                        <t t-foreach="post.images" t-as="img" t-key="img.id">
                                            <img t-att-src="img.url" t-att-alt="img.name" class="o_my_company_post_image"/>
                                        </t>
                                    </div>
                                    <div t-if="post.tagged_partner_names.length || post.department_names.length"
                                         class="o_my_company_post_tags">
                                        <t t-if="post.tagged_partner_names.length">
                                            Tagged: <t t-esc="post.tagged_partner_names.join(', ')"/>
                                        </t>
                                        <t t-if="post.department_names.length">
                                            <span t-if="post.tagged_partner_names.length"> · </span>
                                            Teams: <t t-esc="post.department_names.join(', ')"/>
                                        </t>
                                    </div>
                                    <div class="o_my_company_comments">
                                        <t t-foreach="post.comments" t-as="comment" t-key="comment.id">
                                            <div class="o_my_company_comment">
                                                <img t-if="comment.author_avatar"
                                                     t-att-src="comment.author_avatar"
                                                     class="o_my_company_avatar o_my_company_avatar--xs"/>
                                                <div class="o_my_company_comment_body">
                                                    <strong t-esc="comment.author_name"/>
                                                    <span class="o_my_company_meta ms-1" t-esc="formatDate(comment.date)"/>
                                                    <div t-out="renderHtml(comment.body)"/>
                                                </div>
                                            </div>
                                        </t>
                                        <div class="o_my_company_comment_form">
                                            <img t-att-src="currentUserAvatar" class="o_my_company_avatar o_my_company_avatar--xs"/>
                                            <input type="text" class="form-control form-control-sm"
                                                   placeholder="Write a comment..."
                                                   t-on-keydown="(ev) => this.onCommentKeydown(ev, post)"/>
                                        </div>
                                    </div>
                                </article>
                            </t>
                        </t>
                    </div>
                </div>
            </main>

<div class="o_my_company_resize_handle"
                 t-att-class="state.isResizing === 'right' ? 'o_my_company_resize_handle--active' : ''"
                 t-on-mousedown="(ev) => this.onResizeStart('right', ev)"
                 title="Drag to resize panels"/>

<aside class="o_my_company_col o_my_company_col--right">
                <div t-if="state.birthdays.length" class="o_my_company_widget">
                    <div class="o_my_company_widget_header">
                        <i class="fa fa-gift"/> Birthdays
                    </div>
                    <t t-foreach="state.birthdays" t-as="bday" t-key="bday.user_id">
                        <button type="button" class="o_my_company_contact_btn"
                                t-on-click="() => this.onChatClick({ id: bday.user_id })">
                            <img t-att-src="bday.avatar" class="o_my_company_avatar o_my_company_avatar--sm" t-att-alt="bday.name"/>
                            <div class="o_my_company_contact_info">
                                <span class="o_my_company_contact_name" t-esc="bday.name"/>
                                <span t-att-class="'o_my_company_bday_label ' + (bday.is_today ? 'o_my_company_bday_label--today' : '')"
                                      t-esc="bday.label"/>
                            </div>
                        </button>
                    </t>
                </div>

<div class="o_my_company_widget">
                    <div class="o_my_company_widget_header">
                        <span><i class="fa fa-comments"/> Contacts</span>
                    </div>
                    <div class="o_my_company_search_bar o_my_company_search_bar--compact">
                        <i class="fa fa-search o_my_company_search_icon"/>
                        <input type="search"
                               class="form-control form-control-sm"
                               placeholder="Search contacts"
                               t-model="state.chatSearch"/>
                    </div>
                    <div class="o_my_company_contacts">
                        <t t-foreach="filteredUsers" t-as="user" t-key="user.id">
                            <button type="button" class="o_my_company_contact_btn"
                                    t-on-click="() => this.onChatClick(user)">
                                <span class="o_my_company_avatar_wrap">
                                    <img t-att-src="user.avatar" class="o_my_company_avatar o_my_company_avatar--sm" t-att-alt="user.name"/>
                                    <span t-att-class="'o_my_company_status o_my_company_status--' + user.im_status"/>
                                </span>
                                <div class="o_my_company_contact_info">
                                    <span class="o_my_company_contact_name" t-esc="user.name"/>
                                    <span t-if="user.job_title" class="o_my_company_contact_sub" t-esc="user.job_title"/>
                                </div>
                            </button>
                        </t>
                        <div t-if="!filteredUsers.length" class="o_my_company_empty o_my_company_empty--compact">
                            No contacts found.
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </t>

</templates>