<ars-row ars-flex-box>
  <ars-row>
    <div class="anchor-wrp">
      <div class="anchor-right">
        <mat-form-field *ngIf="tags" class="tag-form-field">
          <mat-label>{{'comment-page.tag' | translate}}</mat-label>
          <mat-select [(ngModel)]="selectedTag" class="tag-select">
            <mat-option *ngFor="let tag of tags" value="{{tag}}">
              {{tag}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <mat-tab-group>
      <mat-tab label="{{ 'comment-page.write-comment' | translate }}">
        <ars-row [height]="12"></ars-row>
        <ars-row>
          <mat-divider></mat-divider>
        </ars-row>
        <ars-row [height]="12"></ars-row>
        <ars-row [overflow]="'auto'"
                 style="max-height:calc( 100vh - 250px )">
          <mat-form-field style="width:100%;">
            <textarea (focus)="eventService.makeFocusOnInputTrue()"
                      style="margin-top:15px;width:100%;"
                      (blur)="eventService.makeFocusOnInputFalse()"
                      matInput #commentBody matTextareaAutosize
                      matAutosizeMinRows=5 matAutosizeMaxRows=10  maxlength="250"
                      [formControl]="bodyForm" aria-labelledby="ask-question-description">
            </textarea>
            <mat-placeholder class="placeholder">
              {{ 'comment-page.enter-comment' | translate }}
            </mat-placeholder>
            <mat-hint align="end">
              <span aria-hidden="true">
                {{commentBody.value.length}} / 250
              </span>
            </mat-hint>
          </mat-form-field>
        </ars-row>
      </mat-tab>
      <mat-tab label="{{ 'comment-page.preview-comment' | translate }}">
        <ars-row [height]="12"></ars-row>
        <ars-row>
          <mat-divider></mat-divider>
        </ars-row>
        <ars-row [height]="12"></ars-row>
        <ars-row [overflow]="'auto'" style="max-height:calc( 100vh - 250px )">
          <markdown [data]="commentBody.value"></markdown>
        </ars-row>
      </mat-tab>
    </mat-tab-group>
  </ars-row>
  <ars-row style="margin-top:8px">
    <mat-divider></mat-divider>
  </ars-row>
  <ars-row ars-flex-box>
    <ars-fill>
    </ars-fill>
    <ars-col>
      <app-dialog-action-buttons
        buttonsLabelSection="comment-page"
        confirmButtonLabel="send"
        [showDivider]="false"
        [spacing]="false"
        [cancelButtonClickAction]="buildCloseDialogActionCallback()"
        [confirmButtonClickAction]="buildCreateCommentActionCallback(commentBody)"
      ></app-dialog-action-buttons>
    </ars-col>
  </ars-row>
</ars-row>