<div class="upload-dialog-content">
  <div class="upload-section">
    <div class="file-selector">
      <label class="file-label">Choose File:</label>
      <p-button
        label="Select Image"
        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">Supported formats: JPEG, PNG • Maximum file size: 5 MB</small>
    @if (uploadFile) {
      <small class="selected-file">{{ uploadFile.name }}</small>
    }
  </div>

  <p-divider align="center" type="solid">
    <span class="or-text">OR</span>
  </p-divider>

  <div class="url-section">
    <label for="urlInput" class="url-label">Image URL:</label>
    <input
      id="urlInput"
      type="text"
      [(ngModel)]="uploadImageUrl"
      placeholder="Paste image URL here"
      class="url-input"
      pInputText>
    <small class="url-note">Supported formats: JPEG, PNG • Maximum file size: 5 MB</small>
  </div>

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

  <div class="dialog-footer">
    <p-button
      label="Cancel"
      icon="pi pi-times"
      (click)="cancel()"
      severity="secondary"
      outlined>
    </p-button>
    <p-button
      label="Submit"
      icon="pi pi-check"
      (click)="submit()">
    </p-button>
  </div>
</div>
