{% extends "dashboard_base.html" %}
{% block title %}Admin — calrs{% endblock %}
{% block dashboard_content %}
<div class="card">
  <h1>Admin dashboard</h1>
</div>

{% if error_message %}
<div class="card" style="border-color: var(--error-text); background: rgba(239, 68, 68, 0.05);">
  <div style="color: var(--error-text); font-size: 0.9rem;"><strong>Action refused:</strong> {{ error_message }}</div>
</div>
{% endif %}

<!-- Logo -->
<div class="card">
  <h2>Company logo</h2>
  <p style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem;">Displayed on public booking pages. Recommended: PNG or SVG, max 2 MB.</p>
  {% if has_logo %}
  <div style="margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); text-align: center;">
    <img src="/logo" alt="Company logo" style="max-height: 80px; max-width: 280px; object-fit: contain;">
  </div>
  {% endif %}
  <div style="display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap;">
    <form method="post" action="/dashboard/admin/logo" enctype="multipart/form-data" style="margin: 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
      <input type="file" name="logo" accept="image/*" required style="font-size: 0.85rem;">
      <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Upload</button>
    </form>
    {% if has_logo %}
    <form method="post" action="/dashboard/admin/logo/delete" style="margin: 0;">
      <button type="submit" class="slot-btn" style="cursor: pointer; font-size: 0.85rem; color: var(--error-text); border-color: var(--error-text);">Remove</button>
    </form>
    {% endif %}
  </div>
  <div style="margin-top: 1rem;">
    <form method="post" action="/dashboard/admin/company-link" style="margin: 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
      <label for="company_link" style="font-size: 0.875rem; font-weight: 500; white-space: nowrap;">Company link</label>
      <input type="url" id="company_link" name="company_link" value="{{ company_link }}" placeholder="https://yourcompany.com" style="flex: 1; min-width: 200px; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 0.85rem;">
      <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save</button>
    </form>
    <span style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">Logo links to this URL on public booking pages. Leave empty for no link.</span>
  </div>
</div>

