{% extends "base.html" %} {% block title %}Theme Settings · CalMiner{% endblock
%} {% block content %}
<section class="page-header">
  <div>
    <h1>Theme Settings</h1>
    <p class="page-subtitle">
      Adjust CalMiner theme colors and preview changes instantly.
    </p>
  </div>
</section>

<section class="panel" id="theme-settings" data-api="/api/settings/css">
  <header class="panel-header">
    <div>
      <h2>Theme Colors</h2>
      <p class="chart-subtitle">
        Update global CSS variables to customize CalMiner&apos;s appearance.
      </p>
    </div>
  </header>
  <form id="theme-settings-form" class="form-grid color-form-grid" novalidate>
    {% for key, value in css_variables.items() %} {% set env_meta =
    css_env_override_meta.get(key) %}
    <label
      class="color-form-field{% if env_meta %} is-env-override{% endif %}"
      data-variable="{{ key }}"
    >
      <span class="color-field-header">
        <span class="color-field-name">{{ key }}</span>
        <span class="color-field-default"
          >Default: {{ css_defaults[key] }}</span
        >
      </span>
      <span class="color-field-helper" id="color-helper-{{ loop.index }}"
        >Accepts hex, rgb(a), or hsl(a) values.</span
      >
      {% if env_meta %}
      <span class="color-env-flag"
        >Managed via {{ env_meta.env_var }} (read-only)</span
      >
      {% endif %}
      <span class="color-input-row">
        <input
          type="text"
          name="{{ key }}"
          class="color-value-input"
          value="{{ value }}"
          autocomplete="off"
          aria-describedby="color-helper-{{ loop.index }}"
          {%
          if
          env_meta
          %}disabled
          aria-disabled="true"
          data-env-override="true"
          {%
          endif
          %}
        />
        <span
          class="color-preview"
          aria-hidden="true"
          style="background: {{ value }}"
        ></span>
      </span>
    </label>
    {% endfor %}

    <div class="button-row">
      <button type="submit" class="btn primary">Save Theme</button>
      <button type="button" class="btn" id="theme-settings-reset">
        Reset to Defaults
      </button>
    </div>
  </form>
  {% from "partials/components.html" import feedback with context %} {{
  feedback("theme-settings-feedback") }}
</section>

<section class="panel" id="theme-env-overrides">
  <header class="panel-header">
    <div>
      <h2>Environment Overrides</h2>
      <p class="chart-subtitle">
        The following CSS variables are controlled via environment variables and
        take precedence over database values.
      </p>
    </div>
  </header>
  {% if css_env_override_rows %}
  <div class="table-container env-overrides-table">
    <table aria-label="Environment-controlled theme variables">
      <thead>
        <tr>
          <th scope="col">CSS Variable</th>
          <th scope="col">Environment Variable</th>
          <th scope="col">Value</th>
        </tr>
      </thead>
      <tbody>
        {% for row in css_env_override_rows %}
        <tr>
          <td><code>{{ row.css_key }}</code></td>
          <td><code>{{ row.env_var }}</code></td>
          <td><code>{{ row.value }}</code></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="empty-state">No environment overrides configured.</p>
  {% endif %}
</section>
{% endblock %} {% block scripts %} {{ super() }}
<script id="theme-settings-data" type="application/json">
  {{ {
    "variables": css_variables,
    "defaults": css_defaults,
    "envOverrides": css_env_overrides,
    "envSources": css_env_override_rows
  } | tojson }}
</script>
<script src="/static/js/settings.js"></script>
{% endblock %}