@rmdes/indiekit-endpoint-blogroll 1.0.13 → 1.0.15

package/views/blogroll-dashboard.njk

@@ -1,273 +1,116 @@
-{% extends "document.njk" %}
+{% extends "layouts/blogroll.njk" %}
 
-{% block content %}
-<style>
-  .br-dashboard {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xl, 2rem);
-  }
-
-  .br-section {
-    background: var(--color-offset, #f5f5f5);
-    border-radius: var(--border-radius-small, 0.5rem);
-    padding: var(--space-m, 1.5rem);
-  }
-
-  .br-section h2 {
-    font: var(--font-heading, bold 1.25rem/1.4 sans-serif);
-    margin-block-end: var(--space-s, 0.75rem);
-    padding-block-end: var(--space-xs, 0.5rem);
-    border-block-end: 1px solid var(--color-outline-variant, #ddd);
-  }
-
-  .br-stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: var(--space-s, 0.75rem);
-  }
-
-  .br-stat {
-    background: var(--color-background, #fff);
-    border-radius: var(--border-radius-small, 0.5rem);
-    padding: var(--space-s, 0.75rem);
-    text-align: center;
-  }
-
-  .br-stat dt {
-    color: var(--color-on-offset, #666);
-    font: var(--font-caption, 0.875rem/1.4 sans-serif);
-    margin-block-end: var(--space-2xs, 0.25rem);
-  }
-
-  .br-stat dd {
-    font: var(--font-subhead, bold 1.125rem/1.4 sans-serif);
-    margin: 0;
-  }
-
-  .br-stat dd.br-stat--error {
-    color: var(--color-error, #dc3545);
-  }
-
-  .br-quick-links {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-s, 0.75rem);
-    margin-block-start: var(--space-m, 1rem);
-  }
-
-  .br-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xs, 0.5rem);
-  }
-
-  .br-list li {
-    background: var(--color-background, #fff);
-    border-radius: var(--border-radius-small, 0.25rem);
-    padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--space-xs, 0.5rem);
-  }
-
-  .br-list-name {
-    font: var(--font-body, 0.875rem/1.4 sans-serif);
-    font-weight: 600;
-  }
-
-  .br-list-meta {
-    color: var(--color-on-offset, #666);
-    font: var(--font-caption, 0.75rem/1.4 sans-serif);
-  }
-
-  .br-list-error {
-    color: var(--color-error, #dc3545);
-    font: var(--font-caption, 0.75rem/1.4 sans-serif);
-  }
-
-  .br-api-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xs, 0.5rem);
-  }
-
-  .br-api-list li {
-    background: var(--color-background, #fff);
-    border-radius: var(--border-radius-small, 0.25rem);
-    padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
-    font: var(--font-caption, 0.875rem/1.4 sans-serif);
-  }
-
-  .br-api-list code {
-    font-weight: 600;
-    color: var(--color-primary, #0066cc);
-  }
-
-  .br-empty {
-    color: var(--color-on-offset, #666);
-    font: var(--font-caption, 0.875rem/1.4 sans-serif);
-    text-align: center;
-    padding: var(--space-m, 1rem);
-  }
-</style>
-
-<header class="page-header">
-  <h1 class="page-header__title">{{ __("blogroll.title") }}</h1>
-  <p class="page-header__description">{{ __("blogroll.description") }}</p>
-</header>
-
-{% for message in request.session.messages %}
-<div class="notice notice--{{ message.type }}">
-  <p>{{ message.content }}</p>
-</div>
-{% endfor %}
-
-<div class="br-dashboard">
-  <section class="br-section">
-    <h2>{{ __("blogroll.stats.title") }}</h2>
-    <dl class="br-stats-grid">
-      <div class="br-stat">
+{% block blogroll %}
+  {% call section({ title: __("blogroll.stats.title") }) %}
+    <dl class="blogroll-stats">
+      <div class="blogroll-stat">
         <dt>{{ __("blogroll.stats.sources") }}</dt>
         <dd>{{ stats.sources }}</dd>
       </div>
-      <div class="br-stat">
+      <div class="blogroll-stat">
         <dt>{{ __("blogroll.stats.blogs") }}</dt>
         <dd>{{ stats.blogs }}</dd>
       </div>
-      <div class="br-stat">
+      <div class="blogroll-stat">
         <dt>{{ __("blogroll.stats.items") }}</dt>
         <dd>{{ stats.items }}</dd>
       </div>
-      <div class="br-stat">
+      <div class="blogroll-stat">
         <dt>{{ __("blogroll.stats.errors") }}</dt>
-        <dd class="{% if stats.errors > 0 %}br-stat--error{% endif %}">{{ stats.errors }}</dd>
+        <dd class="{% if stats.errors > 0 %}blogroll-stat--error{% endif %}">{{ stats.errors }}</dd>
       </div>
-      <div class="br-stat">
+      <div class="blogroll-stat">
         <dt>{{ __("blogroll.stats.lastSync") }}</dt>
         <dd>{% if syncStatus.lastSync %}{{ syncStatus.lastSync | date("PPpp") }}{% else %}{{ __("blogroll.never") }}{% endif %}</dd>
       </div>
     </dl>
-
-    <div class="br-quick-links">
-      <a href="{{ baseUrl }}/sources" class="button button--secondary">
-        {{ __("blogroll.sources.manage") }}
-      </a>
-      <a href="{{ baseUrl }}/blogs" class="button button--secondary">
-        {{ __("blogroll.blogs.manage") }}
-      </a>
+    <div class="blogroll-actions">
+      {{ button({ href: baseUrl + "/sources", text: __("blogroll.sources.manage"), classes: "button--secondary" }) }}
+      {{ button({ href: baseUrl + "/blogs", text: __("blogroll.blogs.manage"), classes: "button--secondary" }) }}
     </div>
-  </section>
+  {% endcall %}
 
-  <section class="br-section">
-    <h2>{{ __("blogroll.actions.title") }}</h2>
-    <div class="button-group">
+  {% call section({ title: __("blogroll.actions.title") }) %}
+    <div class="blogroll-actions">
       <form method="post" action="{{ baseUrl }}/sync" style="display: inline;">
-        <button type="submit" class="button button--primary">
-          {{ __("blogroll.actions.syncNow") }}
-        </button>
+        {{ button({ type: "submit", text: __("blogroll.actions.syncNow") }) }}
       </form>
       <form method="post" action="{{ baseUrl }}/clear-resync" style="display: inline;" onsubmit="return confirm('{{ __("blogroll.actions.clearConfirm") }}');">
-        <button type="submit" class="button button--secondary">
-          {{ __("blogroll.actions.clearResync") }}
-        </button>
+        {{ button({ type: "submit", text: __("blogroll.actions.clearResync"), classes: "button--secondary" }) }}
       </form>
     </div>
-  </section>
+  {% endcall %}
 
   {% if blogsWithErrors.length > 0 %}
-  <section class="br-section">
-    <h2>{{ __("blogroll.errors.title") }}</h2>
-    <ul class="br-list">
+  {% call section({ title: __("blogroll.errors.title") }) %}
+    <ul class="blogroll-list">
       {% for blog in blogsWithErrors %}
-      <li>
+      <li class="blogroll-list__item blogroll-list__item--compact">
         <div>
-          <span class="br-list-name">{{ blog.title }}</span>
-          <span class="br-list-error">{{ blog.lastError }}</span>
+          <span class="blogroll-item__title">{{ blog.title }}</span>
+          <span class="blogroll-item__error">{{ blog.lastError }}</span>
         </div>
-        <a href="{{ baseUrl }}/blogs/{{ blog._id }}" class="button button--small button--secondary">
-          {{ __("blogroll.edit") }}
-        </a>
+        {{ button({ href: baseUrl + "/blogs/" + blog._id, text: __("blogroll.edit"), classes: "button--small button--secondary" }) }}
       </li>
       {% endfor %}
     </ul>
     {% if stats.errors > blogsWithErrors.length %}
-    <p class="br-empty">
+    <p class="blogroll-empty">
       <a href="{{ baseUrl }}/blogs?status=error">{{ __("blogroll.errors.seeAll", { count: stats.errors }) }}</a>
     </p>
     {% endif %}
-  </section>
+  {% endcall %}
   {% endif %}
 
-  <section class="br-section">
-    <h2>{{ __("blogroll.sources.recent") }}</h2>
+  {% call section({ title: __("blogroll.sources.recent") }) %}
     {% if sources.length > 0 %}
-    <ul class="br-list">
+    <ul class="blogroll-list">
       {% for source in sources %}
-      <li>
+      <li class="blogroll-list__item blogroll-list__item--compact">
         <div>
-          <span class="br-list-name">{{ source.name }}</span>
-          <span class="br-list-meta">{{ source.type }} • {% if source.lastSyncAt %}{{ source.lastSyncAt | date("PP") }}{% else %}{{ __("blogroll.never") }}{% endif %}</span>
+          <span class="blogroll-item__title">{{ source.name }}</span>
+          <span class="blogroll-item__meta">{{ source.type }} · {% if source.lastSyncAt %}{{ source.lastSyncAt | date("PP") }}{% else %}{{ __("blogroll.never") }}{% endif %}</span>
         </div>
-        <span class="badge {% if source.enabled %}badge--green{% else %}badge--yellow{% endif %}">
-          {% if source.enabled %}{{ __("blogroll.enabled") }}{% else %}{{ __("blogroll.disabled") }}{% endif %}
-        </span>
+        {{ badge({ color: "green" if source.enabled else "yellow", text: __("blogroll.enabled") if source.enabled else __("blogroll.disabled") }) }}
       </li>
       {% endfor %}
     </ul>
     {% else %}
-    <p class="br-empty">{{ __("blogroll.sources.empty") }}</p>
+    {{ prose({ text: __("blogroll.sources.empty") }) }}
     {% endif %}
-    <div class="br-quick-links">
-      <a href="{{ baseUrl }}/sources/new" class="button button--secondary button--small">
-        {{ __("blogroll.sources.add") }}
-      </a>
+    <div class="blogroll-actions">
+      {{ button({ href: baseUrl + "/sources/new", text: __("blogroll.sources.add"), classes: "button--secondary button--small" }) }}
     </div>
-  </section>
+  {% endcall %}
 
-  <section class="br-section">
-    <h2>{{ __("blogroll.blogs.recent") }}</h2>
+  {% call section({ title: __("blogroll.blogs.recent") }) %}
     {% if recentBlogs.length > 0 %}
-    <ul class="br-list">
+    <ul class="blogroll-list">
       {% for blog in recentBlogs %}
-      <li>
+      <li class="blogroll-list__item blogroll-list__item--compact">
         <div>
-          <span class="br-list-name">{{ blog.title }}</span>
-          <span class="br-list-meta">{{ blog.category or "Uncategorized" }} • {{ blog.itemCount }} items</span>
+          <span class="blogroll-item__title">{{ blog.title }}</span>
+          <span class="blogroll-item__meta">{{ blog.category or "Uncategorized" }} · {{ blog.itemCount }} items</span>
         </div>
-        <span class="badge {% if blog.status == 'active' %}badge--green{% elif blog.status == 'error' %}badge--red{% else %}badge--yellow{% endif %}">
-          {{ blog.status }}
-        </span>
+        {{ badge({ color: "green" if blog.status == "active" else ("red" if blog.status == "error" else "yellow"), text: blog.status }) }}
       </li>
       {% endfor %}
     </ul>
     {% else %}
-    <p class="br-empty">{{ __("blogroll.blogs.empty") }}</p>
+    {{ prose({ text: __("blogroll.blogs.empty") }) }}
     {% endif %}
-    <div class="br-quick-links">
-      <a href="{{ baseUrl }}/blogs/new" class="button button--secondary button--small">
-        {{ __("blogroll.blogs.add") }}
-      </a>
+    <div class="blogroll-actions">
+      {{ button({ href: baseUrl + "/blogs/new", text: __("blogroll.blogs.add"), classes: "button--secondary button--small" }) }}
     </div>
-  </section>
+  {% endcall %}
 
-  <section class="br-section">
-    <h2>{{ __("blogroll.api.title") }}</h2>
-    <ul class="br-api-list">
+  {% call section({ title: __("blogroll.api.title") }) %}
+    <ul class="blogroll-api-list">
       <li><code>GET {{ baseUrl }}/api/blogs</code> - {{ __("blogroll.api.blogs") }}</li>
       <li><code>GET {{ baseUrl }}/api/items</code> - {{ __("blogroll.api.items") }}</li>
       <li><code>GET {{ baseUrl }}/api/categories</code> - {{ __("blogroll.api.categories") }}</li>
       <li><code>GET {{ baseUrl }}/api/opml</code> - {{ __("blogroll.api.opml") }}</li>
       <li><code>GET {{ baseUrl }}/api/status</code> - {{ __("blogroll.api.status") }}</li>
     </ul>
-  </section>
-</div>
+  {% endcall %}
 {% endblock %}

package/views/blogroll-source-edit.njk

@@ -1,147 +1,75 @@
-{% extends "document.njk" %}
-
-{% block content %}
-<style>
-  .br-form {
-    max-width: 600px;
-  }
-
-  .br-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2xs, 0.25rem);
-    margin-block-end: var(--space-m, 1rem);
-  }
-
-  .br-field label {
-    font: var(--font-label, bold 0.875rem/1.4 sans-serif);
-  }
-
-  .br-field-hint {
-    color: var(--color-on-offset, #666);
-    font: var(--font-caption, 0.875rem/1.4 sans-serif);
-  }
-
-  .br-field input,
-  .br-field select,
-  .br-field textarea {
-    appearance: none;
-    background-color: var(--color-background, #fff);
-    border: 1px solid var(--color-outline-variant, #ccc);
-    border-radius: var(--border-radius-small, 0.25rem);
-    font: var(--font-body, 0.875rem/1.4 sans-serif);
-    padding: calc(var(--space-s, 0.75rem) / 2) var(--space-s, 0.75rem);
-    width: 100%;
-  }
-
-  .br-field textarea {
-    min-height: 150px;
-    font-family: monospace;
-  }
-
-  .br-field input:focus,
-  .br-field select:focus,
-  .br-field textarea:focus {
-    border-color: var(--color-primary, #0066cc);
-    outline: 2px solid var(--color-primary, #0066cc);
-    outline-offset: 1px;
-  }
-
-  .br-field-inline {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-s, 0.75rem);
-  }
-
-  .br-field-inline input[type="checkbox"] {
-    appearance: auto;
-    width: auto;
-    cursor: pointer;
-  }
-</style>
-
-<header class="page-header">
-  <a href="{{ baseUrl }}/sources" class="page-header__back">{{ icon("previous") }} {{ __("blogroll.sources.title") }}</a>
-  <h1 class="page-header__title">{{ title }}</h1>
-</header>
-
-{% for message in request.session.messages %}
-<div class="notice notice--{{ message.type }}">
-  <p>{{ message.content }}</p>
-</div>
-{% endfor %}
-
-<form method="post" action="{% if isNew %}{{ baseUrl }}/sources{% else %}{{ baseUrl }}/sources/{{ source._id }}{% endif %}" class="br-form">
-  <div class="br-field">
-    <label for="name">{{ __("blogroll.sources.form.name") }}</label>
-    <input type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
-  </div>
-
-  <div class="br-field">
-    <label for="type">{{ __("blogroll.sources.form.type") }}</label>
-    <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="br-field-hint">{{ __("blogroll.sources.form.typeHint") }}</span>
-  </div>
-
-  <div class="br-field" id="urlField">
-    <label for="url">{{ __("blogroll.sources.form.url") }}</label>
-    <input type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
-    <span class="br-field-hint">{{ __("blogroll.sources.form.urlHint") }}</span>
-  </div>
-
-  <div class="br-field" id="opmlContentField" style="display: none;">
-    <label for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
-    <textarea id="opmlContent" name="opmlContent" placeholder="<?xml version=&quot;1.0&quot;?>...">{{ source.opmlContent if source else '' }}</textarea>
-    <span class="br-field-hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
-  </div>
-
-  <div class="br-field" id="microsubChannelField" style="display: none;">
-    <label for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
-    <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="br-field-hint">{{ __("blogroll.sources.form.microsubChannelHint") | default("Sync feeds from a specific channel, or all channels") }}</span>
-  </div>
-
-  <div class="br-field" id="categoryPrefixField" style="display: none;">
-    <label for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
-    <input type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
-    <span class="br-field-hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
-  </div>
-
-  <div class="br-field">
-    <label for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
-    <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="br-field br-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="button-group">
-    <button type="submit" class="button button--primary">
-      {% if isNew %}{{ __("blogroll.sources.create") }}{% else %}{{ __("blogroll.sources.save") }}{% endif %}
-    </button>
-    <a href="{{ baseUrl }}/sources" class="button button--secondary">{{ __("blogroll.cancel") }}</a>
-  </div>
-</form>
+{% 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 for="name">{{ __("blogroll.sources.form.name") }}</label>
+      <input type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
+    </div>
+
+    <div class="blogroll-field">
+      <label for="type">{{ __("blogroll.sources.form.type") }}</label>
+      <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="blogroll-field-hint">{{ __("blogroll.sources.form.typeHint") }}</span>
+    </div>
+
+    <div class="blogroll-field" id="urlField">
+      <label for="url">{{ __("blogroll.sources.form.url") }}</label>
+      <input type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
+      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.urlHint") }}</span>
+    </div>
+
+    <div class="blogroll-field" id="opmlContentField" style="display: none;">
+      <label for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
+      <textarea id="opmlContent" name="opmlContent" placeholder="<?xml version=&quot;1.0&quot;?>...">{{ source.opmlContent if source else '' }}</textarea>
+      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
+    </div>
+
+    <div class="blogroll-field" id="microsubChannelField" style="display: none;">
+      <label for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
+      <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="blogroll-field-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 for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
+      <input type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
+      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
+    </div>
+
+    <div class="blogroll-field">
+      <label for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
+      <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() {