{% extends "base.html" %}

{% block content %}
<style>
  .settings-wrap{
    max-width: 980px;
  }

  .settings-head{
    margin-bottom: 18px;
  }

  .settings-title{
    margin:0 0 8px 0;
    font-size:22px;
    font-weight: 900;
    letter-spacing: -0.02em;
  }

  .settings-sub{
    margin:0;
    color:#667085;
    line-height: 1.55;
  }

  .settings-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 980px){
    .settings-grid{
      grid-template-columns: 1fr 1fr;
      align-items:start;
    }
  }

  .card{
    background:#fff;
    border:1px solid rgba(16,24,40,.08);
    border-radius: 16px;
    padding:16px 16px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }

  .card-title{
    font-size: 12px;
    font-weight: 800;
    margin:0 0 12px;
    color:#475467;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }

  .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(16,24,40,.06);
  }
  .row:first-of-type{ border-top: none; padding-top: 2px; }

  .row-left{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .row-name{
    font-weight: 750;
    color:#101828;
    font-size: 14px;
  }

  .row-desc{
    color:#667085;
    font-size: 12px;
    line-height: 1.45;
  }

  .pill{
    font-size:12px;
    color:#475467;
    border:1px solid rgba(16,24,40,.10);
    background:#fff;
    padding:6px 10px;
    border-radius:999px;
    white-space:nowrap;
  }

  .note{
    margin-top: 10px;
    color:#667085;
    font-size: 12px;
    line-height: 1.55;
  }

  .kv{
    display:grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  .k{ color:#475467; font-weight:700; }
  .v{ color:#101828; word-break: break-word; }

  .muted{ color:#667085; }

  /* purely visual toggles (no backend changes) */
  .toggle{
    width: 44px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(16,24,40,.12);
    background: #f2f4f7;
    position: relative;
    flex-shrink: 0;
    opacity: .9;
  }
  .toggle::after{
    content:"";
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(16,24,40,.10);
    position:absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
  }
</style>

<div class="settings-wrap">
  <div class="settings-head">
    <h1 class="settings-title">Settings</h1>
    <p class="settings-sub">
      V1 settings are intentionally <strong>read-only</strong>. This page exists to make behavior clear and predictable.
    </p>
  </div>

  <div class="settings-grid">

    <!-- LEFT COLUMN -->
    <div class="card">
      <div class="card-title">Behavior</div>

      <div class="row">
        <div class="row-left">
          <div class="row-name">Local-only</div>
          <div class="row-desc">Reports are read from disk. Nothing is sent anywhere.</div>
        </div>
        <div class="pill">Always</div>
      </div>

      <div class="row">
        <div class="row-left">
          <div class="row-name">Read-only</div>
          <div class="row-desc">NarrativeOps doesn’t change system settings or run fixes.</div>
        </div>
        <div class="pill">Always</div>
      </div>

      <div class="row">
        <div class="row-left">
          <div class="row-name">No telemetry</div>
          <div class="row-desc">No tracking, no analytics, no background monitoring.</div>
        </div>
        <div class="pill">Always</div>
      </div>

      <div class="note">
        These are “hard rules” for V1. Future versions can add optional controls — without changing the calm, local-first design.
      </div>
    </div>

    <!-- RIGHT COLUMN -->
    <div class="card">
      <div class="card-title">V1 Toggles</div>

      <div class="row">
        <div class="row-left">
          <div class="row-name">Launch at startup</div>
          <div class="row-desc">Visual only in V1. No Windows startup changes yet.</div>
        </div>
        <div class="toggle" aria-hidden="true"></div>
      </div>

      <div class="row">
        <div class="row-left">
          <div class="row-name">Show weekly summaries</div>
          <div class="row-desc">Visual only in V1. Weekly content is already available in Overview.</div>
        </div>
        <div class="toggle" aria-hidden="true"></div>
      </div>

      <div class="row">
        <div class="row-left">
          <div class="row-name">Quiet mode</div>
          <div class="row-desc">V1 explains the philosophy. Actual filtering controls come later.</div>
        </div>
        <div class="toggle" aria-hidden="true"></div>
      </div>

      <div class="note">
        These switches are intentionally non-functional in V1 — they’re here to communicate direction without touching your system.
      </div>
    </div>

    <!-- FULL WIDTH CARD -->
    <div class="card" style="grid-column: 1 / -1;">
      <div class="card-title">Detected scan folders</div>

      <div class="kv">
        <div class="k">Daily scans</div>
        <div class="v">
          {% if history_meta and history_meta.daily_dir %}
            {{ history_meta.daily_dir }}
          {% else %}
            <span class="muted">Not found yet</span>
          {% endif %}
        </div>

        <div class="k">Weekly scans</div>
        <div class="v">
          {% if history_meta and history_meta.weekly_dir %}
            {{ history_meta.weekly_dir }}
          {% else %}
            <span class="muted">Not found yet</span>
          {% endif %}
        </div>

        <div class="k">Last snapshot</div>
        <div class="v">
          {% if history_meta and history_meta.last_snapshot_label %}
            {{ history_meta.last_snapshot_label }}
          {% else %}
            <span class="muted">Not found</span>
          {% endif %}
        </div>

        <div class="k">Sources detected</div>
        <div class="v">
          {% if history_meta and history_meta.sources_expected is not none %}
            {{ history_meta.sources_found }} / {{ history_meta.sources_expected }}
          {% else %}
            <span class="muted">Not available</span>
          {% endif %}
        </div>
      </div>

      <div class="note">
        This is informational only. If these paths are “Not found yet”, it simply means Scan History didn’t detect folders in the expected locations.
      </div>
    </div>

  </div>
</div>
{% endblock %}