<!-- Theme -->
<div class="card">
  <h2>Theme</h2>
  <p style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem;">Choose a color theme for all pages. The dark/light toggle is separate — themes adapt to both modes.</p>
  <form id="theme-form" method="post" action="/dashboard/admin/accent" style="margin: 0;">
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem;">
      {% set themes = [
        {"id": "default", "label": "Default", "desc": "Clean blue", "colors": ["#2563eb", "#eff6ff", "#f4f4f5", "#18181b"]},
        {"id": "nord", "label": "Nord", "desc": "Arctic frost", "colors": ["#5e81ac", "#e8eef5", "#eceff4", "#2e3440"]},
        {"id": "dracula", "label": "Dracula", "desc": "Dark purple", "colors": ["#bd93f9", "#f3eefe", "#f0edf5", "#282a36"]},
        {"id": "gruvbox", "label": "Gruvbox", "desc": "Retro warm", "colors": ["#d65d0e", "#fabd2f", "#f9f5d7", "#282828"]},
        {"id": "solarized", "label": "Solarized", "desc": "Ethan's classic", "colors": ["#268bd2", "#859900", "#fdf6e3", "#002b36"]},
        {"id": "tokyo-night", "label": "Tokyo Night", "desc": "Neon cityscape", "colors": ["#7a5af5", "#7aa2f7", "#f0f0f5", "#1a1b26"]},
        {"id": "vates", "label": "Vates", "desc": "Rouge & Bleu Spatial", "colors": ["#be1621", "#ef7f18", "#1a1b38", "#2ca878"]},
        {"id": "custom", "label": "Custom", "desc": "Your colors", "colors": []}
      ] %}
      {% for t in themes %}
      <label style="cursor: pointer;">
        <input type="radio" name="theme" value="{{ t.id }}" {% if current_theme == t.id %}checked{% endif %} style="display: none;" onchange="themeChanged(this.value)">
        <div class="theme-card{% if current_theme == t.id %} theme-card-active{% endif %}" data-theme="{{ t.id }}" style="border: 2px solid {% if current_theme == t.id %}var(--accent){% else %}var(--border){% endif %}; border-radius: var(--radius); padding: 0.75rem; transition: border-color 0.15s, box-shadow 0.15s;">
          {% if t.colors %}
          <div style="display: flex; gap: 4px; margin-bottom: 0.5rem;">
            {% for c in t.colors %}
            <span style="width: 18px; height: 18px; border-radius: 50%; background: {{ c }}; border: 1px solid rgba(0,0,0,0.1);"></span>
            {% endfor %}
          </div>
          {% else %}
          <div style="display: flex; gap: 4px; margin-bottom: 0.5rem;">
            <span style="width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444); border: 1px solid rgba(0,0,0,0.1);"></span>
            <span style="width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #ddd, #888); border: 1px solid rgba(0,0,0,0.1);"></span>
          </div>
          {% endif %}
          <div style="font-weight: 600; font-size: 0.875rem;">{{ t.label }}</div>
          <div style="font-size: 0.75rem; color: var(--text-muted);">{{ t.desc }}</div>
        </div>
      </label>
      {% endfor %}
    </div>

    <!-- Custom color pickers (shown only when custom is selected) -->
    <div id="custom-colors" style="display: {% if current_theme == 'custom' %}block{% else %}none{% endif %}; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;">
      <div style="font-weight: 600; font-size: 0.875rem; margin-bottom: 0.75rem;">Custom colors</div>
      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem;">
        <div>
          <label style="font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 0.25rem;">Accent</label>
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <input type="color" name="custom_accent" value="{{ custom_colors.accent }}" style="width: 32px; height: 32px; border: none; cursor: pointer; background: none;">
            <input type="text" value="{{ custom_colors.accent }}" style="width: 80px; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-family: monospace;" oninput="this.previousElementSibling.value=this.value" data-sync="custom_accent">
          </div>
        </div>
        <div>
          <label style="font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 0.25rem;">Accent hover</label>
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <input type="color" name="custom_accent_hover" value="{{ custom_colors.accent_hover }}" style="width: 32px; height: 32px; border: none; cursor: pointer; background: none;">
            <input type="text" value="{{ custom_colors.accent_hover }}" style="width: 80px; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-family: monospace;" oninput="this.previousElementSibling.value=this.value" data-sync="custom_accent_hover">
          </div>
        </div>
        <div>
          <label style="font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 0.25rem;">Background</label>
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <input type="color" name="custom_bg" value="{{ custom_colors.bg }}" style="width: 32px; height: 32px; border: none; cursor: pointer; background: none;">
            <input type="text" value="{{ custom_colors.bg }}" style="width: 80px; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-family: monospace;" oninput="this.previousElementSibling.value=this.value" data-sync="custom_bg">
          </div>
        </div>
        <div>
          <label style="font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 0.25rem;">Surface</label>
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <input type="color" name="custom_surface" value="{{ custom_colors.surface }}" style="width: 32px; height: 32px; border: none; cursor: pointer; background: none;">
            <input type="text" value="{{ custom_colors.surface }}" style="width: 80px; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-family: monospace;" oninput="this.previousElementSibling.value=this.value" data-sync="custom_surface">
          </div>
        </div>
        <div>
          <label style="font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 0.25rem;">Text</label>
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <input type="color" name="custom_text" value="{{ custom_colors.text }}" style="width: 32px; height: 32px; border: none; cursor: pointer; background: none;">
            <input type="text" value="{{ custom_colors.text }}" style="width: 80px; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-family: monospace;" oninput="this.previousElementSibling.value=this.value" data-sync="custom_text">
          </div>
        </div>
      </div>
    </div>

    <button type="submit" class="btn" style="font-size: 0.875rem; padding: 0.5rem 1.25rem;">Save theme</button>
  </form>
