{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm">
        {% with staff_nav_active="site_settings" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% with breadcrumbs=[
            {"name": "Staff", "href": "/staff"},
            {"name": "Site Settings"}
          ] %}
            {% include "partials/breadcrumbs.html" %}
          {% endwith %}
          <h1 class="h3 mb-1">Site Settings</h1>
          <p class="text-muted mb-0">Manage site-wide configuration.</p>
        </div>
      </div>
      {% with staff_site_settings_tab_active="site_settings" %}
        {% include "partials/staff_site_settings_tabs.html" %}
      {% endwith %}
      {% if notice %}
        <div class="alert alert-success">{{ notice }}</div>
      {% endif %}
      {% if error %}
        <div class="alert alert-danger">{{ error }}</div>
      {% endif %}
      <div class="card shadow-sm">
        <div class="card-body">
          <form method="post" action="/staff/site-settings">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="signups_enabled" name="signups_enabled" value="true" {% if settings.signups_enabled %}checked{% endif %} />
                <label class="form-check-label" for="signups_enabled">Enable new user signups</label>
              </div>
              <div class="form-text text-muted">When disabled, the signup page will show an error and the API create-user endpoint will reject non-staff requests.</div>
            </div>
            <div class="mb-3" id="signups-require-invite-group">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="signups_require_invite" name="signups_require_invite" value="true" {% if settings.signups_require_invite %}checked{% endif %} {% if not settings.signups_enabled %}disabled{% endif %} />
                <label class="form-check-label" for="signups_require_invite">Require invite links for signups</label>
              </div>
              <div class="form-text text-muted">When enabled, non-staff signups must use an active invite link created from the staff invites screen.</div>
            </div>
            <div class="mb-3" id="signup-invite-min-account-age-group">
              <label class="form-label" for="signup_invite_min_account_age">Minimum account age to create signup invites</label>
              <select class="form-select" id="signup_invite_min_account_age" name="signup_invite_min_account_age" {% if not settings.signups_enabled or not settings.signups_require_invite %}disabled{% endif %}>
                <option value="any"{% if settings.signup_invite_min_account_age == "any" %} selected{% endif %}>Any</option>
                <option value="1h"{% if settings.signup_invite_min_account_age == "1h" %} selected{% endif %}>1 hour</option>
                <option value="1d"{% if settings.signup_invite_min_account_age == "1d" %} selected{% endif %}>1 day</option>
                <option value="3d"{% if settings.signup_invite_min_account_age == "3d" %} selected{% endif %}>3 days</option>
                <option value="1w"{% if settings.signup_invite_min_account_age == "1w" %} selected{% endif %}>1 week</option>
                <option value="1mo"{% if settings.signup_invite_min_account_age == "1mo" %} selected{% endif %}>1 month</option>
                <option value="3mo"{% if settings.signup_invite_min_account_age == "3mo" %} selected{% endif %}>3 months</option>
                <option value="1y"{% if settings.signup_invite_min_account_age == "1y" %} selected{% endif %}>1 year</option>
              </select>
              <div class="form-text text-muted">How old a user account must be before the user can create signup invites. Does not apply to staff.</div>
            </div>
            <div class="mb-3" id="signup-invite-max-per-24h-group">
              <label class="form-label" for="signup_invite_max_per_24h">Maximum signup invites per 24 hours</label>
              <input class="form-control" type="number" min="0" step="1" id="signup_invite_max_per_24h" name="signup_invite_max_per_24h" value="{{ settings.signup_invite_max_per_24h }}" {% if not settings.signups_enabled or not settings.signups_require_invite %}disabled readonly{% endif %} />
              <div class="form-text text-muted">Maximum number of signup invites a user may create per 24 hours.</div>
            </div>
            <div class="mb-3" id="signup-invite-creators-group">
              <label class="form-label" for="signup_invite_creators">Who can create invites</label>
              <select class="form-select" id="signup_invite_creators" name="signup_invite_creators" {% if not settings.signups_enabled or not settings.signups_require_invite %}disabled{% endif %}>
                <option value="staff"{% if settings.signup_invite_creators == "staff" %} selected{% endif %}>Staff only</option>
                <option value="anyone"{% if settings.signup_invite_creators == "anyone" %} selected{% endif %}>Anyone</option>
              </select>
              <div class="form-text text-muted">When set to &quot;Anyone&quot;, users can create invites from their profile, subject to account age and daily limits.</div>
            </div>
            <div class="text-muted small mb-3">Last updated {{ settings.updated_at | timeago }}</div>
            <button type="submit" class="btn btn-primary">Save settings</button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      var $signupsEnabled = $("#signups_enabled");
      var $requireInviteGroup = $("#signups-require-invite-group");
      var $requireInvite = $("#signups_require_invite");
      var $minAccountAgeGroup = $("#signup-invite-min-account-age-group");
      var $minAccountAge = $("#signup_invite_min_account_age");
      var $maxPer24hGroup = $("#signup-invite-max-per-24h-group");
      var $maxPer24h = $("#signup_invite_max_per_24h");
      var $creatorsGroup = $("#signup-invite-creators-group");
      var $creators = $("#signup_invite_creators");
      if (!$signupsEnabled.length || !$requireInviteGroup.length || !$requireInvite.length || !$minAccountAgeGroup.length || !$minAccountAge.length || !$maxPer24hGroup.length || !$maxPer24h.length || !$creatorsGroup.length || !$creators.length) return;

      function syncInviteSetting() {
        var enabled = $signupsEnabled.is(":checked");
        var requireInvite = enabled && $requireInvite.is(":checked");
        $requireInvite.prop("disabled", !enabled);
        if (!enabled) $requireInvite.prop("checked", false);
        $minAccountAge.prop("disabled", !requireInvite);
        $maxPer24h.prop("disabled", !requireInvite);
        $maxPer24h.prop("readonly", !requireInvite);
        $creators.prop("disabled", !requireInvite);
      }

      $signupsEnabled.on("change", syncInviteSetting);
      $requireInvite.on("change", syncInviteSetting);
      syncInviteSetting();
    })();
  </script>
{% endblock %}