{# Iterates over the user's per-profile Overview layout, rendering one
   row at a time via per-key partials. `layout` comes from /portfolio/body.
   Hidden rows are omitted when edit_mode is off (no HTMX request for them).
   In edit mode (purely client-side via Alpine), hidden rows render as a
   placeholder users can click to restore. #}
{% if oob_subline_html %}{{ oob_subline_html|safe }}{% endif %}

{% set _row_templates = {
  "inbox":      "_portfolio_row_inbox.html",
  "kpis":       "_portfolio_row_kpis.html",
  "curves":     "_portfolio_row_curves.html",
  "monthly_pl": "_portfolio_row_monthly_pl.html",
  "allocation": "_portfolio_row_allocation.html",
  "top_movers": "_portfolio_row_top_movers.html",
} %}
<div id="overview-rows" class="js-reveal" data-edit-mode="off">
  {% set _visible_count = layout.rows | reject('in', layout.hidden) | list | length %}
  {% if _visible_count == 0 %}
    <div class="row-hidden-placeholder mb-4">
      All Overview rows are hidden. Click <strong>Edit layout</strong> in the toolbar to restore them.
    </div>
  {% endif %}
  {# Hidden rows are emitted as compact placeholders so Edit layout can
     surface them — clicking the eye on a placeholder reloads the page so
     the row's full content can be rendered server-side. Visible rows render
     content; clicking the eye there flips to a client-rendered placeholder
     and POSTs the new visibility without a reload. #}
  {% for key in layout.rows %}
    {% set _hidden = key in layout.hidden %}
    <div class="overview-row{% if _hidden %} overview-row-hidden{% endif %}"
         data-row-key="{{ key }}"
         style="--reveal-i: {{ loop.index0 }}"
         x-data='{ hidden: {{ _hidden|tojson }} }'>
      <button class="row-grip" data-handle aria-label="Drag to reorder" type="button">
        <img src="/static/icons/grip-vertical.svg?v={{ asset_v }}" class="w-4 h-4 icon-mono" alt="">
      </button>
      <button class="row-eye" aria-label="Toggle visibility" type="button"
              @click="
                const wasHidden = hidden;
                hidden = !hidden;
                const rowEl = $el.closest('.overview-row');
                rowEl.classList.toggle('overview-row-hidden', hidden);
                fetch('/portfolio/layout/visibility', {
                  method: 'POST',
                  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                  body: new URLSearchParams({row: '{{ key }}', hidden: String(hidden)})
                })
                  .then(r => {
                    if (!r.ok) {
                      // Server rejected — roll back optimistic toggle so the UI
                      // matches server state instead of silently diverging.
                      console.warn('visibility toggle failed:', r.status);
                      hidden = wasHidden;
                      rowEl.classList.toggle('overview-row-hidden', hidden);
                      return;
                    }
                    if (wasHidden) window.location.reload();
                  })
                  .catch(err => {
                    console.warn('visibility toggle error:', err);
                    hidden = wasHidden;
                    rowEl.classList.toggle('overview-row-hidden', hidden);
                  });
              ">
        <img src="/static/icons/eye.svg?v={{ asset_v }}" class="w-4 h-4 icon-mono" alt="Show" x-show="!hidden">
        <img src="/static/icons/eye-off.svg?v={{ asset_v }}" class="w-4 h-4 icon-mono" alt="Hide" x-show="hidden">
      </button>
      {% if _hidden %}
        <div class="row-hidden-placeholder">{{ key|replace('_', ' ')|capitalize }} hidden · click the eye to restore</div>
      {% else %}
        <div x-show="!hidden">
          {% include _row_templates[key] %}
        </div>
        <div class="row-hidden-placeholder" x-show="hidden" style="display:none">
          {{ key|replace('_', ' ')|capitalize }} hidden · click the eye to restore
        </div>
      {% endif %}
    </div>
  {% endfor %}
</div>