</div>
<script>
function themeChanged(val) {
  document.getElementById('custom-colors').style.display = val === 'custom' ? 'block' : 'none';
  document.querySelectorAll('.theme-card').forEach(function(c) {
    var active = c.dataset.theme === val;
    c.classList.toggle('theme-card-active', active);
    c.style.borderColor = active ? 'var(--accent)' : 'var(--border)';
  });
}
// Sync color picker → text input
document.querySelectorAll('input[type="color"]').forEach(function(picker) {
  picker.addEventListener('input', function() {
    var text = this.nextElementSibling;
    if (text) text.value = this.value;
  });
});
</script>
<style>
.theme-card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow); }
.theme-card-active:hover { border-color: var(--accent) !important; }
.user-item .user-actions { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.15s ease, max-height 0.15s ease; padding-top: 0; padding-bottom: 0; }
.user-item:hover .user-actions, .user-item:focus-within .user-actions { opacity: 1; max-height: 4rem; overflow: visible; }
@media (max-width: 768px) {
  .user-item .user-actions { opacity: 1; max-height: none; overflow: visible; }
}
</style>

<!-- Users -->
<div class="card">
  <h2>Users ({{ user_count }})</h2>
  <div style="margin-bottom: 1rem;">
    <input type="text" id="user-search" placeholder="Filter by name or email…" oninput="filterUsers()" style="width: 100%; max-width: 360px; padding: 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: 9999px; font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;" onfocus="this.style.borderColor='var(--accent)';this.style.boxShadow='0 0 0 3px var(--accent-subtle)'" onblur="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
  </div>
  {% if users %}
  <div id="user-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
    {% for u in users %}
    <div class="user-item" data-name="{{ u.name | lower }}" data-email="{{ u.email | lower }}" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem;">
      <div style="display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
        <div style="min-width: 0; flex: 1;">
          <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
            <span style="font-weight: 600; font-size: 0.925rem;">{{ u.name }}</span>
            <span style="font-size: 0.825rem; color: var(--text-secondary); overflow-wrap: break-word;">{{ u.email }}</span>
            {% if u.role == "admin" %}<span class="badge badge-info">admin</span>{% endif %}
            {% if not u.enabled %}<span class="badge badge-error">disabled</span>{% endif %}
            <span style="font-size: 0.75rem; color: var(--text-muted);">{{ u.auth_provider }}</span>
          </div>
          {% if u.groups %}
          <div style="margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem;">
            {% for g in u.groups %}
            <span class="badge badge-info">{{ g }}</span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </div>
      {% if u.id != current_user_id %}
      <div class="user-actions" style="margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end;">
        <form method="post" action="/dashboard/admin/impersonate/{{ u.id }}" style="margin: 0;">
          <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer; color: #d97706; border-color: #d97706;">Impersonate</button>
        </form>
        <form method="post" action="/dashboard/admin/users/{{ u.id }}/toggle-role" style="margin: 0;">
          <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer;">{% if u.role == "admin" %}Demote{% else %}Promote{% endif %}</button>
        </form>
        <form method="post" action="/dashboard/admin/users/{{ u.id }}/toggle-enabled" style="margin: 0;">
          <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer; {% if u.enabled %}color: var(--error-text);{% else %}color: var(--success);{% endif %}">{% if u.enabled %}Disable{% else %}Enable{% endif %}</button>
        </form>
        <form method="post" action="/dashboard/admin/users/{{ u.id }}/delete" style="margin: 0;" onsubmit="return confirm('Permanently delete user {{ u.email }}?\n\nThis removes their user record, scheduling account, calendar sources, event types, and all data uniquely owned by them. Past bookings will be deleted with their event types.\n\nFor OIDC/SSO users: if auto-register is enabled, this person will be re-created on their next login.\n\nThis cannot be undone.');">
          <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer; color: var(--error-text); border-color: var(--error-text);">Delete</button>
        </form>
      </div>
      {% else %}
      <div style="margin-top: 0.25rem; text-align: right;">
        <span style="font-size: 0.8rem; color: var(--text-muted);">(you)</span>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  <div id="user-pagination" style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem;"></div>
  <div id="user-no-results" style="display: none; padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No users match your filter.</div>
  {% else %}
  <p class="empty" style="padding: 1rem;">No users yet.</p>
  {% endif %}
</div>

