<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NarrativeOps — Local UI</title>

  <style>
    :root{
      --bg:#f6f7f9;
      --card:#ffffff;
      --border:#e6e8ee;
      --text:#101828;
      --muted:#667085;
      --shadow: 0 1px 2px rgba(0,0,0,.05);
      --shadow-soft: 0 20px 60px rgba(16,24,40,.08);
      --radius: 16px;

      --sidebar:#f1f3f7;
      --sidebar-2:#eef1f6;
      --accent:#2e7dd7;
      --accent-soft: rgba(46,125,215,.10);
    }

    *{ box-sizing:border-box; }

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      font-size:15px;
      line-height:1.65;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .app{
      min-height: 100vh;
      display:flex;
      padding: 26px 18px;
    }

    .shell{
      width: min(1180px, 100%);
      margin: 0 auto;
      display:flex;
      border-radius: 22px;
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      border:1px solid var(--border);
      background: var(--card);
    }

    /* Sidebar */
    .sidebar{
      width: 280px;
      background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
      border-right: 1px solid rgba(16,24,40,.06);
      padding: 18px 14px;
      display:flex;
      flex-direction:column;
      gap: 14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 10px 10px;
      border-radius: 14px;
    }

    .brand img{
      width: 36px;
      height: 36px;
      border-radius: 12px;
      object-fit: contain;
      flex-shrink:0;
    }

    .brand .name{
      font-weight: 800;
      letter-spacing: -0.01em;
      font-size: 15px;
      line-height: 1.2;
    }

    .brand .sub{
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
    }

    .nav{
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding: 6px 6px;
    }

    .nav a{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 12px;
      color: #344054;
      text-decoration:none;
      font-weight: 650;
      font-size: 14px;
      user-select: none;
      cursor: pointer; /* NOW INTERACTIVE */
    }

    .nav a .dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(52,64,84,.25);
    }

    .nav a.active{
      background: var(--accent-soft);
      color: #0b4aa2;
    }
    .nav a.active .dot{
      background: var(--accent);
    }

    .side-foot{
      margin-top:auto;
      padding: 10px 10px 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    /* Main */
    .main{
      flex:1;
      padding: 22px 24px 26px;
      background: linear-gradient(180deg, #ffffff, #fbfcfe);
    }

    .topline{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
      margin-bottom: 16px;
    }

    .headline{
      margin:0;
      font-size: 34px;
      line-height: 1.12;
      letter-spacing: -0.03em;
      font-weight: 900;
    }

    .lead{
      margin: 10px 0 0 0;
      color: var(--muted);
      max-width: 70ch;
      font-size: 15px;
      line-height: 1.55;
    }

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

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 10px;
    }

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

    .stack{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

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

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

    .status-row{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .status-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:16px;
      font-weight:850;
      letter-spacing:-0.01em;
      color:#111827;
    }

    .status-reason{
      font-size:13px;
      color:var(--muted);
      line-height:1.55;
    }

    .narrative{
      padding:18px 18px 16px;
    }

    .row{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:10px;
      flex-wrap:wrap;
      margin: 2px 0 12px;
    }

    .row .hint{
      color:var(--muted);
      font-size:12px;
    }

    select{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      font-size:13px;
      padding:8px 34px 8px 10px;
      border:1px solid rgba(16,24,40,.12);
      border-radius:12px;
      background: #fff;
      color: var(--text);
      box-shadow: 0 1px 0 rgba(0,0,0,.02);
      cursor:pointer;
      outline:none;
    }

    select:focus{
      border-color:#d0d5dd;
      box-shadow: 0 0 0 3px rgba(208,213,221,.4);
    }

    .select-wrap{
      position:relative;
      display:inline-block;
    }
    .select-wrap:after{
      content:"▾";
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-52%);
      font-size:12px;
      color:var(--muted);
      pointer-events:none;
    }

    ul{
      margin: 8px 0 0 0;
      padding:0;
      list-style:none;
    }

    li{
      margin: 10px 0;
      padding-left: 14px;
      position: relative;
      line-height:1.65;
    }

    li:before{
      content:"";
      width:5px;
      height:5px;
      border-radius:999px;
      background:#cbd5e1;
      position:absolute;
      left:0;
      top: 0.72em;
    }

    .actions li:before{
      background:#d0d5dd;
    }

    .quiet-note{
      margin-top: 14px;
      color: var(--muted);
      font-size: 12px;
      line-height:1.5;
      max-width: 80ch;
    }

    .empty{
      margin-top: 8px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    .empty strong{
      color:#475467;
      font-weight:700;
    }

    /* Small screens: sidebar becomes top strip */
    @media (max-width: 760px){
      .app{ padding: 14px 12px; }
      .shell{ flex-direction:column; }
      .sidebar{ width:100%; border-right:none; border-bottom:1px solid rgba(16,24,40,.06); }
      .nav{ flex-direction:row; overflow:auto; }
      .nav a{ white-space:nowrap; }
    }
  </style>
</head>

<body>
  <div class="app">
    <div class="shell">

      <!-- LEFT SIDEBAR -->
      <aside class="sidebar">
        <div class="brand">
          <img src="{{ url_for('static', filename='logo.png') }}" alt="NarrativeOps logo">
          <div>
            <div class="name">NarrativeOps</div>
            <div class="sub">Local system narrative</div>
          </div>
        </div>

        <!-- CHANGED: real links + active state driven by active_page -->
        <nav class="nav" aria-label="Primary">
          <a href="{{ url_for('home') }}" class="{% if active_page=='overview' %}active{% endif %}">
            <span class="dot"></span>System Overview
          </a>
          <a href="{{ url_for('history') }}" class="{% if active_page=='history' %}active{% endif %}">
            <span class="dot"></span>Scan History
          </a>
          <a href="{{ url_for('settings') }}" class="{% if active_page=='settings' %}active{% endif %}">
            <span class="dot"></span>Settings
          </a>
        </nav>

        <div class="side-foot">
          Quiet by default.<br>
          Local-only. No telemetry.
        </div>
      </aside>

      <!-- MAIN CONTENT -->
      <main class="main">

        <div class="topline">
          <div>
            <h1 class="headline">{{ status_label }}</h1>
            <p class="lead">
              {{ status_reason
                 | replace("warning-level", "notable")
                 | replace("Warning-level", "Notable") }}
            </p>
          </div>

          <div class="tag">Read-only • Local</div>
        </div>

        <div class="grid">

          <!-- LEFT: Status + Actions -->
          <div class="stack">

            <div class="card">
              <div class="card-title">System Status</div>
              <div class="status-row">
                <div class="status-label">{{ status_label }}</div>
                <div class="status-reason">
                  {{ status_reason
                     | replace("warning-level", "notable")
                     | replace("Warning-level", "Notable") }}
                </div>
              </div>
            </div>

            {# Filter out placeholder actions like "None" #}
            {% set actions_kept = namespace(lines=[]) %}
            {% if suggested_actions %}
              {% for a in suggested_actions %}
                {% set s = (a|string).strip() %}
                {% if s and s|lower != "none" and s|lower != "- none" %}
                  {% set _ = actions_kept.lines.append(a) %}
                {% endif %}
              {% endfor %}
            {% endif %}

            {% if actions_kept.lines|length > 0 %}
            <div class="card">
              <div class="card-title">Suggested Actions</div>
              <ul class="actions">
                {% for action in actions_kept.lines %}
                <li>{{ action }}</li>
                {% endfor %}
              </ul>
            </div>
            {% else %}
            <div class="card">
              <div class="card-title">Suggested Actions</div>
              <div class="empty"><strong>No action is needed right now.</strong> If something earns attention, it will appear here.</div>
            </div>
            {% endif %}

          </div>

          <!-- RIGHT: Narratives -->
          <div class="stack">

            <div class="card narrative">
              <div class="card-title">Today’s Story</div>

              {% if available_days %}
              <div class="row">
                <div class="hint">Viewing</div>
                <div class="select-wrap">
                  <select id="daySelect">
                    {% for d in available_days %}
                    <option value="{{ d }}" {% if d == selected_day %}selected{% endif %}>{{ d }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              {% endif %}

              {% set kept = namespace(lines=[]) %}
              {% for line in todays_story %}
                {% set s = (line|string).strip() %}
                {% if s and s|lower != "none" and s|lower != "- none" %}
                  {% set softened = s
                    | replace("(warning)", "")
                    | replace(" (warning)", "")
                    | replace("includes warning", "includes a notable change")
                    | replace("Includes warning", "Includes a notable change")
                    | replace("No urgent issues", "No significant issues")
                    | replace("no urgent issues", "no significant issues")
                    | replace("may need review", "may be worth a look")
                    | replace("May need review", "May be worth a look")
                  %}
                  {% set _ = kept.lines.append(softened) %}
                {% endif %}
              {% endfor %}

              {% if kept.lines|length == 0 %}
                <div class="empty"><strong>Nothing meaningful stood out today.</strong> That’s a normal outcome.</div>
              {% else %}
                <ul>
                  {% for line in kept.lines %}
                  <li>{{ line }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>

            <div class="card narrative">
              <div class="card-title">This Week’s Story</div>

              {% if available_weeks %}
              <div class="row">
                <div class="hint">Viewing</div>
                <div class="select-wrap">
                  <select id="weekSelect">
                    {% for w in available_weeks %}
                    <option value="{{ w }}" {% if w == selected_week %}selected{% endif %}>{{ w }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              {% endif %}

              {% set wkept = namespace(lines=[]) %}
              {% for line in weeks_story %}
                {% set s = (line|string).strip() %}
                {% if s and s|lower != "none" and s|lower != "- none" %}
                  {% set softened = s
                    | replace("(warning)", "")
                    | replace(" (warning)", "")
                    | replace("includes warning", "includes a notable change")
                    | replace("Includes warning", "Includes a notable change")
                    | replace("No urgent issues", "No significant issues")
                    | replace("no urgent issues", "no significant issues")
                    | replace("may need review", "may be worth a look")
                    | replace("May need review", "May be worth a look")
                  %}
                  {% set _ = wkept.lines.append(softened) %}
                {% endif %}
              {% endfor %}

              {% if wkept.lines|length == 0 %}
                <div class="empty"><strong>No notable patterns were detected this week.</strong> System behavior appeared steady.</div>
              {% else %}
                <ul>
                  {% for line in wkept.lines %}
                  <li>{{ line }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>

            <div class="quiet-note">Silence is valid. Actions appear only when earned.</div>

          </div>
        </div>

      </main>

    </div>
  </div>

  <script>
  (function () {
    const day = document.getElementById("daySelect");
    const week = document.getElementById("weekSelect");

    function reload(d, w) {
      const p = new URLSearchParams(window.location.search);
      if (d) p.set("day", d);
      if (w) p.set("week", w);
      window.location.search = p.toString();
    }

    if (day) day.addEventListener("change", () => reload(day.value, week ? week.value : null));
    if (week) week.addEventListener("change", () => reload(day ? day.value : null, week.value));
  })();
  </script>
</body>
</html>
