<div class="dialog-container">
  <h2 mat-dialog-title>{{ data.isCreating ? 'Add Content to' : 'Edit Content for' }} {{ data.name }}</h2>
  <div mat-dialog-content class="dialog-content">
    <div class="content-list">
      <div *ngFor="let content of contents; let i = index" class="content-item">
        <div class="content-header">
          <select [(ngModel)]="content.content.type" (change)="onTypeChange(i)" class="content-type-select">
            <option value="TEXT">Text Information</option>
            <option value="IMAGE">Image Upload</option>
            <option value="VIDEO">Video URL</option>
            <option value="LINK">External Link</option>
          </select>
          <button mat-icon-button (click)="removeContent(i)" class="remove-btn" title="Remove">
            <span>✖</span>
          </button>
        </div>

        <!-- Text Input -->
        <textarea
          *ngIf="content.content.type === 'TEXT'"
          [(ngModel)]="content.content.value"
          placeholder="Enter descriptive text or information about this location..."
          class="content-input"
          rows="4"
        ></textarea>

        <!-- Image Upload -->
        <div *ngIf="content.content.type === 'IMAGE'">
          <div class="file-input-wrapper">
            <label class="file-input-label">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
              <span>{{ content.fileName || 'Choose Image File' }}</span>
              <input type="file" accept="image/*" (change)="onFileSelected($event, i)">
            </label>
          </div>
          <div class="file-name" *ngIf="content.fileName">{{ content.fileName }}</div>
          <div class="image-preview" *ngIf="content.content.value">
            <img [src]="content.content.value" alt="Preview">
          </div>
        </div>

        <!-- Video URL -->
        <input
          *ngIf="content.content.type === 'VIDEO'"
          [(ngModel)]="content.content.value"
          placeholder="Enter video URL (YouTube, Vimeo, etc.)"
          class="content-input"
        />

        <!-- Link URL -->
        <div *ngIf="content.content.type === 'LINK'">
          <input
            [(ngModel)]="content.content.value"
            placeholder="Enter external link URL (https://...)"
            class="content-input"
          />
        </div>
      </div>
    </div>
    <button mat-raised-button (click)="addContent()" class="add-btn">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
      </svg>
      Add Content Item
    </button>
  </div>
  <div mat-dialog-actions class="dialog-actions">
    <button mat-button (click)="onCancel()">Cancel</button>
    <button mat-raised-button color="primary" (click)="onSave()">Save</button>
  </div>
</div>