<!-- Groups -->
<div class="card">
  <h2>Groups ({{ group_count }})</h2>
  {% if groups %}
  <div style="margin-bottom: 1rem;">
    <input type="text" id="group-search" placeholder="Filter by group name…" oninput="filterGroups()" style="width: 100%; max-width: 360px; padding: 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: 9999px; font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;" onfocus="this.style.borderColor='var(--accent)';this.style.boxShadow='0 0 0 3px var(--accent-subtle)'" onblur="this.style.borderColor='var(--border)';this.style.boxShadow='none'">
  </div>
  <div style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
      <thead>
        <tr style="border-bottom: 2px solid var(--border); text-align: left;">
          <th style="padding: 0.5rem 0.5rem 0.5rem 0;">Group name</th>
          <th style="padding: 0.5rem;">Members</th>
        </tr>
      </thead>
      <tbody id="group-list">
        {% for g in groups %}
        <tr class="group-item" data-name="{{ g.name | lower }}" style="border-bottom: 1px solid var(--border);">
          <td style="padding: 0.5rem 0.5rem 0.5rem 0; vertical-align: top;">{{ g.name }}</td>
          <td style="padding: 0.5rem;">
            {% if g.members %}
            <div class="group-members" style="display: flex; flex-direction: column; gap: 0.25rem;">
              {% for m in g.members %}
              <form method="POST" action="/dashboard/admin/groups/{{ g.id }}/members/{{ m.user_id }}/weight"{% if loop.index > 5 %} class="group-member-extra" data-group="{{ g.id }}" style="display: none; align-items: center; gap: 0.5rem;"{% else %} style="display: flex; align-items: center; gap: 0.5rem;"{% endif %}>
                <span style="min-width: 100px;">{{ m.name }}</span>
                <label style="font-size: 0.8rem; color: var(--text-muted);">weight:</label>
                <input type="number" name="weight" value="{{ m.weight }}" min="1" max="100" style="width: 60px; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; background: var(--surface); color: var(--text);">
                <button type="submit" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; background: var(--accent); color: white; border: none; border-radius: var(--radius); cursor: pointer;">Save</button>
              </form>
              {% endfor %}
              {% if g.members | length > 5 %}
              <button type="button" class="group-expand-btn" data-group="{{ g.id }}" onclick="toggleGroupMembers('{{ g.id }}')" style="background: none; border: none; color: var(--accent); font-size: 0.8rem; cursor: pointer; padding: 0.25rem 0; text-align: left;">Show {{ g.members | length - 5 }} more&hellip;</button>
              {% endif %}
            </div>
            {% else %}
            {{ g.member_count }}
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div id="group-pagination" style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem;"></div>
  <div id="group-no-results" style="display: none; padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No groups match your filter.</div>
  {% else %}
  <p class="empty" style="padding: 1rem; color: var(--text-muted); font-size: 0.875rem;">No groups synced yet. Groups are automatically synced from your OIDC provider.</p>
  {% endif %}
</div>

<!-- Auth settings -->
<div class="card">
  <h2>Auth settings</h2>
  <form method="post" action="/dashboard/admin/auth">
    <div style="margin-bottom: 1rem;">
      <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.925rem; cursor: pointer;">
        <input type="checkbox" name="registration_enabled" value="on" {% if registration_enabled %}checked{% endif %} style="width: 1rem; height: 1rem;">
        Registration enabled
      </label>
    </div>
    <div class="form-group">
      <label>Allowed email domains <span class="hint">(comma-separated, leave empty for any)</span></label>
      <input type="text" name="allowed_email_domains" value="{{ allowed_email_domains }}" placeholder="example.com, company.org">
    </div>
    <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save auth settings</button>
  </form>
</div>

