indiekit-endpoint-blogroll/views/blogroll-source-edit.njk

{% extends "layouts/blogroll.njk" %}

{% block blogroll %}
  <form method="post" action="{% if isNew %}{{ baseUrl }}/sources{% else %}{{ baseUrl }}/sources/{{ source._id }}{% endif %}" class="blogroll-form">
    <div class="blogroll-field">
      <label class="label" for="name">{{ __("blogroll.sources.form.name") }}</label>
      <input class="input" type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
    </div>

    <div class="blogroll-field">
      <label class="label" for="type">{{ __("blogroll.sources.form.type") }}</label>
      <select class="select" id="type" name="type" required onchange="toggleTypeFields()">
        <option value="opml_url" {% if source.type == 'opml_url' %}selected{% endif %}>OPML URL (auto-sync)</option>
        <option value="opml_file" {% if source.type == 'opml_file' %}selected{% endif %}>OPML File (one-time import)</option>
        {% if microsubAvailable %}
        <option value="microsub" {% if source.type == 'microsub' %}selected{% endif %}>Microsub Subscriptions</option>
        {% endif %}
      </select>
      <span class="hint">{{ __("blogroll.sources.form.typeHint") }}</span>
    </div>

    <div class="blogroll-field" id="urlField">
      <label class="label" for="url">{{ __("blogroll.sources.form.url") }}</label>
      <input class="input" type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
      <span class="hint">{{ __("blogroll.sources.form.urlHint") }}</span>
    </div>

    <div class="blogroll-field" id="opmlContentField" style="display: none;">
      <label class="label" for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
      <textarea class="textarea" id="opmlContent" name="opmlContent" placeholder="<?xml version=&quot;1.0&quot;?>...">{{ source.opmlContent if source else '' }}</textarea>
      <span class="hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
    </div>

    <div class="blogroll-field" id="microsubChannelField" style="display: none;">
      <label class="label" for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
      <select class="select" id="channelFilter" name="channelFilter">
        <option value="">All channels</option>
        {% for channel in microsubChannels %}
        <option value="{{ channel.uid }}" {% if source.channelFilter == channel.uid %}selected{% endif %}>{{ channel.name }}</option>
        {% endfor %}
      </select>
      <span class="hint">{{ __("blogroll.sources.form.microsubChannelHint") | default("Sync feeds from a specific channel, or all channels") }}</span>
    </div>

    <div class="blogroll-field" id="categoryPrefixField" style="display: none;">
      <label class="label" for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
      <input class="input" type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
      <span class="hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
    </div>

    <div class="blogroll-field">
      <label class="label" for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
      <select class="select" id="syncInterval" name="syncInterval">
        <option value="30" {% if source.syncInterval == 30 %}selected{% endif %}>30 minutes</option>
        <option value="60" {% if not source or source.syncInterval == 60 %}selected{% endif %}>1 hour</option>
        <option value="180" {% if source.syncInterval == 180 %}selected{% endif %}>3 hours</option>
        <option value="360" {% if source.syncInterval == 360 %}selected{% endif %}>6 hours</option>
        <option value="720" {% if source.syncInterval == 720 %}selected{% endif %}>12 hours</option>
        <option value="1440" {% if source.syncInterval == 1440 %}selected{% endif %}>24 hours</option>
      </select>
    </div>

    <div class="blogroll-field blogroll-field--inline">
      <input type="checkbox" id="enabled" name="enabled" {% if not source or source.enabled %}checked{% endif %}>
      <label for="enabled">{{ __("blogroll.sources.form.enabled") }}</label>
    </div>

    <div class="blogroll-actions">
      {{ button({ type: "submit", text: __("blogroll.sources.create") if isNew else __("blogroll.sources.save") }) }}
      {{ button({ href: baseUrl + "/sources", text: __("blogroll.cancel"), classes: "button--secondary" }) }}
    </div>
  </form>

<script>
function toggleTypeFields() {
  const type = document.getElementById('type').value;
  const urlField = document.getElementById('urlField');
  const opmlContentField = document.getElementById('opmlContentField');
  const microsubChannelField = document.getElementById('microsubChannelField');
  const categoryPrefixField = document.getElementById('categoryPrefixField');

  // Hide all type-specific fields first
  urlField.style.display = 'none';
  opmlContentField.style.display = 'none';
  if (microsubChannelField) microsubChannelField.style.display = 'none';
  if (categoryPrefixField) categoryPrefixField.style.display = 'none';

  // Show fields based on type
  if (type === 'opml_url') {
    urlField.style.display = 'flex';
  } else if (type === 'opml_file') {
    opmlContentField.style.display = 'flex';
  } else if (type === 'microsub') {
    if (microsubChannelField) microsubChannelField.style.display = 'flex';
    if (categoryPrefixField) categoryPrefixField.style.display = 'flex';
  }
}

// Initialize on load
toggleTypeFields();
</script>
{% endblock %}