<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    <ion-button *ngIf="glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
        [attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
        <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true"></ion-icon>
    </ion-button>

    <ion-button *ngIf="glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
        <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
    </ion-button>

    <core-context-menu>
        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
            (action)="expandDescription()" iconAction="fas-arrow-right">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
            (action)="gotoBlog()">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="loaded && !(hasOffline || hasOfflineRatings) && isOnline" [priority]="700"
            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="loaded && (hasOffline || hasOfflineRatings) && isOnline" [priority]="600"
            (action)="doRefresh(null, $event, true)" [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon"
            [closeOnClick]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="canAdd" [priority]="550" [content]="'addon.mod_glossary.addentry' | translate"
            (action)="openNewEntry()" iconAction="fas-plus">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)"
            [iconAction]="prefetchStatusIcon" [closeOnClick]="false">
        </core-context-menu-item>
        <core-context-menu-item *ngIf="size" [priority]="400" [content]="'core.clearstoreddata' | translate:{$a: size}"
            iconDescription="fas-archive" (action)="removeFiles($event)" iconAction="fas-trash" [closeOnClick]="false">
        </core-context-menu-item>
    </core-context-menu>

    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.course.modulesummary' | 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]="!loaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

    <core-search-box *ngIf="isSearch" (onSubmit)="search($event)" [placeholder]="'addon.mod_glossary.searchquery' | translate"
        [autoFocus]="true" [lengthCheck]="2" (onClear)="toggleSearch()" searchArea="AddonModGlossary-{{module.id}}">
    </core-search-box>

    <core-loading [hideUntil]="loaded">
        <!-- Activity info. -->
        <core-course-module-info *ngIf="!isSearch" [module]="module" [description]="description" [component]="component"
            [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings">
        </core-course-module-info>

        <ion-list *ngIf="!isSearch && entries && entries.offlineEntries.length > 0">
            <ion-item-divider>
                <ion-label>
                    <h2>{{ 'addon.mod_glossary.entriestobesynced' | translate }}</h2>
                </ion-label>
            </ion-item-divider>
            <ion-item *ngFor="let entry of entries.offlineEntries" (click)="entries.select(entry)" detail="false" button
                [attr.aria-current]="entries.getItemAriaCurrent(entry)">
                <ion-label>
                    <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
                        [courseId]="courseId">
                    </core-format-text>
                </ion-label>
            </ion-item>
        </ion-list>

        <ion-list *ngIf="entries && entries.onlineEntries.length > 0">
            <ng-container *ngFor="let entry of entries.onlineEntries; let index = index">
                <ion-item-divider *ngIf="getDivider && showDivider(entry, entries.onlineEntries[index - 1])">
                    <ion-label>
                        <h2>{{ getDivider!(entry) }}</h2>
                    </ion-label>
                </ion-item-divider>

                <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)" detail="false">
                    <ion-label>
                        <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
                            [courseId]="courseId">
                        </core-format-text>
                    </ion-label>
                </ion-item>
            </ng-container>
        </ion-list>

        <core-empty-box *ngIf="(!entries || entries.empty) && (!isSearch || hasSearched)" icon="fas-list"
            [message]="'addon.mod_glossary.noentriesfound' | translate">
        </core-empty-box>

        <core-infinite-loading [enabled]="entries && !entries.completed" [error]="loadMoreError" (action)="loadMoreEntries($event)">
        </core-infinite-loading>
    </core-loading>

    <core-course-module-navigation [hidden]="!loaded" [courseId]="courseId" [currentModule]="module"
        (completionChanged)="onCompletionChange()">
    </core-course-module-navigation>

    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd">
        <ion-fab-button (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
            <span class="sr-only">{{ 'addon.mod_glossary.addentry' | translate }}</span>
        </ion-fab-button>
    </ion-fab>
</core-split-view>