<!-- OIDC settings -->
<div class="card">
  <h2>OIDC settings</h2>
  <div style="margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-secondary);">
    Status: {% if oidc_enabled %}<strong style="color: var(--success);">enabled</strong>{% else %}<span style="color: var(--text-muted);">disabled</span>{% endif %}
    {% if oidc_issuer_url %}&middot; Issuer: <span style="color: var(--text-muted);">{{ oidc_issuer_url }}</span>{% endif %}
    {% if oidc_client_id %}&middot; Client ID: <span style="color: var(--text-muted);">{{ oidc_client_id }}</span>{% endif %}
  </div>
  <form method="post" action="/dashboard/admin/oidc">
    <div style="margin-bottom: 1rem;">
      <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.925rem; cursor: pointer;">
        <input type="checkbox" name="oidc_enabled" value="on" {% if oidc_enabled %}checked{% endif %} style="width: 1rem; height: 1rem;">
        OIDC enabled
      </label>
    </div>
    <div class="form-group">
      <label>Issuer URL</label>
      <input type="url" name="oidc_issuer_url" value="{{ oidc_issuer_url }}" placeholder="https://auth.example.com">
    </div>
    <div class="form-group">
      <label>Client ID</label>
      <input type="text" name="oidc_client_id" value="{{ oidc_client_id }}" placeholder="calrs">
    </div>
    <div class="form-group">
      <label>Client secret <span class="hint">(leave empty to keep current)</span></label>
      <input type="password" name="oidc_client_secret" value="" placeholder="Leave empty to keep unchanged">
    </div>
    <div style="margin-bottom: 1rem;">
      <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.925rem; cursor: pointer;">
        <input type="checkbox" name="oidc_auto_register" value="on" {% if oidc_auto_register %}checked{% endif %} style="width: 1rem; height: 1rem;">
        Auto-register new users from OIDC
      </label>
    </div>
    <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save OIDC settings</button>
  </form>
</div>

<!-- Google Calendar OAuth2 -->
<div class="card">
  <h2>Google Calendar (OAuth2)</h2>
  <div style="margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-secondary);">
    Status: {% if google_oauth2_configured %}<strong style="color: var(--success);">configured</strong>{% else %}<span style="color: var(--text-muted);">not configured</span>{% endif %}
    {% if google_oauth2_client_id %}&middot; Client ID: <span style="color: var(--text-muted);">{{ google_oauth2_client_id }}</span>{% endif %}
  </div>
  <form method="post" action="/dashboard/admin/google-oauth2">
    <p style="font-size: 0.825rem; color: var(--text-muted); margin-bottom: 1rem;">
      To enable Google Calendar integration, create OAuth2 credentials at
      <a href="https://console.cloud.google.com/apis/credentials" target="_blank" style="color: var(--accent);">Google Cloud Console</a>.
      Enable the <strong>Google Calendar API</strong>, then add
      <code>{{ base_url }}/dashboard/sources/google/callback</code>
      as an authorized redirect URI.
    </p>
    <div class="form-group">
      <label>Client ID</label>
      <input type="text" name="google_oauth2_client_id" value="{{ google_oauth2_client_id }}" placeholder="123456789.apps.googleusercontent.com">
    </div>
    <div class="form-group">
      <label>Client secret <span class="hint">(leave empty to keep current)</span></label>
      <input type="password" name="google_oauth2_client_secret" value="" placeholder="Leave empty to keep unchanged">
    </div>
    <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save Google OAuth2 settings</button>
  </form>
</div>

<!-- Captcha settings -->
<div class="card">
  <h2>Captcha</h2>
  <div style="margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-secondary);">
    Status: {% if captcha_configured %}<strong style="color: var(--success);">enabled</strong>{% else %}<span style="color: var(--text-muted);">disabled</span>{% endif %}
    {% if captcha_instance_url %}&middot; Instance: <span style="color: var(--text-muted);">{{ captcha_instance_url }}</span>{% endif %}
  </div>
  <form method="post" action="/dashboard/admin/captcha">
    <div class="form-group">
      <label>Instance URL</label>
      <input type="url" name="captcha_instance_url" value="{{ captcha_instance_url }}" placeholder="https://captcha.example.com">
    </div>
    <div class="form-group">
      <label>Site key</label>
      <input type="text" name="captcha_site_key" value="{{ captcha_site_key }}" placeholder="your-site-key">
    </div>
    <div class="form-group">
      <label>Secret <span class="hint">(leave empty to keep current)</span></label>
      <input type="password" name="captcha_secret" value="" placeholder="Leave empty to keep unchanged">
    </div>
    <div class="form-group">
      <label>Widget script URL <span class="hint">(optional)</span></label>
      <input type="url" name="captcha_widget_url" value="{{ captcha_widget_url }}" placeholder="https://cdn.jsdelivr.net/npm/cap-widget">
      <span style="font-size: 0.8rem; color: var(--text-muted);">Override if the CDN is blocked. Changes take effect immediately after saving.</span>
    </div>
    <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem;">Leave instance URL, site key and secret empty to disable captcha on booking pages.</p>
    <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save captcha settings</button>
  </form>
