<ion-header>
    <ion-toolbar>
        <ion-title>{{ 'addon.mod_forum.yourreply' | translate }}</ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <form #editFormEl>
        <ion-item>
            <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject" name="subject">
            </ion-input>
        </ion-item>
        <ion-item>
            <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
            <core-rich-text-editor elementId="message"
                [name]="'mod_forum_reply_' + replyData.id" [control]="messageControl"
                [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [autoSave]="true"
                [component]="component" [componentId]="componentId" [draftExtraParams]="{edit: replyData.id}"
                contextLevel="module" [contextInstanceId]="forum.cmid"
                (contentChanged)="onMessageChange($event)">
            </core-rich-text-editor>
        </ion-item>
        <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()" role="heading button"
            [attr.aria-expanded]="advanced" [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
            <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
            <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>{{ 'addon.mod_forum.advanced' | translate }}</ion-label>
        </ion-item-divider>
        <ng-container *ngIf="advanced">
            <core-attachments *ngIf="forum.id && forum.maxattachments > 0"
                [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [allowOffline]="true" [files]="replyData.files"
                [component]="component" [componentId]="forum.cmid">
            </core-attachments>
        </ng-container>
        <ion-grid>
            <ion-row>
                <ion-col>
                    <ion-button expand="block" (click)="reply($event)" [disabled]="replyData.subject == '' || replyData.message == null">
                        {{ 'core.savechanges' | translate }}
                    </ion-button>
                </ion-col>
                <ion-col>
                    <ion-button expand="block" color="light" (click)="closeModal()">{{ 'core.cancel' | translate }}</ion-button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </form>
</ion-content>
