@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>
                <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>
    
    
                        <mat-form-field class="example-form-field">
                            <mat-label>Content</mat-label>
                            <textarea matInput formControlName="text" class="text-input"></textarea>
                        </mat-form-field>
                    </div>
                </mat-tab>

                <mat-tab label="Previewing">

                </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>
    }
}