@if ((isLoading$ | async) == true) {
    <mat-spinner></mat-spinner>
} 
@else {
    @if (publication) {
        <form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
            <header>
                <h1>Modification de l'article {{ publication.title }}</h1>
            </header>

            <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
                <mat-tab label="Edition">
                    <div class="form-content">
                        <div class="first-part">
                            <div>
                                <mat-form-field>
                                    <mat-label>Title</mat-label>
                                    <input matInput type="text" formControlName="title" />
                                </mat-form-field>
                                <mat-form-field>
                                    <mat-label>Description</mat-label>
                                    <input matInput type="text" formControlName="description" />
                                </mat-form-field>
                            </div>
        
                            <div class="picture-container">
                                <img src="/api/pictures/{{publication.illustrationId}}" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
                            </div>
                        </div>
    
                        <div class="actions">
                            <button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)">
                                H1
                            </button>
                            <button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)">
                                H2
                            </button>
                            <button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(3)">
                                H3
                            </button>
                            <button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()">
                                <mat-icon>image</mat-icon>
                            </button>
                            <button type="button" matTooltip="Click to insert a link" (click)="insertLink()">
                                <mat-icon>link</mat-icon>
                            </button>
                            <button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()">
                                <mat-icon>code</mat-icon>
                            </button>
                            <button type="button" disabled matTooltip="Click to display editor help">
                                <mat-icon>help</mat-icon>
                            </button>
                        </div>
                        <mat-form-field class="example-form-field">
                            <mat-label>Content</mat-label>
                            <textarea 
                                #textArea
                                matInput
                                formControlName="text"
                                class="text-input"
                                (keyup)="updateCursorPosition($event)"
                                (click)="updateCursorPosition($event)">
                            </textarea>
                        </mat-form-field>
                    </div>
                </mat-tab>

                <mat-tab label="Previewing">
                    <div class="preview">
                        @if ((isPreviewing$ | async) === true) {
                            <h2>Preview is loading...</h2>
                            <mat-spinner></mat-spinner>
                        } @else {
                            <img class="illustration" src="/pictures/{{ publication.illustrationId }}" />
                            <header>
                                <h1>{{ publication.title }}</h1>
                                <h2>{{ publication.description }}</h2>
                            </header>
                            <main [innerHTML]="publication.parsedText"></main>
                        }
                    </div>
                </mat-tab>
            </mat-tab-group>
            <footer>
                <app-submit-button label="Save" [requestPending]="(isSaving$ | async) == true"></app-submit-button>
                <button type="button" class="secondary" (click)="goPreviousLocation()">
                    Cancel
                </button>
            </footer>
        </form>
    }
    @else {
        <div class="loading-failed">
            <h1>Publication failed to load...</h1>
        </div>
    }
}