squidex/frontend/app/features/content/pages/content/content-page.component.html

<sqx-title [message]="schema.displayName"></sqx-title>

<form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()">
    <sqx-panel desiredWidth="*" minWidth="60rem" [showSidebar]="!!content" grid="true" (close)="back()">
        <ng-container title>
            <a class="btn btn-text" (click)="back()" *ngIf="!schema.isSingleton">
                <i class="icon-angle-left"></i>
            </a>

            <ng-container *ngIf="!content">
                <sqx-title message="i18n:contents.createPageTitle"></sqx-title>

                {{ 'contents.createTitle' | sqxTranslate }}
            </ng-container>
        </ng-container>
        
        <ng-container header>
            <ng-container *ngIf="content">
                <sqx-title message="i18n:contents.editPageTitle"></sqx-title>

                <ul class="nav nav-tabs2" *ngIf="contentTab | async; let tab">
                    <li class="nav-item">
                        <a class="nav-link" [routerLink]="[]" [queryParams]="{ tab: 'editor' }" [class.active]="tab === 'editor'">
                            {{ 'contents.contentTab.editor' | sqxTranslate }}
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" [routerLink]="[]" [queryParams]="{ tab: 'references' }" [class.active]="tab === 'references'">
                            {{ 'contents.contentTab.references' | sqxTranslate }}
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" [routerLink]="[]" [queryParams]="{ tab: 'referencing' }" [class.active]="tab === 'referencing'">
                            {{ 'contents.contentTab.referencing' | sqxTranslate }}
                        </a>
                    </li>
                </ul>
            </ng-container>
        </ng-container>
 
        <ng-container menu>
            <ng-container *ngIf="content; else noContent">
                <sqx-notifo topic="apps/{{contentsState.appId}}/schemas/{{schema?.name}}/contents/{{content.id}}"></sqx-notifo>

                <ng-container *ngIf="contentTab | async; let tab">
                    <ng-container *ngIf="tab !== 'editor'">
                        <button type="button" class="btn btn-primary ml-1" (click)="publish()">
                            {{ 'contents.publishAll' | sqxTranslate }}
                        </button>
    
                        <button type="button" class="btn btn-primary ml-1" (click)="validate()">
                            {{ 'contents.validate' | sqxTranslate }}
                        </button>
                    </ng-container>

                    <ng-container *ngIf="tab === 'editor'">
                        <sqx-preview-button [schema]="schema" [content]="content"></sqx-preview-button>

                        <ng-container *ngIf="content?.canDelete">
                            <button type="button" class="btn btn-outline-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpenChanges | async" #buttonOptions>
                                <i class="icon-dots"></i>
                            </button>

                            <ng-container *sqxModal="dropdown;closeAlways:true">
                                <div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" @fade>
                                    <a class="dropdown-item dropdown-item-delete"
                                        (sqxConfirmClick)="delete()"
                                        confirmTitle="i18n:contents.deleteConfirmTitle"
                                        confirmText="i18n:contents.deleteConfirmText"
                                        confirmRememberKey="deleteContent">
                                        {{ 'common.delete' | sqxTranslate }}
                                    </a>
                                </div>
                            </ng-container>
                        </ng-container>

                        <ng-container *ngIf="content?.canUpdate">
                            <button type="submit" class="btn btn-primary ml-1" title="i18n:common.saveShortcut">
                                {{ 'common.save' | sqxTranslate }}
                            </button>
        
                            <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>

            <ng-template #noContent>
                <button type="button" class="btn btn-secondary" (click)="save()" *ngIf="contentsState.canCreate | async">
                    {{ 'common.save' | sqxTranslate }}
                </button>

                <button type="submit" class="btn btn-primary ml-1" title="i18n:common.saveShortcut" *ngIf="contentsState.canCreateAndPublish | async">
                    {{ 'contents.saveAndPublish' | sqxTranslate }}
                </button>

                <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
            </ng-template>

            <sqx-form-error bubble="true" closeable="true" [error]="contentForm.error | async"></sqx-form-error>
        </ng-container>

        <ng-container content>
            <ng-container *ngIf="content; else noContentEditor">
                <ng-container [ngSwitch]="contentTab | async">
                    <ng-container *ngSwitchCase="'references'">
                        <sqx-content-references mode="references"
                            [content]="content">
                        </sqx-content-references>
                    </ng-container>
                    <ng-container *ngSwitchCase="'referencing'">
                        <sqx-content-references mode="referencing"
                            [content]="content">
                        </sqx-content-references>
                    </ng-container>
                    <ng-container *ngSwitchDefault>
                        <sqx-content-editor
                            [(language)]="language"
                            [contentForm]="contentForm"
                            [contentFormCompare]="contentFormCompare"
                            [formContext]="formContext"
                            [languages]="languages"
                            [schema]="schema">
                        </sqx-content-editor>
                    </ng-container>
                </ng-container>
            </ng-container>

            <ng-template #noContentEditor>
                <sqx-content-editor
                    [(language)]="language"
                    [contentForm]="contentForm"
                    [contentFormCompare]="contentFormCompare"
                    [formContext]="formContext"
                    [languages]="languages"
                    [schema]="schema">
                </sqx-content-editor>
            </ng-template>
        </ng-container>

        <ng-container sidebar>
            <div class="panel-nav">
                <a class="panel-link" routerLink="history" routerLinkActive="active" queryParamsHandling="preserve" title="i18n:common.workflow" titlePosition="left" #linkHistory>
                    <i class="icon-time"></i>
                </a>

                <a class="panel-link" routerLink="comments" routerLinkActive="active" queryParamsHandling="preserve" title="i18n:common.comments" titlePosition="left">
                    <i class="icon-comments"></i>
                </a>
                
                <a class="panel-link" routerLink="sidebar" routerLinkActive="active" queryParamsHandling="preserve" title="i18n:common.sidebar" titlePosition="left" *ngIf="schema.properties.contentSidebarUrl">
                    <i class="icon-plugin"></i>
                </a>

                <sqx-onboarding-tooltip helpId="history" [for]="linkHistory" position="left-top" after="120000">
                    {{ 'common.sidebarTour' | sqxTranslate }}
                </sqx-onboarding-tooltip>
            </div>
        </ng-container>
    </sqx-panel>
</form>

<router-outlet></router-outlet>