pulse-signage/src/web/views/data-sources/rss-feeds/form.hbs

<div class="page-header">
  <div>
    <h2>{{#if isEdit}}Edit RSS feed - {{rssFeed.name}}{{else}}Add RSS feed{{/if}}</h2>
    <p>{{#if isEdit}}Adjust the source URL, refresh interval, or item count.{{else}}Capture a feed URL, refresh interval, and the number of items to store.{{/if}}</p>
  </div>
</div>

<form id="rss-feed-form" method="post" action="{{formAction}}" {{{formAttrs}}}>
  <div class="card card-outline card-primary admin-form-card">
    <div class="card-header">
      <h3 class="card-title">RSS feed details</h3>
    </div>
    <div class="card-body">
      <div class="mb-3">
        <label for="rss-feed-name" class="form-label">Name</label>
        <input id="rss-feed-name" name="name" class="form-control" value="{{rssFeed.name}}" maxlength="128" data-limit-text-length required />
      </div>
      <div class="mb-3">
        <label for="rss-feed-url" class="form-label">Feed URL</label>
        <input id="rss-feed-url" name="feed_url" type="url" class="form-control" value="{{rssFeed.feedUrl}}" maxlength="1024" data-limit-text-length placeholder="https://example.com/feed.xml" required />
      </div>
      <div class="row g-3">
        <div class="col-12 col-md-4">
          <label for="rss-feed-interval" class="form-label">Update interval</label>
          <input id="rss-feed-interval" name="update_interval_value" type="number" min="1" class="form-control" value="{{rssFeed.updateIntervalValue}}" required />
        </div>
        <div class="col-12 col-md-4">
          <label for="rss-feed-interval-unit" class="form-label">Unit</label>
          <select id="rss-feed-interval-unit" name="update_interval_unit" class="form-select">
            <option value="seconds" {{#if (eq rssFeed.updateIntervalUnit 'seconds')}}selected{{/if}}>Seconds</option>
            <option value="minutes" {{#if (eq rssFeed.updateIntervalUnit 'minutes')}}selected{{/if}}>Minutes</option>
            <option value="hours" {{#if (eq rssFeed.updateIntervalUnit 'hours')}}selected{{/if}}>Hours</option>
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label for="rss-feed-item-limit" class="form-label">Items pulled</label>
          <input id="rss-feed-item-limit" name="item_limit" type="number" min="1" class="form-control" value="{{rssFeed.itemLimit}}" required />
        </div>
      </div>
    </div>
    <div class="card-footer d-flex justify-content-end">
      {{{saveActionButtons formId="rss-feed-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteDisabled=deleteDisabled showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}
    </div>
  </div>
</form>

<div class="card card-outline card-secondary admin-form-card mt-4">
  <div class="card-header">
    <h3 class="card-title">Latest items</h3>
  </div>
  <div class="card-body">
    <div class="accordion" id="rss-feed-items-accordion">
      {{#if pullError}}
        <div class="accordion-item">
          <h2 class="accordion-header" id="rss-feed-items-heading-error">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#rss-feed-items-collapse-error" aria-expanded="true" aria-controls="rss-feed-items-collapse-error">
              Preview pulled feed items
            </button>
          </h2>
          <div id="rss-feed-items-collapse-error" class="accordion-collapse collapse show" aria-labelledby="rss-feed-items-heading-error" data-bs-parent="#rss-feed-items-accordion">
            <div class="accordion-body">
              <div class="alert alert-danger mb-0" role="alert">{{pullError}}</div>
            </div>
          </div>
        </div>
      {{else if pulledItems.length}}
        {{#each pulledItems}}
          <div class="accordion-item">
            <h2 class="accordion-header" id="rss-feed-item-heading-{{@index}}">
              <button class="accordion-button {{#unless @first}}collapsed{{/unless}}" type="button" data-bs-toggle="collapse" data-bs-target="#rss-feed-item-collapse-{{@index}}" aria-expanded="{{#if @first}}true{{else}}false{{/if}}" aria-controls="rss-feed-item-collapse-{{@index}}">
                {{#if title}}{{title}}{{else}}Item {{@index}}{{/if}}
              </button>
            </h2>
            <div id="rss-feed-item-collapse-{{@index}}" class="accordion-collapse collapse {{#if @first}}show{{/if}}" aria-labelledby="rss-feed-item-heading-{{@index}}" data-bs-parent="#rss-feed-items-accordion">
              <div class="accordion-body">
                <div class="table-responsive">
                  <table class="table table-sm table-striped align-middle mb-0">
                    <tbody>
                      <tr>
                        <th scope="row" class="text-nowrap" style="width: 10rem;">Title</th>
                        <td class="text-break">{{#if title}}{{title}}{{else}}-{{/if}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-nowrap">Link</th>
                        <td class="text-break">
                          {{#if link}}
                            <a href="{{link}}" target="_blank" rel="noreferrer">{{link}}</a>
                          {{else}}
                            -
                          {{/if}}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-nowrap">Published</th>
                        <td class="text-break">{{#if pubDate}}{{pubDate}}{{else}}-{{/if}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-nowrap">Description</th>
                        <td class="text-break">{{#if description}}{{description}}{{else}}-{{/if}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-nowrap">Author</th>
                        <td class="text-break">{{#if author}}{{author}}{{else}}-{{/if}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-nowrap">Guid</th>
                        <td class="text-break">{{#if guid}}{{guid}}{{else}}-{{/if}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-nowrap">Comments</th>
                        <td class="text-break">
                          {{#if comments}}
                            <a href="{{comments}}" target="_blank" rel="noreferrer">{{comments}}</a>
                          {{else}}
                            -
                          {{/if}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        {{/each}}
      {{else}}
        <div class="accordion-item">
          <h2 class="accordion-header" id="rss-feed-items-heading-empty">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rss-feed-items-collapse-empty" aria-expanded="false" aria-controls="rss-feed-items-collapse-empty">
              Preview pulled feed items
            </button>
          </h2>
          <div id="rss-feed-items-collapse-empty" class="accordion-collapse collapse" aria-labelledby="rss-feed-items-heading-empty" data-bs-parent="#rss-feed-items-accordion">
            <div class="accordion-body">
              <div class="text-muted">No feed items have been pulled yet.</div>
            </div>
          </div>
        </div>
      {{/if}}
    </div>
  </div>
</div>