{% import 'macro/accordion.html' as accordion %}

<!-- Helper macro for config badges with truncation -->
{% macro config_badges(var_name) %}
  {% set current_value = env_values[var_name] %}
  {% set default_value = config_defaults[var_name] %}
  {% set is_explicitly_set = env_explicit_values[var_name] %}

  <!-- Value badge -->
  {% if not is_explicitly_set %}
    <!-- Not in .env file, using default -->
    <span class="badge rounded-pill text-bg-secondary ms-2" data-badge-var="{{ var_name }}" data-badge-type="value">Unset</span>
    <span class="badge rounded-pill text-bg-light text-dark ms-1" data-badge-var="{{ var_name }}" data-badge-type="default">Default Value</span>
  {% elif current_value is sameas true %}
    <span class="badge rounded-pill text-bg-success ms-2" data-badge-var="{{ var_name }}" data-badge-type="value">True</span>
  {% elif current_value is sameas false %}
    <span class="badge rounded-pill text-bg-danger ms-2" data-badge-var="{{ var_name }}" data-badge-type="value">False</span>
  {% elif current_value == default_value %}
    <!-- Explicitly set to default value -->
    <span class="badge rounded-pill text-bg-light text-dark ms-2" data-badge-var="{{ var_name }}" data-badge-type="value">Default: {{ default_value }}</span>
  {% else %}
    <!-- For text/number fields that have been changed, show "Default: X" -->
    <span class="badge rounded-pill text-bg-light text-dark ms-2" data-badge-var="{{ var_name }}" data-badge-type="value">Default: {{ default_value }}</span>
  {% endif %}

  <!-- Changed badge -->
  {% if current_value != default_value %}
    <span class="badge rounded-pill text-bg-warning ms-1" data-badge-var="{{ var_name }}" data-badge-type="changed">Changed</span>
  {% endif %}
{% endmacro %}

<!-- Configuration Status -->
<div id="config-status" class="mb-3 px-3 pt-3">
  <!-- Status indicators -->
</div>

<!-- Badge Legend -->
<div class="alert alert-info mb-3 mx-3">
  <h6 class="mb-2"><i class="ri-information-line"></i> Badge Legend</h6>
  <div class="row g-2">
    <div class="col-md-6">
      <small>
        <span class="badge rounded-pill text-bg-success">True</span> Boolean setting enabled<br>
        <span class="badge rounded-pill text-bg-danger">False</span> Boolean setting disabled<br>
        <span class="badge rounded-pill text-bg-primary">Set</span> Custom value configured
      </small>
    </div>
    <div class="col-md-6">
      <small>
        <span class="badge rounded-pill text-bg-secondary">Unset</span> Not in .env file<br>
        <span class="badge rounded-pill text-bg-light text-dark">Default Value</span> Using default value<br>
        <span class="badge rounded-pill text-bg-warning">Changed</span> Modified from default
      </small>
    </div>
  </div>
</div>