</div>

<!-- Jitsi auto-generated meeting links -->
<div class="card">
  <h2>Jitsi (auto-generated meeting links)</h2>
  <div style="margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-secondary);">
    Status: {% if jitsi_configured %}<strong style="color: var(--success);">enabled</strong>{% else %}<span style="color: var(--text-muted);">disabled</span>{% endif %}
    {% if jitsi_base_url %}&middot; Base URL: <span style="color: var(--text-muted);">{{ jitsi_base_url }}</span>{% endif %}
  </div>
  <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.75rem;">
    When an event type's location is set to "Jitsi (auto-generated room)", calrs builds a fresh room URL per booking by appending the pattern below to your Jitsi base URL. No external API call is needed.
  </p>
  <form method="post" action="/dashboard/admin/jitsi">
    <div class="form-group">
      <label>Base URL</label>
      <input type="url" name="jitsi_base_url" value="{{ jitsi_base_url }}" placeholder="https://meet.example.com">
    </div>
    <div class="form-group">
      <label>Display name <span class="hint">(optional)</span></label>
      <input type="text" name="jitsi_display_name" value="{{ jitsi_display_name }}" placeholder="e.g. Meet DYB">
      <span style="font-size: 0.8rem; color: var(--text-muted);">Shown to guests on the slot picker and booking form. Defaults to "Video call" if empty.</span>
    </div>
    <div class="form-group">
      <label>Room name pattern</label>
      <input type="text" id="jitsi_pattern" name="jitsi_pattern" value="{{ jitsi_pattern }}" placeholder="{{ jitsi_default_pattern }}" oninput="updateJitsiRandomWarning()">
      <span style="font-size: 0.8rem; color: var(--text-muted);">
        Available tokens: <code>{username}</code> (host), <code>{event}</code> (event type slug), <code>{date}</code> (YYYYMMDD), <code>{random}</code> (8 chars). Default: <code>{{ jitsi_default_pattern }}</code>.
      </span>
      <span id="jitsi_pattern_random_warning" style="display: none; font-size: 0.8rem; color: var(--warning-text, #b45309); margin-top: 0.25rem;">
        ⚠ Without <code>{random}</code> the room name is predictable: two guests booking the same event type on the same day end up sharing a room and can see each other's meeting. Stable rooms are allowed (e.g. one personal room per host), but only enable this if you understand the trade-off.
      </span>
    </div>
    <script>
      function updateJitsiRandomWarning() {
        var v = document.getElementById('jitsi_pattern').value || '';
        var def = {{ jitsi_default_pattern | tojson }};
        var effective = v.trim() === '' ? def : v;
        document.getElementById('jitsi_pattern_random_warning').style.display =
          effective.indexOf('{random}') === -1 ? '' : 'none';
      }
      updateJitsiRandomWarning();
    </script>
    <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem;">Leave the base URL empty to disable Jitsi auto-generation.</p>
    <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save Jitsi settings</button>
  </form>
</div>

