<ng-container *transloco="let t; prefix: 'layout.uploadDialog'">
<div class="upload-dialog-content">
  <div class="upload-section">
    <div class="file-selector">
      <label class="file-label">{{ t('chooseFile') }}</label>
      <p-button
        [label]="t('selectImage')"
        icon="pi pi-upload"
        (click)="fileInput.click()"
        outlined
        severity="info">
      </p-button>
    </div>
    <input
      #fileInput
      type="file"
      accept=".jpg,.jpeg,.png,image/jpeg,image/png"
      (change)="onFileSelected($event)"
      style="display: none;">
    <small class="file-note">{{ t('fileNote') }}</small>
    @if (uploadFile) {
      <small class="selected-file">{{ uploadFile.name }}</small>
    }
  </div>

  <p-divider align="center" type="solid">
    <span class="or-text">{{ t('or') }}</span>
  </p-divider>

  <div class="url-section">
    <label for="urlInput" class="url-label">{{ t('imageUrl') }}</label>
    <input
      id="urlInput"
      type="text"
      [(ngModel)]="uploadImageUrl"
      [placeholder]="t('urlPlaceholder')"
      class="url-input"
      pInputText>
    <small class="url-note">{{ t('urlNote') }}</small>
  </div>

  @if (uploadError) {
    <p-message severity="error">{{uploadError}}</p-message>
  }

  <div class="dialog-footer">
    <p-button
      [label]="'common.cancel' | transloco"
      icon="pi pi-times"
      (click)="cancel()"
      severity="secondary"
      outlined>
    </p-button>
    <p-button
      [label]="'common.submit' | transloco"
      icon="pi pi-check"
      (click)="submit()">
    </p-button>
  </div>
</div>
</ng-container>