<!-- Live Settings Accordion -->
{{ accordion.header('Live Settings', 'live-settings', 'admin', expanded=true, icon='settings-4-line', class='p-3') }}
  <div class="mb-3">
    <span class="badge text-bg-success">Changes Applied On Save</span>
  </div>
          <!-- Action buttons -->
          <div class="d-flex gap-2 justify-content-end mb-4">
            <button id="config-save-all" class="btn btn-success">
              <i class="ri-save-line"></i> Save All Changes
            </button>
            <button id="config-refresh" class="btn btn-outline-secondary">
              <i class="ri-refresh-line"></i> Refresh
            </button>
            <button id="config-reset" class="btn btn-outline-secondary">
              <i class="ri-restart-line"></i> Reset to Defaults
            </button>
          </div>

          <!-- Live configuration controls -->

          <!-- Menu Visibility -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3">Menu Visibility</h6>

          <div class="row g-3">
            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ADD_SET" data-var="BK_HIDE_ADD_SET">
                <label class="form-check-label" for="BK_HIDE_ADD_SET">
                  BK_HIDE_ADD_SET {{ config_badges('BK_HIDE_ADD_SET') }}
                  <div class="text-muted small">Hide the "Add Set" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ADD_BULK_SET" data-var="BK_HIDE_ADD_BULK_SET">
                <label class="form-check-label" for="BK_HIDE_ADD_BULK_SET">
                  BK_HIDE_ADD_BULK_SET {{ config_badges('BK_HIDE_ADD_BULK_SET') }}
                  <div class="text-muted small">Hide the "Add Bulk Set" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ADMIN" data-var="BK_HIDE_ADMIN">
                <label class="form-check-label" for="BK_HIDE_ADMIN">
                  BK_HIDE_ADMIN {{ config_badges('BK_HIDE_ADMIN') }}
                  <div class="text-muted small">Hide the "Admin" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ALL_INSTRUCTIONS" data-var="BK_HIDE_ALL_INSTRUCTIONS">
                <label class="form-check-label" for="BK_HIDE_ALL_INSTRUCTIONS">
                  BK_HIDE_ALL_INSTRUCTIONS {{ config_badges('BK_HIDE_ALL_INSTRUCTIONS') }}
                  <div class="text-muted small">Hide the "Instructions" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ALL_MINIFIGURES" data-var="BK_HIDE_ALL_MINIFIGURES">
                <label class="form-check-label" for="BK_HIDE_ALL_MINIFIGURES">
                  BK_HIDE_ALL_MINIFIGURES {{ config_badges('BK_HIDE_ALL_MINIFIGURES') }}
                  <div class="text-muted small">Hide the "Minifigures" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ALL_PARTS" data-var="BK_HIDE_ALL_PARTS">
                <label class="form-check-label" for="BK_HIDE_ALL_PARTS">
                  BK_HIDE_ALL_PARTS {{ config_badges('BK_HIDE_ALL_PARTS') }}
                  <div class="text-muted small">Hide the "Parts" menu entry</div>
                </label>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ALL_PROBLEMS_PARTS" data-var="BK_HIDE_ALL_PROBLEMS_PARTS">
                <label class="form-check-label" for="BK_HIDE_ALL_PROBLEMS_PARTS">
                  BK_HIDE_ALL_PROBLEMS_PARTS {{ config_badges('BK_HIDE_ALL_PROBLEMS_PARTS') }}
                  <div class="text-muted small">Hide the "Problems" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ALL_SETS" data-var="BK_HIDE_ALL_SETS">
                <label class="form-check-label" for="BK_HIDE_ALL_SETS">
                  BK_HIDE_ALL_SETS {{ config_badges('BK_HIDE_ALL_SETS') }}
                  <div class="text-muted small">Hide the "Sets" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_ALL_STORAGES" data-var="BK_HIDE_ALL_STORAGES">
                <label class="form-check-label" for="BK_HIDE_ALL_STORAGES">
                  BK_HIDE_ALL_STORAGES {{ config_badges('BK_HIDE_ALL_STORAGES') }}
                  <div class="text-muted small">Hide the "Storages" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_STATISTICS" data-var="BK_HIDE_STATISTICS">
                <label class="form-check-label" for="BK_HIDE_STATISTICS">
                  BK_HIDE_STATISTICS {{ config_badges('BK_HIDE_STATISTICS') }}
                  <div class="text-muted small">Hide the "Statistics" menu entry</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_WISHES" data-var="BK_HIDE_WISHES">
                <label class="form-check-label" for="BK_HIDE_WISHES">
                  BK_HIDE_WISHES {{ config_badges('BK_HIDE_WISHES') }}
                  <div class="text-muted small">Hide the "Wishes" menu entry</div>
                </label>
              </div>
            </div>
          </div>

          <!-- Table Display -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">Table Display</h6>

          <div class="row g-3">
            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_SET_INSTRUCTIONS" data-var="BK_HIDE_SET_INSTRUCTIONS">
                <label class="form-check-label" for="BK_HIDE_SET_INSTRUCTIONS">
                  BK_HIDE_SET_INSTRUCTIONS {{ config_badges('BK_HIDE_SET_INSTRUCTIONS') }}
                  <div class="text-muted small">Hide instructions section in set details</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_TABLE_DAMAGED_PARTS" data-var="BK_HIDE_TABLE_DAMAGED_PARTS">
                <label class="form-check-label" for="BK_HIDE_TABLE_DAMAGED_PARTS">
                  BK_HIDE_TABLE_DAMAGED_PARTS {{ config_badges('BK_HIDE_TABLE_DAMAGED_PARTS') }}
                  <div class="text-muted small">Hide the "Damaged" column in parts tables</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_TABLE_MISSING_PARTS" data-var="BK_HIDE_TABLE_MISSING_PARTS">
                <label class="form-check-label" for="BK_HIDE_TABLE_MISSING_PARTS">
                  BK_HIDE_TABLE_MISSING_PARTS {{ config_badges('BK_HIDE_TABLE_MISSING_PARTS') }}
                  <div class="text-muted small">Hide the "Missing" column in parts tables</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_HIDE_TABLE_CHECKED_PARTS" data-var="BK_HIDE_TABLE_CHECKED_PARTS">
                <label class="form-check-label" for="BK_HIDE_TABLE_CHECKED_PARTS">
                  BK_HIDE_TABLE_CHECKED_PARTS {{ config_badges('BK_HIDE_TABLE_CHECKED_PARTS') }}
                  <div class="text-muted small">Hide the "Checked" column in parts tables</div>
                </label>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_SHOW_GRID_FILTERS" data-var="BK_SHOW_GRID_FILTERS">
                <label class="form-check-label" for="BK_SHOW_GRID_FILTERS">
                  BK_SHOW_GRID_FILTERS {{ config_badges('BK_SHOW_GRID_FILTERS') }}
                  <div class="text-muted small">Show filter controls on grid views by default</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_SHOW_GRID_SORT" data-var="BK_SHOW_GRID_SORT">
                <label class="form-check-label" for="BK_SHOW_GRID_SORT">
                  BK_SHOW_GRID_SORT {{ config_badges('BK_SHOW_GRID_SORT') }}
                  <div class="text-muted small">Show sort options on grids by default</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_SHOW_SETS_DUPLICATE_FILTER" data-var="BK_SHOW_SETS_DUPLICATE_FILTER">
                <label class="form-check-label" for="BK_SHOW_SETS_DUPLICATE_FILTER">
                  BK_SHOW_SETS_DUPLICATE_FILTER {{ config_badges('BK_SHOW_SETS_DUPLICATE_FILTER') }}
                  <div class="text-muted small">Show duplicate/consolidated filter button on sets page</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_INDEPENDENT_ACCORDIONS" data-var="BK_INDEPENDENT_ACCORDIONS">
                <label class="form-check-label" for="BK_INDEPENDENT_ACCORDIONS">
                  BK_INDEPENDENT_ACCORDIONS {{ config_badges('BK_INDEPENDENT_ACCORDIONS') }}
                  <div class="text-muted small">Make accordion sections independent (can open multiple)</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_SETS_CONSOLIDATION" data-var="BK_SETS_CONSOLIDATION">
                <label class="form-check-label" for="BK_SETS_CONSOLIDATION">
                  BK_SETS_CONSOLIDATION {{ config_badges('BK_SETS_CONSOLIDATION') }}
                  <div class="text-muted small">Enable set consolidation/grouping functionality</div>
                </label>
              </div>
            </div>
          </div>

          <!-- Pagination Settings -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">Pagination Settings</h6>

          <!-- Sets and Parts (Top Row) -->
          <div class="row g-4 mb-4">
            <!-- Sets Column -->
            <div class="col-md-6">
              <h6 class="fw-bold text-secondary mb-3">Sets</h6>
              <div class="row g-3">
                <div class="col-12">
                  <div class="form-check form-switch">
                    <input class="form-check-input config-toggle" type="checkbox" id="BK_SETS_SERVER_SIDE_PAGINATION" data-var="BK_SETS_SERVER_SIDE_PAGINATION">
                    <label class="form-check-label" for="BK_SETS_SERVER_SIDE_PAGINATION">
                      BK_SETS_SERVER_SIDE_PAGINATION {{ config_badges('BK_SETS_SERVER_SIDE_PAGINATION') }}
                      <div class="text-muted small">Enable/disable pagination for sets</div>
                    </label>
                  </div>
                </div>
                <div class="col-12">
                  <label for="BK_SETS_PAGINATION_SIZE_DESKTOP" class="form-label">
                    BK_SETS_PAGINATION_SIZE_DESKTOP {{ config_badges('BK_SETS_PAGINATION_SIZE_DESKTOP') }}
                    <div class="text-muted small">Sets per page on desktop</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_SETS_PAGINATION_SIZE_DESKTOP" data-var="BK_SETS_PAGINATION_SIZE_DESKTOP" min="1" max="100">
                </div>
                <div class="col-12">
                  <label for="BK_SETS_PAGINATION_SIZE_MOBILE" class="form-label">
                    BK_SETS_PAGINATION_SIZE_MOBILE {{ config_badges('BK_SETS_PAGINATION_SIZE_MOBILE') }}
                    <div class="text-muted small">Sets per page on mobile</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_SETS_PAGINATION_SIZE_MOBILE" data-var="BK_SETS_PAGINATION_SIZE_MOBILE" min="1" max="50">
                </div>
              </div>
            </div>

            <!-- Parts Column -->
            <div class="col-md-6">
              <h6 class="fw-bold text-secondary mb-3">Parts</h6>
              <div class="row g-3">
                <div class="col-12">
                  <div class="form-check form-switch">
                    <input class="form-check-input config-toggle" type="checkbox" id="BK_PARTS_SERVER_SIDE_PAGINATION" data-var="BK_PARTS_SERVER_SIDE_PAGINATION">
                    <label class="form-check-label" for="BK_PARTS_SERVER_SIDE_PAGINATION">
                      BK_PARTS_SERVER_SIDE_PAGINATION {{ config_badges('BK_PARTS_SERVER_SIDE_PAGINATION') }}
                      <div class="text-muted small">Enable/disable pagination for parts</div>
                    </label>
                  </div>
                </div>
                <div class="col-12">
                  <label for="BK_PARTS_PAGINATION_SIZE_DESKTOP" class="form-label">
                    BK_PARTS_PAGINATION_SIZE_DESKTOP {{ config_badges('BK_PARTS_PAGINATION_SIZE_DESKTOP') }}
                    <div class="text-muted small">Parts per page on desktop</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_PARTS_PAGINATION_SIZE_DESKTOP" data-var="BK_PARTS_PAGINATION_SIZE_DESKTOP" min="1" max="100">
                </div>
                <div class="col-12">
                  <label for="BK_PARTS_PAGINATION_SIZE_MOBILE" class="form-label">
                    BK_PARTS_PAGINATION_SIZE_MOBILE {{ config_badges('BK_PARTS_PAGINATION_SIZE_MOBILE') }}
                    <div class="text-muted small">Parts per page on mobile</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_PARTS_PAGINATION_SIZE_MOBILE" data-var="BK_PARTS_PAGINATION_SIZE_MOBILE" min="1" max="50">
                </div>
              </div>
            </div>
          </div>

          <!-- Minifigures and Problems (Bottom Row) -->
          <div class="row g-4 mb-4">
            <!-- Minifigures Column -->
            <div class="col-md-6">
              <h6 class="fw-bold text-secondary mb-3">Minifigures</h6>
              <div class="row g-3">
                <div class="col-12">
                  <div class="form-check form-switch">
                    <input class="form-check-input config-toggle" type="checkbox" id="BK_MINIFIGURES_SERVER_SIDE_PAGINATION" data-var="BK_MINIFIGURES_SERVER_SIDE_PAGINATION">
                    <label class="form-check-label" for="BK_MINIFIGURES_SERVER_SIDE_PAGINATION">
                      BK_MINIFIGURES_SERVER_SIDE_PAGINATION {{ config_badges('BK_MINIFIGURES_SERVER_SIDE_PAGINATION') }}
                      <div class="text-muted small">Enable/disable pagination for minifigures</div>
                    </label>
                  </div>
                </div>
                <div class="col-12">
                  <label for="BK_MINIFIGURES_PAGINATION_SIZE_DESKTOP" class="form-label">
                    BK_MINIFIGURES_PAGINATION_SIZE_DESKTOP {{ config_badges('BK_MINIFIGURES_PAGINATION_SIZE_DESKTOP') }}
                    <div class="text-muted small">Minifigures per page on desktop</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_MINIFIGURES_PAGINATION_SIZE_DESKTOP" data-var="BK_MINIFIGURES_PAGINATION_SIZE_DESKTOP" min="1" max="100">
                </div>
                <div class="col-12">
                  <label for="BK_MINIFIGURES_PAGINATION_SIZE_MOBILE" class="form-label">
                    BK_MINIFIGURES_PAGINATION_SIZE_MOBILE {{ config_badges('BK_MINIFIGURES_PAGINATION_SIZE_MOBILE') }}
                    <div class="text-muted small">Minifigures per page on mobile</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_MINIFIGURES_PAGINATION_SIZE_MOBILE" data-var="BK_MINIFIGURES_PAGINATION_SIZE_MOBILE" min="1" max="50">
                </div>
              </div>
            </div>

            <!-- Problems Column -->
            <div class="col-md-6">
              <h6 class="fw-bold text-secondary mb-3">Problems</h6>
              <div class="row g-3">
                <div class="col-12">
                  <div class="form-check form-switch">
                    <input class="form-check-input config-toggle" type="checkbox" id="BK_PROBLEMS_SERVER_SIDE_PAGINATION" data-var="BK_PROBLEMS_SERVER_SIDE_PAGINATION">
                    <label class="form-check-label" for="BK_PROBLEMS_SERVER_SIDE_PAGINATION">
                      BK_PROBLEMS_SERVER_SIDE_PAGINATION {{ config_badges('BK_PROBLEMS_SERVER_SIDE_PAGINATION') }}
                      <div class="text-muted small">Enable/disable pagination for problems</div>
                    </label>
                  </div>
                </div>
                <div class="col-12">
                  <label for="BK_PROBLEMS_PAGINATION_SIZE_DESKTOP" class="form-label">
                    BK_PROBLEMS_PAGINATION_SIZE_DESKTOP {{ config_badges('BK_PROBLEMS_PAGINATION_SIZE_DESKTOP') }}
                    <div class="text-muted small">Problem parts per page on desktop</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_PROBLEMS_PAGINATION_SIZE_DESKTOP" data-var="BK_PROBLEMS_PAGINATION_SIZE_DESKTOP" min="1" max="100">
                </div>
                <div class="col-12">
                  <label for="BK_PROBLEMS_PAGINATION_SIZE_MOBILE" class="form-label">
                    BK_PROBLEMS_PAGINATION_SIZE_MOBILE {{ config_badges('BK_PROBLEMS_PAGINATION_SIZE_MOBILE') }}
                    <div class="text-muted small">Problem parts per page on mobile</div>
                  </label>
                  <input type="number" class="form-control config-number" id="BK_PROBLEMS_PAGINATION_SIZE_MOBILE" data-var="BK_PROBLEMS_PAGINATION_SIZE_MOBILE" min="1" max="50">
                </div>
              </div>
            </div>
          </div>

          <!-- Client side pagination -->
          <h6 class="fw-bold text-secondary mb-3">Client side pagination</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="BK_DEFAULT_TABLE_PER_PAGE" class="form-label">
                BK_DEFAULT_TABLE_PER_PAGE {{ config_badges('BK_DEFAULT_TABLE_PER_PAGE') }}
                <div class="text-muted small">Default number of items per page in tables</div>
              </label>
              <input type="number" class="form-control config-number" id="BK_DEFAULT_TABLE_PER_PAGE" data-var="BK_DEFAULT_TABLE_PER_PAGE" min="1" max="500">
            </div>
          </div>

          <!-- Features & External Services -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">Features & External Services</h6>

          <div class="row g-3">
            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_RANDOM" data-var="BK_RANDOM">
                <label class="form-check-label" for="BK_RANDOM">
                  BK_RANDOM {{ config_badges('BK_RANDOM') }}
                  <div class="text-muted small">Shuffle the lists on the front page</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_BRICKLINK_LINKS" data-var="BK_BRICKLINK_LINKS">
                <label class="form-check-label" for="BK_BRICKLINK_LINKS">
                  BK_BRICKLINK_LINKS {{ config_badges('BK_BRICKLINK_LINKS') }}
                  <div class="text-muted small">Display BrickLink links wherever applicable</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_REBRICKABLE_LINKS" data-var="BK_REBRICKABLE_LINKS">
                <label class="form-check-label" for="BK_REBRICKABLE_LINKS">
                  BK_REBRICKABLE_LINKS {{ config_badges('BK_REBRICKABLE_LINKS') }}
                  <div class="text-muted small">Display Rebrickable links wherever applicable</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_SKIP_SPARE_PARTS" data-var="BK_SKIP_SPARE_PARTS">
                <label class="form-check-label" for="BK_SKIP_SPARE_PARTS">
                  BK_SKIP_SPARE_PARTS {{ config_badges('BK_SKIP_SPARE_PARTS') }}
                  <div class="text-muted small">Skip spare parts when importing sets</div>
                </label>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_USE_REMOTE_IMAGES" data-var="BK_USE_REMOTE_IMAGES">
                <label class="form-check-label" for="BK_USE_REMOTE_IMAGES">
                  BK_USE_REMOTE_IMAGES {{ config_badges('BK_USE_REMOTE_IMAGES') }}
                  <div class="text-muted small">Use remote images from Rebrickable CDN instead of local storage</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_STATISTICS_SHOW_CHARTS" data-var="BK_STATISTICS_SHOW_CHARTS">
                <label class="form-check-label" for="BK_STATISTICS_SHOW_CHARTS">
                  BK_STATISTICS_SHOW_CHARTS {{ config_badges('BK_STATISTICS_SHOW_CHARTS') }}
                  <div class="text-muted small">Show collection growth charts on statistics page</div>
                </label>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input config-toggle" type="checkbox" id="BK_STATISTICS_DEFAULT_EXPANDED" data-var="BK_STATISTICS_DEFAULT_EXPANDED">
                <label class="form-check-label" for="BK_STATISTICS_DEFAULT_EXPANDED">
                  BK_STATISTICS_DEFAULT_EXPANDED {{ config_badges('BK_STATISTICS_DEFAULT_EXPANDED') }}
                  <div class="text-muted small">Expand all statistics sections by default</div>
                </label>
              </div>
            </div>
          </div>

          <!-- Advanced Settings -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">Advanced Settings</h6>

          <div class="row g-3">
            <div class="col-md-6">
              <label for="BK_PEERON_DOWNLOAD_DELAY" class="form-label">
                BK_PEERON_DOWNLOAD_DELAY {{ config_badges('BK_PEERON_DOWNLOAD_DELAY') }}
                <div class="text-muted small">Delay between Peeron downloads in milliseconds</div>
              </label>
              <input type="number" class="form-control config-number" id="BK_PEERON_DOWNLOAD_DELAY" data-var="BK_PEERON_DOWNLOAD_DELAY" min="0" max="10000">
            </div>

            <div class="col-md-6">
              <label for="BK_PEERON_MIN_IMAGE_SIZE" class="form-label">
                BK_PEERON_MIN_IMAGE_SIZE {{ config_badges('BK_PEERON_MIN_IMAGE_SIZE') }}
                <div class="text-muted small">Minimum valid image size in bytes</div>
              </label>
              <input type="number" class="form-control config-number" id="BK_PEERON_MIN_IMAGE_SIZE" data-var="BK_PEERON_MIN_IMAGE_SIZE" min="1000" max="1000000">
            </div>

            <div class="col-md-6">
              <label for="BK_REBRICKABLE_PAGE_SIZE" class="form-label">
                BK_REBRICKABLE_PAGE_SIZE {{ config_badges('BK_REBRICKABLE_PAGE_SIZE') }}
                <div class="text-muted small">Number of items per page for Rebrickable API requests</div>
              </label>
              <input type="number" class="form-control config-number" id="BK_REBRICKABLE_PAGE_SIZE" data-var="BK_REBRICKABLE_PAGE_SIZE" min="100" max="5000">
            </div>

            <div class="col-md-6">
              <label for="BK_ADMIN_DEFAULT_EXPANDED_SECTIONS" class="form-label">
                BK_ADMIN_DEFAULT_EXPANDED_SECTIONS {{ config_badges('BK_ADMIN_DEFAULT_EXPANDED_SECTIONS') }}
                <div class="text-muted small">Admin sections to expand by default (comma-separated)</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_ADMIN_DEFAULT_EXPANDED_SECTIONS" data-var="BK_ADMIN_DEFAULT_EXPANDED_SECTIONS">
            </div>
          </div>

          <!-- Default Ordering & Formatting -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">Default Ordering & Formatting</h6>

          <div class="row g-3">
            <div class="col-12">
              <label for="BK_INSTRUCTIONS_ALLOWED_EXTENSIONS" class="form-label">
                BK_INSTRUCTIONS_ALLOWED_EXTENSIONS {{ config_badges('BK_INSTRUCTIONS_ALLOWED_EXTENSIONS') }}
                <div class="text-muted small">Allowed file extensions for instructions (comma-separated)</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_INSTRUCTIONS_ALLOWED_EXTENSIONS" data-var="BK_INSTRUCTIONS_ALLOWED_EXTENSIONS">
            </div>

            <div class="col-12">
              <label for="BK_MINIFIGURES_DEFAULT_ORDER" class="form-label">
                BK_MINIFIGURES_DEFAULT_ORDER {{ config_badges('BK_MINIFIGURES_DEFAULT_ORDER') }}
                <div class="text-muted small">SQL ORDER BY clause for minifigures listing</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_MINIFIGURES_DEFAULT_ORDER" data-var="BK_MINIFIGURES_DEFAULT_ORDER">
            </div>

            <div class="col-12">
              <label for="BK_PARTS_DEFAULT_ORDER" class="form-label">
                BK_PARTS_DEFAULT_ORDER {{ config_badges('BK_PARTS_DEFAULT_ORDER') }}
                <div class="text-muted small">SQL ORDER BY clause for parts listing</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_PARTS_DEFAULT_ORDER" data-var="BK_PARTS_DEFAULT_ORDER">
            </div>

            <div class="col-12">
              <label for="BK_SETS_DEFAULT_ORDER" class="form-label">
                BK_SETS_DEFAULT_ORDER {{ config_badges('BK_SETS_DEFAULT_ORDER') }}
                <div class="text-muted small">SQL ORDER BY clause for sets listing</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_SETS_DEFAULT_ORDER" data-var="BK_SETS_DEFAULT_ORDER">
            </div>


            <div class="col-12">
              <label for="BK_PURCHASE_LOCATION_DEFAULT_ORDER" class="form-label">
                BK_PURCHASE_LOCATION_DEFAULT_ORDER {{ config_badges('BK_PURCHASE_LOCATION_DEFAULT_ORDER') }}
                <div class="text-muted small">SQL ORDER BY clause for purchase locations</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_PURCHASE_LOCATION_DEFAULT_ORDER" data-var="BK_PURCHASE_LOCATION_DEFAULT_ORDER">
            </div>

            <div class="col-12">
              <label for="BK_STORAGE_DEFAULT_ORDER" class="form-label">
                BK_STORAGE_DEFAULT_ORDER {{ config_badges('BK_STORAGE_DEFAULT_ORDER') }}
                <div class="text-muted small">SQL ORDER BY clause for storage locations</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_STORAGE_DEFAULT_ORDER" data-var="BK_STORAGE_DEFAULT_ORDER">
            </div>

            <div class="col-12">
              <label for="BK_WISHES_DEFAULT_ORDER" class="form-label">
                BK_WISHES_DEFAULT_ORDER {{ config_badges('BK_WISHES_DEFAULT_ORDER') }}
                <div class="text-muted small">SQL ORDER BY clause for wishes listing</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_WISHES_DEFAULT_ORDER" data-var="BK_WISHES_DEFAULT_ORDER">
            </div>
          </div>

          <!-- URL Patterns & Links -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">URL Patterns & Links</h6>

          <div class="row g-3">
            <div class="col-12">
              <label for="BK_BRICKLINK_LINK_PART_PATTERN" class="form-label">
                BK_BRICKLINK_LINK_PART_PATTERN {{ config_badges('BK_BRICKLINK_LINK_PART_PATTERN') }}
                <div class="text-muted small">Pattern for BrickLink part links (supports {part} and {color})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_BRICKLINK_LINK_PART_PATTERN" data-var="BK_BRICKLINK_LINK_PART_PATTERN">
            </div>

            <div class="col-12">
              <label for="BK_REBRICKABLE_LINK_MINIFIGURE_PATTERN" class="form-label">
                BK_REBRICKABLE_LINK_MINIFIGURE_PATTERN {{ config_badges('BK_REBRICKABLE_LINK_MINIFIGURE_PATTERN') }}
                <div class="text-muted small">Pattern for Rebrickable minifigure links (supports {figure})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_REBRICKABLE_LINK_MINIFIGURE_PATTERN" data-var="BK_REBRICKABLE_LINK_MINIFIGURE_PATTERN">
            </div>

            <div class="col-12">
              <label for="BK_REBRICKABLE_LINK_PART_PATTERN" class="form-label">
                BK_REBRICKABLE_LINK_PART_PATTERN {{ config_badges('BK_REBRICKABLE_LINK_PART_PATTERN') }}
                <div class="text-muted small">Pattern for Rebrickable part links (supports {part} and {color})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_REBRICKABLE_LINK_PART_PATTERN" data-var="BK_REBRICKABLE_LINK_PART_PATTERN">
            </div>

            <div class="col-12">
              <label for="BK_REBRICKABLE_LINK_INSTRUCTIONS_PATTERN" class="form-label">
                BK_REBRICKABLE_LINK_INSTRUCTIONS_PATTERN {{ config_badges('BK_REBRICKABLE_LINK_INSTRUCTIONS_PATTERN') }}
                <div class="text-muted small">Pattern for Rebrickable instruction links (supports {path})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_REBRICKABLE_LINK_INSTRUCTIONS_PATTERN" data-var="BK_REBRICKABLE_LINK_INSTRUCTIONS_PATTERN">
            </div>

            <div class="col-12">
              <label for="BK_PEERON_INSTRUCTION_PATTERN" class="form-label">
                BK_PEERON_INSTRUCTION_PATTERN {{ config_badges('BK_PEERON_INSTRUCTION_PATTERN') }}
                <div class="text-muted small">Pattern for Peeron instruction URLs (supports {set_number} and {version_number})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_PEERON_INSTRUCTION_PATTERN" data-var="BK_PEERON_INSTRUCTION_PATTERN">
            </div>

            <div class="col-12">
              <label for="BK_PEERON_SCAN_PATTERN" class="form-label">
                BK_PEERON_SCAN_PATTERN {{ config_badges('BK_PEERON_SCAN_PATTERN') }}
                <div class="text-muted small">Pattern for Peeron scan URLs (supports {set_number} and {version_number})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_PEERON_SCAN_PATTERN" data-var="BK_PEERON_SCAN_PATTERN">
            </div>

            <div class="col-12">
              <label for="BK_PEERON_THUMBNAIL_PATTERN" class="form-label">
                BK_PEERON_THUMBNAIL_PATTERN {{ config_badges('BK_PEERON_THUMBNAIL_PATTERN') }}
                <div class="text-muted small">Pattern for Peeron thumbnail URLs (supports {set_number} and {version_number})</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_PEERON_THUMBNAIL_PATTERN" data-var="BK_PEERON_THUMBNAIL_PATTERN">
            </div>
          </div>

          <!-- Images & Resources -->
          <h6 class="fw-bold text-primary border-bottom pb-1 mb-3 mt-4">Images & Resources</h6>

          <div class="row g-3">
            <div class="col-12">
              <label for="BK_REBRICKABLE_IMAGE_NIL" class="form-label">
                BK_REBRICKABLE_IMAGE_NIL {{ config_badges('BK_REBRICKABLE_IMAGE_NIL') }}
                <div class="text-muted small">URL for missing image placeholder</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_REBRICKABLE_IMAGE_NIL" data-var="BK_REBRICKABLE_IMAGE_NIL">
            </div>

            <div class="col-12">
              <label for="BK_REBRICKABLE_IMAGE_NIL_MINIFIGURE" class="form-label">
                BK_REBRICKABLE_IMAGE_NIL_MINIFIGURE {{ config_badges('BK_REBRICKABLE_IMAGE_NIL_MINIFIGURE') }}
                <div class="text-muted small">URL for missing minifigure image placeholder</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_REBRICKABLE_IMAGE_NIL_MINIFIGURE" data-var="BK_REBRICKABLE_IMAGE_NIL_MINIFIGURE">
            </div>

            <div class="col-12">
              <label for="BK_RETIRED_SETS_FILE_URL" class="form-label">
                BK_RETIRED_SETS_FILE_URL {{ config_badges('BK_RETIRED_SETS_FILE_URL') }}
                <div class="text-muted small">URL to the retired sets CSV file</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_RETIRED_SETS_FILE_URL" data-var="BK_RETIRED_SETS_FILE_URL">
            </div>

            <div class="col-12">
              <label for="BK_RETIRED_SETS_PATH" class="form-label">
                BK_RETIRED_SETS_PATH {{ config_badges('BK_RETIRED_SETS_PATH') }}
                <div class="text-muted small">Local path to store retired sets CSV</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_RETIRED_SETS_PATH" data-var="BK_RETIRED_SETS_PATH">
            </div>

            <div class="col-12">
              <label for="BK_THEMES_FILE_URL" class="form-label">
                BK_THEMES_FILE_URL {{ config_badges('BK_THEMES_FILE_URL') }}
                <div class="text-muted small">URL to the Rebrickable themes CSV file</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_THEMES_FILE_URL" data-var="BK_THEMES_FILE_URL">
            </div>

            <div class="col-12">
              <label for="BK_THEMES_PATH" class="form-label">
                BK_THEMES_PATH {{ config_badges('BK_THEMES_PATH') }}
                <div class="text-muted small">Local path to store themes CSV</div>
              </label>
              <input type="text" class="form-control config-text" id="BK_THEMES_PATH" data-var="BK_THEMES_PATH">
            </div>
          </div>
{{ accordion.footer() }}