<!-- Generic meeting webhook -->
<div class="card">
  <h2>Meeting webhook (bring-your-own provider)</h2>
  <div style="margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-secondary);">
    Status: {% if meeting_webhook_configured %}<strong style="color: var(--success);">enabled</strong>{% else %}<span style="color: var(--text-muted);">disabled</span>{% endif %}
    {% if meeting_webhook_url %}&middot; URL: <span style="color: var(--text-muted);">{{ meeting_webhook_url }}</span>{% endif %}
  </div>
  <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.75rem;">
    When an event type's location is set to "Webhook (custom provider)", calrs POSTs the booking payload to this URL on confirmation and expects a JSON body <code>{"url": "https://..."}</code> back.
  </p>
  <form method="post" action="/dashboard/admin/meeting-webhook">
    <div class="form-group">
      <label>Webhook URL</label>
      <input type="url" name="meeting_webhook_url" value="{{ meeting_webhook_url }}" placeholder="https://hooks.example.com/calrs">
    </div>
    <div class="form-group">
      <label>Display name <span class="hint">(optional)</span></label>
      <input type="text" name="meeting_webhook_display_name" value="{{ meeting_webhook_display_name }}" placeholder="e.g. Zoom, Whereby, Custom Meet">
      <span style="font-size: 0.8rem; color: var(--text-muted);">Shown to guests instead of the generic "Video call" badge.</span>
    </div>
    <div class="form-group">
      <label>Authentication</label>
      <select name="meeting_webhook_auth_mode">
        <option value="none"{% if meeting_webhook_auth_mode == "none" %} selected{% endif %}>None</option>
        <option value="hmac"{% if meeting_webhook_auth_mode == "hmac" %} selected{% endif %}>HMAC-SHA256 (X-Calrs-Signature header)</option>
      </select>
      <span style="font-size: 0.8rem; color: var(--text-muted);">With HMAC, calrs sends <code>X-Calrs-Signature: sha256=&lt;hex&gt;</code> over the raw request body.</span>
    </div>
    <div class="form-group">
      <label>Shared secret <span class="hint">(leave empty to keep current{% if meeting_webhook_has_secret %} — currently set{% endif %})</span></label>
      <input type="password" name="meeting_webhook_secret" value="" placeholder="Leave empty to keep unchanged">
    </div>
    <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem;">Leave the URL empty to disable the meeting webhook.</p>
    <button type="submit" class="slot-btn" style="cursor: pointer; font-weight: 600; color: var(--accent); border-color: var(--accent);">Save webhook settings</button>
  </form>
</div>

<!-- SMTP settings -->
<div class="card">
  <h2>SMTP settings</h2>
  {% if smtp_error %}
  <p style="color: var(--error-text); font-size: 0.875rem;">SMTP environment configuration error: {{ smtp_error }}</p>
  {% elif smtp_configured %}
  <div style="font-size: 0.875rem; color: var(--text-secondary); line-height: 1.8;">
    <div>Status: <strong style="color: var(--success);">configured</strong>{% if not smtp_enabled %} <span style="color: var(--error-text);">(disabled)</span>{% endif %}{% if smtp_from_env %} <span style="color: var(--text-muted);">(via environment)</span>{% endif %}</div>
    <div>Host: <span style="color: var(--text-muted);">{{ smtp_host }}:{{ smtp_port }}</span></div>
    <div>From: <span style="color: var(--text-muted);">{{ smtp_from_email }}</span></div>
  </div>
  {% else %}
  <p style="color: var(--text-muted); font-size: 0.875rem;">SMTP is not configured.</p>
  {% endif %}
  <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.75rem;">Configure via environment variables: <code>CALRS_SMTP_HOST</code>, <code>CALRS_SMTP_PORT</code>, <code>CALRS_SMTP_TLS_MODE</code> (<code>starttls</code> or <code>tls</code>), <code>CALRS_SMTP_USERNAME</code>, <code>CALRS_SMTP_PASSWORD</code>, <code>CALRS_SMTP_FROM_EMAIL</code>, <code>CALRS_SMTP_FROM_NAME</code>.</p>
</div>

