source: Klonkt/src/views/pages/admin-circle.ejs@ 49f698b

<div class="container admin-page">
  <h1><%= t('acir.title') %></h1>
  <p><a href="/admin/settings" class="btn">&larr; <%= t('acir.back_settings') %></a></p>

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

  <% if (tenancy !== 'circle') { %>
    <section class="set-card">
      <p class="set-help"><%= t('acir.mode_off_1') %> <strong><%= t('acir.circles') %></strong>. <%= t('acir.mode_off_2') %>
        <a href="/admin/settings"><%= t('acir.settings') %></a> <%= t('acir.mode_off_3') %> <code>/cirkel</code>.
        <%= t('acir.mode_off_4') %></p>
    </section>
  <% } %>

  <section class="set-card" style="margin-top:1rem">
    <h2><%= t('acir.visibility_title') %></h2>
    <p class="set-help"><%= t('acir.visibility_help_1') %> <strong><%= t('acir.all_public') %></strong> <%= t('acir.visibility_help_2') %>
      (<code>/.klonkt/outbox.json</code>). <%= t('acir.visibility_help_3') %></p>
    <form method="post" action="/admin/circle/allow" class="set-form">
      <label class="set-opt" style="align-items:center">
        <input type="checkbox" name="allow_circle" value="on" <%= allowCircle ? 'checked' : '' %>>
        <span><strong><%= t('acir.show_in_circles') %></strong></span>
      </label>
      <button type="submit" class="btn btn-primary"><%= t('acir.save') %></button>
    </form>
  </section>

  <section class="set-card" style="margin-top:1rem">
    <h2><%= t('acir.add_title') %></h2>
    <p class="set-help"><%= t('acir.add_help') %></p>
    <form method="post" action="/admin/circle/add" class="set-form">
      <label class="set-field">
        <span><%= t('acir.url') %></span>
        <input type="text" name="remote_url" inputmode="url" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="artiest.klonkt.com" required>
      </label>
      <label class="set-field">
        <span><%= t('acir.label') %> <small style="font-weight:400">— <%= t('acir.optional') %></small></span>
        <input type="text" name="label" maxlength="80" placeholder="<%= t('acir.label_ph') %>">
      </label>
      <button type="submit" class="btn btn-primary"><%= t('acir.add') %></button>
    </form>
  </section>

  <section class="set-card" style="margin-top:1rem">
    <h2><%= t('acir.in_circle', { n: links.length }) %></h2>
    <% if (!links.length) { %>
      <p class="set-help"><%= t('acir.no_sources') %></p>
    <% } else { %>
      <form method="post" action="/admin/circle/sync-all" style="margin:0 0 .9rem">
        <button type="submit" class="btn">&#8635; <%= t('acir.sync_all') %></button>
      </form>
      <%
        var _cActive = t('acir.st_active');
        var _cPosts = t('acir.posts');
        var _cLast = t('acir.last');
        var _cMismatch = t('acir.st_mismatch');
        var _cMismatchReason = t('acir.mismatch_reason');
        var _cError = t('acir.st_error');
        var _cPaused = t('acir.st_paused');
        var _cRefresh = t('acir.refresh');
        var _cRemove = t('acir.remove');
        var _cRemoveConfirm = t('acir.remove_confirm');
      %>
      <ul class="circ-list">
        <% links.forEach(function(l){ %>
          <li class="circ-item">
            <div class="circ-main">
              <strong><%= l.label || l.remote_url %></strong>
              <small><%= l.remote_url %></small>
              <div class="circ-status">
                <% if (l.status === 'active') { %>
                  <span class="circ-badge ok">&#10003; <%= _cActive %></span>
                  <span class="circ-meta"><%= counts[l.id] || 0 %> <%= _cPosts %><% if (l.last_synced) { %> &middot; <%= _cLast %>: <%= l.last_synced %><% } %></span>
                <% } else if (l.status === 'outdated') { %>
                  <span class="circ-badge err">&#8635; <%= _cMismatch %></span>
                  <div class="circ-reason"><%= l.last_error || _cMismatchReason %></div>
                <% } else if (l.status === 'error') { %>
                  <span class="circ-badge err">&#9888; <%= _cError %></span>
                  <% if (l.last_error) { %><div class="circ-reason"><%= l.last_error %></div><% } %>
                <% } else if (l.status === 'paused') { %>
                  <span class="circ-badge">&#9208; <%= _cPaused %></span>
                <% } else { %>
                  <%# Onbekende status: toon 'm rauw + eventuele reden i.p.v. stil "gepauzeerd". %>
                  <span class="circ-badge"><%= l.status %></span>
                  <% if (l.last_error) { %><div class="circ-reason"><%= l.last_error %></div><% } %>
                <% } %>
              </div>
            </div>
            <div class="circ-actions">
              <form method="post" action="/admin/circle/<%= l.id %>/sync" style="display:inline">
                <button type="submit" class="btn"><%= _cRefresh %></button>
              </form>
              <form method="post" action="/admin/circle/<%= l.id %>/remove" style="display:inline"
                    onsubmit="return confirm('<%= _cRemoveConfirm %>')">
                <button type="submit" class="btn btn-danger"><%= _cRemove %></button>
              </form>
            </div>
          </li>
        <% }); %>
      </ul>
    <% } %>
  </section>
</div>

<style>
.admin-page { max-width: 760px; margin: 3rem auto; padding: 0 1rem; }
.admin-page h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 .25rem; }
.set-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; }
.set-card h2 { font-family: var(--font-display, serif); font-size: 1.25rem; margin: 0 0 .5rem; }
.set-help { color: var(--ink-muted); font-size: .9rem; margin: 0 0 1rem; }
.set-form { display: flex; flex-direction: column; gap: 1rem; }
.set-opt { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.set-field { display: flex; flex-direction: column; gap: .3rem; }
.set-field > span { font-size: .8rem; font-weight: 600; color: var(--ink-soft, var(--ink-muted)); }
.set-field input { width: 100%; box-sizing: border-box; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }
.set-form .btn, .circ-actions .btn { align-self: flex-start; }
.circ-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.circ-item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); flex-wrap: wrap; }
.circ-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.circ-main small { color: var(--ink-muted); font-size: .78rem; word-break: break-all; }
.circ-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.circ-badge { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 20px; background: var(--rule); white-space: nowrap; }
.circ-badge.ok { background: #d1fae5; color: #065f46; }
.circ-badge.err { background: #fee2e2; color: #991b1b; }
.circ-status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .25rem; font-size: .78rem; color: var(--ink-muted); }
.circ-meta { color: var(--ink-muted); }
/* Reden op een eigen regel onder de badge; normale woordafbreking (geen break-all
   die hele zinnen midden in woorden knipt — dat zit op de URL-small, niet hier). */
.circ-reason { flex-basis: 100%; line-height: 1.4; color: var(--ink-muted); word-break: normal; overflow-wrap: anywhere; }
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
</style>