<!-- Static Settings Accordion -->
{{ accordion.header('Static Settings', 'static-settings', 'admin', expanded=false, icon='database-2-line', class='p-3') }}
  <div class="mb-3">
    <span class="badge text-bg-warning">Requires Restart</span>
  </div>
  <!-- Static configuration with editable fields -->

          <div class="alert alert-warning">
            <h6><i class="ri-warning-line"></i> Restart Required</h6>
            These settings require an application restart to take effect. Values can be edited here and will be saved to the .env file.
          </div>

          <!-- Authentication -->
          <h6 class="fw-bold text-secondary border-bottom pb-1 mb-3">Authentication & Security</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="static-BK_AUTHENTICATION_PASSWORD" class="form-label">
                BK_AUTHENTICATION_PASSWORD {{ config_badges('BK_AUTHENTICATION_PASSWORD') }}
                <div class="text-muted small">Password for authentication system</div>
              </label>
              <input type="password" class="form-control config-static" id="static-BK_AUTHENTICATION_PASSWORD" data-var="BK_AUTHENTICATION_PASSWORD">
            </div>
            <div class="col-md-6">
              <label for="static-BK_AUTHENTICATION_KEY" class="form-label">
                BK_AUTHENTICATION_KEY {{ config_badges('BK_AUTHENTICATION_KEY') }}
                <div class="text-muted small">Secret key for session signing</div>
              </label>
              <input type="password" class="form-control config-static" id="static-BK_AUTHENTICATION_KEY" data-var="BK_AUTHENTICATION_KEY">
            </div>
          </div>

          <!-- Server Configuration -->
          <h6 class="fw-bold text-secondary border-bottom pb-1 mb-3 mt-4">Server Configuration</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="static-BK_HOST" class="form-label">
                BK_HOST {{ config_badges('BK_HOST') }}
                <div class="text-muted small">Server host address to bind to</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_HOST" data-var="BK_HOST">
            </div>
            <div class="col-md-6">
              <label for="static-BK_PORT" class="form-label">
                BK_PORT {{ config_badges('BK_PORT') }}
                <div class="text-muted small">Port number for the web server</div>
              </label>
              <input type="number" class="form-control config-static" id="static-BK_PORT" data-var="BK_PORT" min="1" max="65535">
            </div>
            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-static-toggle" type="checkbox" id="static-BK_DEBUG" data-var="BK_DEBUG">
                <label class="form-check-label" for="static-BK_DEBUG">
                  BK_DEBUG {{ config_badges('BK_DEBUG') }}
                  <div class="text-muted small">Enable debug mode</div>
                </label>
              </div>
            </div>
            <div class="col-md-6">
              <label for="static-BK_DOMAIN_NAME" class="form-label">
                BK_DOMAIN_NAME {{ config_badges('BK_DOMAIN_NAME') }}
                <div class="text-muted small">Domain name for CORS configuration</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_DOMAIN_NAME" data-var="BK_DOMAIN_NAME">
            </div>
            <div class="col-md-6">
              <label for="static-BK_TIMEZONE" class="form-label">
                BK_TIMEZONE {{ config_badges('BK_TIMEZONE') }}
                <div class="text-muted small">Application timezone</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_TIMEZONE" data-var="BK_TIMEZONE">
            </div>
          </div>

          <!-- Database & Storage -->
          <h6 class="fw-bold text-secondary border-bottom pb-1 mb-3 mt-4">Database & Storage</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="static-BK_DATABASE_PATH" class="form-label">
                BK_DATABASE_PATH {{ config_badges('BK_DATABASE_PATH') }}
                <div class="text-muted small">Path to the SQLite database file</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_DATABASE_PATH" data-var="BK_DATABASE_PATH">
            </div>
            <div class="col-md-6">
              <label for="static-BK_INSTRUCTIONS_FOLDER" class="form-label">
                BK_INSTRUCTIONS_FOLDER {{ config_badges('BK_INSTRUCTIONS_FOLDER') }}
                <div class="text-muted small">Folder for instruction files</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_INSTRUCTIONS_FOLDER" data-var="BK_INSTRUCTIONS_FOLDER">
            </div>
            <div class="col-md-6">
              <label for="static-BK_PARTS_FOLDER" class="form-label">
                BK_PARTS_FOLDER {{ config_badges('BK_PARTS_FOLDER') }}
                <div class="text-muted small">Folder for part images</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_PARTS_FOLDER" data-var="BK_PARTS_FOLDER">
            </div>
            <div class="col-md-6">
              <label for="static-BK_SETS_FOLDER" class="form-label">
                BK_SETS_FOLDER {{ config_badges('BK_SETS_FOLDER') }}
                <div class="text-muted small">Folder for set images</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_SETS_FOLDER" data-var="BK_SETS_FOLDER">
            </div>
            <div class="col-md-6">
              <label for="static-BK_MINIFIGURES_FOLDER" class="form-label">
                BK_MINIFIGURES_FOLDER {{ config_badges('BK_MINIFIGURES_FOLDER') }}
                <div class="text-muted small">Folder for minifigure images</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_MINIFIGURES_FOLDER" data-var="BK_MINIFIGURES_FOLDER">
            </div>
          </div>

          <!-- API Configuration -->
          <h6 class="fw-bold text-secondary border-bottom pb-1 mb-3 mt-4">API Configuration</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="static-BK_REBRICKABLE_API_KEY" class="form-label">
                BK_REBRICKABLE_API_KEY {{ config_badges('BK_REBRICKABLE_API_KEY') }}
                <div class="text-muted small">API key for Rebrickable integration</div>
              </label>
              <input type="password" class="form-control config-static" id="static-BK_REBRICKABLE_API_KEY" data-var="BK_REBRICKABLE_API_KEY">
            </div>
            <div class="col-md-6">
              <label for="static-BK_USER_AGENT" class="form-label">
                BK_USER_AGENT {{ config_badges('BK_USER_AGENT') }}
                <div class="text-muted small">User agent string for HTTP requests</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_USER_AGENT" data-var="BK_USER_AGENT">
            </div>
            <div class="col-md-6">
              <label for="static-BK_REBRICKABLE_USER_AGENT" class="form-label">
                BK_REBRICKABLE_USER_AGENT {{ config_badges('BK_REBRICKABLE_USER_AGENT') }}
                <div class="text-muted small">User agent for Rebrickable API requests</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_REBRICKABLE_USER_AGENT" data-var="BK_REBRICKABLE_USER_AGENT">
            </div>
          </div>

          <!-- Date & Currency Formats -->
          <h6 class="fw-bold text-secondary border-bottom pb-1 mb-3 mt-4">Date & Currency Formats</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="static-BK_DATABASE_TIMESTAMP_FORMAT" class="form-label">
                BK_DATABASE_TIMESTAMP_FORMAT {{ config_badges('BK_DATABASE_TIMESTAMP_FORMAT') }}
                <div class="text-muted small">Database timestamp format</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_DATABASE_TIMESTAMP_FORMAT" data-var="BK_DATABASE_TIMESTAMP_FORMAT">
            </div>
            <div class="col-md-6">
              <label for="static-BK_FILE_DATETIME_FORMAT" class="form-label">
                BK_FILE_DATETIME_FORMAT {{ config_badges('BK_FILE_DATETIME_FORMAT') }}
                <div class="text-muted small">File datetime format</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_FILE_DATETIME_FORMAT" data-var="BK_FILE_DATETIME_FORMAT">
            </div>
            <div class="col-md-6">
              <label for="static-BK_PURCHASE_DATE_FORMAT" class="form-label">
                BK_PURCHASE_DATE_FORMAT {{ config_badges('BK_PURCHASE_DATE_FORMAT') }}
                <div class="text-muted small">Purchase date format</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_PURCHASE_DATE_FORMAT" data-var="BK_PURCHASE_DATE_FORMAT">
            </div>
            <div class="col-md-6">
              <label for="static-BK_PURCHASE_CURRENCY" class="form-label">
                BK_PURCHASE_CURRENCY {{ config_badges('BK_PURCHASE_CURRENCY') }}
                <div class="text-muted small">Purchase currency</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_PURCHASE_CURRENCY" data-var="BK_PURCHASE_CURRENCY">
            </div>
          </div>

          <!-- Socket Configuration -->
          <h6 class="fw-bold text-secondary border-bottom pb-1 mb-3 mt-4">Socket Configuration</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="static-BK_SOCKET_NAMESPACE" class="form-label">
                BK_SOCKET_NAMESPACE {{ config_badges('BK_SOCKET_NAMESPACE') }}
                <div class="text-muted small">Socket.IO namespace</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_SOCKET_NAMESPACE" data-var="BK_SOCKET_NAMESPACE">
            </div>
            <div class="col-md-6">
              <label for="static-BK_SOCKET_PATH" class="form-label">
                BK_SOCKET_PATH {{ config_badges('BK_SOCKET_PATH') }}
                <div class="text-muted small">Socket.IO path</div>
              </label>
              <input type="text" class="form-control config-static" id="static-BK_SOCKET_PATH" data-var="BK_SOCKET_PATH">
            </div>
            <div class="col-md-6">
              <div class="form-check form-switch">
                <input class="form-check-input config-static-toggle" type="checkbox" id="static-BK_NO_THREADED_SOCKET" data-var="BK_NO_THREADED_SOCKET">
                <label class="form-check-label" for="static-BK_NO_THREADED_SOCKET">
                  BK_NO_THREADED_SOCKET {{ config_badges('BK_NO_THREADED_SOCKET') }}
                  <div class="text-muted small">Disable threaded socket mode</div>
                </label>
              </div>
            </div>
          </div>

  <!-- Save Button for Static Settings -->
  <div class="d-flex gap-2 justify-content-end mt-4">
    <button id="config-save-static" class="btn btn-warning">
      <i class="ri-save-line"></i> Save Static Settings to .env
    </button>
  </div>
{{ accordion.footer() }}

<!-- Initialize Configuration Data -->
<script type="text/javascript">
  window.CURRENT_CONFIG = {
    {% for env_name, value in env_values.items() %}
      '{{ env_name }}': {{ value|tojson }},
    {% endfor %}
  };

  window.DEFAULT_CONFIG = {
    {% for env_name, value in config_defaults.items() %}
      '{{ env_name }}': {{ value|tojson }},
    {% endfor %}
  };

  window.EXPLICIT_VALUES = {
    {% for env_name, is_explicit in env_explicit_values.items() %}
      '{{ env_name }}': {{ is_explicit|tojson }},
    {% endfor %}
  };
</script>

<!-- Configuration Management JavaScript -->
<script src="{{ url_for('static', filename='scripts/admin_config.js') }}"></script>