Vmeda.Online/src/addons/mod/forum/components/index/index.html

<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
        <ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
    </ion-button>
</core-navbar-buttons>

<!-- Content. -->
<core-split-view>
    <ion-refresher slot="fixed" [disabled]="showLoading || (discussions && !discussions.loaded)" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

    <core-loading [hideUntil]="!showLoading && discussions && discussions.loaded">
        <!-- Activity info. -->
        <core-course-module-info [module]="module" [description]="forum && forum.type != 'single' && description" [component]="component"
            [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings"
            (completionChanged)="onCompletionChange()">
            <ion-item class="ion-text-wrap">
                <ion-label>
                    {{descriptionNote}}
                </ion-label>
            </ion-item>
        </core-course-module-info>

        <!-- Cut-off date or due date message -->
        <ion-card class="core-info-card" *ngIf="availabilityMessage">
            <ion-item>
                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>{{ availabilityMessage }}</ion-label>
            </ion-item>
        </ion-card>

        <ng-container *ngIf="forum">
            <core-empty-box *ngIf="!discussions || discussions.empty" icon="far-comments"
                [message]="'addon.mod_forum.forumnodiscussionsyet' | translate">
            </core-empty-box>

            <div *ngIf="discussions && !discussions.empty && sortingAvailable && selectedSortOrder" class="ion-text-wrap">
                <core-combobox [modalOptions]="sortOrderSelectorModalOptions" listboxId="addon-mod-forum-sort-selector"
                    [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
                    interface="modal">
                </core-combobox>
            </div>

            <ion-item *ngFor="let discussion of discussionsItems" class="addon-mod-forum-discussion" detail="true"
                [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions?.getItemAriaCurrent(discussion)"
                (click)="discussions?.select(discussion)" button>
                <ion-label>
                    <div class="addon-mod-forum-discussion-title">
                        <p class="ion-text-wrap item-heading">
                            <ion-icon name="fas-map-pin" *ngIf="discussion.pinned"
                                [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
                            <ion-icon name="fas-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"
                                [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
                            <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
                                [courseId]="courseId">
                            </core-format-text>
                            <ion-icon name="fas-lock" *ngIf="discussion.locked" class="addon-mod-forum-locked-icon"
                                [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate"></ion-icon>
                        </p>
                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
                            [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)">
                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
                            </ion-icon>
                        </ion-button>
                    </div>
                    <div class="addon-mod-forum-discussion-info">
                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId">
                        </core-user-avatar>
                        <div class="addon-mod-forum-discussion-author">
                            <span *ngIf="discussion.userfullname">{{discussion.userfullname}}</span>
                            <p *ngIf="discussion.groupname" class="core-groupname">
                                <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate">
                                </ion-icon> {{ discussion.groupname }}
                            </p>
                            <p *ngIf="isOnlineDiscussion(discussion)">
                                {{discussion.created * 1000 | coreFormatDate: "strftimerecentfull"}}
                            </p>
                            <p *ngIf="isOfflineDiscussion(discussion)">
                                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
                                {{ 'core.notsent' | translate }}
                            </p>
                        </div>
                    </div>
                    <ion-row *ngIf="isOnlineDiscussion(discussion)" class="ion-text-center addon-mod-forum-discussion-more-info">
                        <ion-col class="ion-text-start">
                            <ion-note>
                                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'addon.mod_forum.lastpost' | translate }}
                                <ng-container *ngIf="discussion.timemodified > discussion.created">
                                    {{ discussion.timemodified | coreTimeAgo }}
                                </ng-container>
                                <ng-container *ngIf="discussion.timemodified <= discussion.created">
                                    {{ discussion.created | coreTimeAgo }}
                                </ng-container>
                            </ion-note>
                        </ion-col>
                        <ion-col class="ion-text-end">
                            <ion-note>
                                <ion-icon name="fas-comments" aria-hidden="true"></ion-icon>
                                {{ 'addon.mod_forum.numreplies' | translate:{numreplies: discussion.numreplies} }}
                                <ion-badge *ngIf="discussion.numunread" class="ion-text-center">
                                    <span aria-hidden="true">{{ discussion.numunread }}</span>
                                    <span class="sr-only">
                                        {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}
                                    </span>
                                </ion-badge>
                            </ion-note>
                        </ion-col>
                    </ion-row>
                </ion-label>
            </ion-item>

            <core-infinite-loading [enabled]="discussions && discussions.loaded && !discussions.completed" [error]="fetchFailed"
                (action)="fetchMoreDiscussions($event)">
            </core-infinite-loading>
        </ng-container>
    </core-loading>

    <core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
    </core-course-module-navigation>

    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="forum && canAddDiscussion">
        <ion-fab-button (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
            <span class="sr-only">{{ addDiscussionText }}</span>
        </ion-fab-button>
    </ion-fab>
</core-split-view>