kmtnflower/src/app/admin/admin-station-form.component.html

<div class="form-overlay" (click)="onClose()">
  <div class="form-dialog form-dialog--wide" (click)="$event.stopPropagation()">
    <div class="form-header">
      <h2>Edit Station Config</h2>
      <button type="button" class="btn-close" (click)="onClose()">&times;</button>
    </div>

    @if (error) {
      <div class="form-error" role="alert">{{ error }}</div>
    }
    @if (success) {
      <div class="form-success" role="alert">{{ success }}</div>
    }

    <form (ngSubmit)="onSubmit()" class="admin-form" #form="ngForm">

      <!-- Identity -->
      <div class="form-section">
        <h3>Identity</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="callsign">Callsign</label>
            <input id="callsign" type="text" [(ngModel)]="callsign" name="callsign" required>
          </div>
          <div class="form-group">
            <label for="frequency">Frequency</label>
            <input id="frequency" type="text" [(ngModel)]="frequency" name="frequency" placeholder="98.7 FM">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="name_primary">Primary Name</label>
            <input id="name_primary" type="text" [(ngModel)]="name_primary" name="name_primary" required>
          </div>
          <div class="form-group">
            <label for="name_secondary">Secondary Name</label>
            <input id="name_secondary" type="text" [(ngModel)]="name_secondary" name="name_secondary">
          </div>
        </div>
        <div class="form-group">
          <label for="tagline">Tagline</label>
          <input id="tagline" type="text" [(ngModel)]="tagline" name="tagline">
        </div>
        <div class="form-group">
          <label for="founded_year">Founded Year</label>
          <input id="founded_year" type="number" [(ngModel)]="founded_year" name="founded_year">
        </div>
      </div>

      <!-- Images -->
      <div class="form-section">
        <h3>Images</h3>
        <div class="form-group">
          <label for="logo_url">Logo URL</label>
          <div class="url-with-upload">
            <input id="logo_url" type="text" [(ngModel)]="logo_url" name="logo_url" placeholder="uploads/…">
            <label class="btn btn-upload">
              Upload
              <input type="file" accept="image/*" (change)="onImageUpload($event, 'logo_url')" [disabled]="loading">
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="hero_background_url">Hero Background URL</label>
          <div class="url-with-upload">
            <input id="hero_background_url" type="text" [(ngModel)]="hero_background_url" name="hero_background_url">
            <label class="btn btn-upload">
              Upload
              <input type="file" accept="image/*" (change)="onImageUpload($event, 'hero_background_url')" [disabled]="loading">
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="hero_icon_url">Hero Icon URL</label>
          <div class="url-with-upload">
            <input id="hero_icon_url" type="text" [(ngModel)]="hero_icon_url" name="hero_icon_url">
            <label class="btn btn-upload">
              Upload
              <input type="file" accept="image/*" (change)="onImageUpload($event, 'hero_icon_url')" [disabled]="loading">
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="hero_divider_url">Hero Divider URL</label>
          <div class="url-with-upload">
            <input id="hero_divider_url" type="text" [(ngModel)]="hero_divider_url" name="hero_divider_url">
            <label class="btn btn-upload">
              Upload
              <input type="file" accept="image/*" (change)="onImageUpload($event, 'hero_divider_url')" [disabled]="loading">
            </label>
          </div>
        </div>
      </div>

      <!-- Nonprofit -->
      <div class="form-section">
        <h3>Nonprofit</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="nonprofit_type">Nonprofit Type</label>
            <input id="nonprofit_type" type="text" [(ngModel)]="nonprofit_type" name="nonprofit_type" placeholder="501(c)(3)">
          </div>
          <div class="form-group">
            <label for="ein">EIN</label>
            <input id="ein" type="text" [(ngModel)]="ein" name="ein" placeholder="84-XXXXXXX">
          </div>
        </div>
      </div>

      <!-- Contact -->
      <div class="form-section">
        <h3>Contact</h3>
        <div class="form-group">
          <label for="address">Address</label>
          <textarea id="address" [(ngModel)]="address" name="address" rows="2"></textarea>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="phone">Phone</label>
            <input id="phone" type="text" [(ngModel)]="phone" name="phone">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input id="email" type="email" [(ngModel)]="email" name="email">
          </div>
        </div>
        <div class="form-group">
          <label for="website">Website</label>
          <input id="website" type="text" [(ngModel)]="website" name="website">
        </div>
      </div>

      <!-- Donation -->
      <div class="form-section">
        <h3>Donation</h3>
        <div class="form-group">
          <label for="donation_url">External Donation URL</label>
          <input id="donation_url" type="url" [(ngModel)]="donation_url" name="donation_url" placeholder="https://example.com/donate">
        </div>
      </div>

      <!-- Stream -->
      <div class="form-section">
        <h3>Stream</h3>
        <div class="form-group">
          <label for="stream_url">Stream URL (MP3)</label>
          <input id="stream_url" type="url" [(ngModel)]="stream_url" name="stream_url"
                 placeholder="https://example.com/stream.mp3">
        </div>
        <div class="form-group">
          <label for="stream_metadata_url">Live Metadata API URL</label>
          <input id="stream_metadata_url" type="url" [(ngModel)]="stream_metadata_url" name="stream_metadata_url"
                 placeholder="https://example.com/api/live-info">
        </div>
      </div>

      <!-- Mobile App -->
      <div class="form-section">
        <h3>Mobile App</h3>

        <h4>Google Play Store</h4>
        <div class="form-group">
          <label for="play_store_icon_url">Play Store Badge (PNG)</label>
          <div class="url-with-upload">
            <input id="play_store_icon_url" type="text" [(ngModel)]="play_store_icon_url" name="play_store_icon_url"
                   placeholder="uploads/…">
            <label class="btn btn-upload">
              Upload
              <input type="file" accept="image/png" (change)="onImageUpload($event, 'play_store_icon_url')" [disabled]="loading">
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="play_store_url">Play Store URL</label>
          <input id="play_store_url" type="url" [(ngModel)]="play_store_url" name="play_store_url"
                 placeholder="https://play.google.com/store/apps/details?id=…">
        </div>

        <h4>Apple App Store</h4>
        <div class="form-group">
          <label for="app_store_embed_html">App Store Embed HTML</label>
          <textarea id="app_store_embed_html" [(ngModel)]="app_store_embed_html" name="app_store_embed_html"
                    rows="6" placeholder="Paste the embed HTML from Apple Marketing Resources"></textarea>
        </div>
      </div>

      <!-- Social Media -->
      <div class="form-section">
        <h3>Social Media</h3>
        <div class="form-group">
          <label for="social_facebook">Facebook URL</label>
          <input id="social_facebook" type="url" [(ngModel)]="social_facebook" name="social_facebook"
                 placeholder="https://facebook.com/yourstation">
        </div>
        <div class="form-group">
          <label for="social_twitter">Twitter / X URL</label>
          <input id="social_twitter" type="url" [(ngModel)]="social_twitter" name="social_twitter"
                 placeholder="https://x.com/yourstation">
        </div>
        <div class="form-group">
          <label for="social_instagram">Instagram URL</label>
          <input id="social_instagram" type="url" [(ngModel)]="social_instagram" name="social_instagram"
                 placeholder="https://instagram.com/yourstation">
        </div>
        <div class="form-group">
          <label for="social_youtube">YouTube URL</label>
          <input id="social_youtube" type="url" [(ngModel)]="social_youtube" name="social_youtube"
                 placeholder="https://youtube.com/@yourstation">
        </div>
      </div>

      <!-- Page Content -->
      <div class="form-section">
        <h3>Page Content</h3>
        <div class="form-group">
          <label for="hero_subtitle">Hero Subtitle</label>
          <textarea id="hero_subtitle" [(ngModel)]="hero_subtitle" name="hero_subtitle" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label for="about_intro">About Page Intro</label>
          <textarea id="about_intro" [(ngModel)]="about_intro" name="about_intro" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label for="about_donation_text">About Page — Donation CTA</label>
          <textarea id="about_donation_text" [(ngModel)]="about_donation_text" name="about_donation_text" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label for="schedule_intro">Schedule Page Intro</label>
          <textarea id="schedule_intro" [(ngModel)]="schedule_intro" name="schedule_intro" rows="2"></textarea>
        </div>
        <div class="form-group">
          <label for="events_intro">Events Page Intro</label>
          <textarea id="events_intro" [(ngModel)]="events_intro" name="events_intro" rows="2"></textarea>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="btn btn-cancel" (click)="onClose()">Cancel</button>
        <button type="submit" class="btn btn-save" [disabled]="saving">
          {{ saving ? 'Saving…' : 'Save Config' }}
        </button>
      </div>
    </form>
  </div>
</div>