<script>
(function() {
  var USER_PAGE_SIZE = 5;
  var userPage = 1;

  function getFilteredUsers() {
    var q = document.getElementById('user-search').value.toLowerCase();
    var items = document.querySelectorAll('.user-item');
    var filtered = [];
    items.forEach(function(el) {
      if (!q || el.dataset.name.indexOf(q) !== -1 || el.dataset.email.indexOf(q) !== -1) {
        filtered.push(el);
      }
    });
    return filtered;
  }

  function renderUserPage() {
    var items = document.querySelectorAll('.user-item');
    var filtered = getFilteredUsers();
    var totalPages = Math.max(1, Math.ceil(filtered.length / USER_PAGE_SIZE));
    if (userPage > totalPages) userPage = totalPages;
    var start = (userPage - 1) * USER_PAGE_SIZE;
    var end = start + USER_PAGE_SIZE;

    items.forEach(function(el) { el.style.display = 'none'; });
    filtered.forEach(function(el, i) {
      el.style.display = (i >= start && i < end) ? '' : 'none';
    });

    var noResults = document.getElementById('user-no-results');
    if (noResults) noResults.style.display = (items.length > 0 && filtered.length === 0) ? '' : 'none';

    var pag = document.getElementById('user-pagination');
    if (!pag) return;
    if (totalPages <= 1) { pag.innerHTML = ''; return; }

    var html = '<span style="font-size:0.8rem;color:var(--text-muted);">Page ' + userPage + ' of ' + totalPages + '</span> ';
    if (userPage > 1) html += '<button onclick="window._userPageNav(-1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&larr;</button> ';
    if (userPage < totalPages) html += '<button onclick="window._userPageNav(1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&rarr;</button>';
    pag.innerHTML = html;
  }

  window._userPageNav = function(dir) { userPage += dir; renderUserPage(); };

  window.filterUsers = function() { userPage = 1; renderUserPage(); };

  // Initial render
  if (document.getElementById('user-list')) renderUserPage();
})();

(function() {
  var GROUP_PAGE_SIZE = 5;
  var groupPage = 1;

  function getFilteredGroups() {
    var q = document.getElementById('group-search').value.toLowerCase();
    var items = document.querySelectorAll('.group-item');
    var filtered = [];
    items.forEach(function(el) {
      if (!q || el.dataset.name.indexOf(q) !== -1) {
        filtered.push(el);
      }
    });
    return filtered;
  }

  function renderGroupPage() {
    var items = document.querySelectorAll('.group-item');
    var filtered = getFilteredGroups();
    var totalPages = Math.max(1, Math.ceil(filtered.length / GROUP_PAGE_SIZE));
    if (groupPage > totalPages) groupPage = totalPages;
    var start = (groupPage - 1) * GROUP_PAGE_SIZE;
    var end = start + GROUP_PAGE_SIZE;

    items.forEach(function(el) { el.style.display = 'none'; });
    filtered.forEach(function(el, i) {
      el.style.display = (i >= start && i < end) ? '' : 'none';
    });

    var noResults = document.getElementById('group-no-results');
    if (noResults) noResults.style.display = (items.length > 0 && filtered.length === 0) ? '' : 'none';

    var pag = document.getElementById('group-pagination');
    if (!pag) return;
    if (totalPages <= 1) { pag.innerHTML = ''; return; }

    var html = '<span style="font-size:0.8rem;color:var(--text-muted);">Page ' + groupPage + ' of ' + totalPages + '</span> ';
    if (groupPage > 1) html += '<button onclick="window._groupPageNav(-1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&larr;</button> ';
    if (groupPage < totalPages) html += '<button onclick="window._groupPageNav(1)" class="slot-btn" style="font-size:0.8rem;cursor:pointer;padding:0.3rem 0.6rem;">&rarr;</button>';
    pag.innerHTML = html;
  }

  window._groupPageNav = function(dir) { groupPage += dir; renderGroupPage(); };
  window.filterGroups = function() { groupPage = 1; renderGroupPage(); };

  if (document.getElementById('group-list')) renderGroupPage();
})();

window.toggleGroupMembers = function(groupId) {
  var extras = document.querySelectorAll('.group-member-extra[data-group="' + groupId + '"]');
  var btn = document.querySelector('.group-expand-btn[data-group="' + groupId + '"]');
  if (!btn) return;
  var hidden = extras[0] && extras[0].style.display === 'none';
  extras.forEach(function(el) {
    el.style.display = hidden ? 'flex' : 'none';
  });
  btn.textContent = hidden ? 'Show fewer' : 'Show ' + extras.length + ' more\u2026';
};
</script>
{% endblock dashboard_content %}