{% extends 'ls_portal/base.html' %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
<style>
  .accounts-scroll { display:grid; gap:10px; align-content:start; padding-bottom:12px; }
  .accounts-filter-panel,
  .account-card { padding:12px; min-width:0; overflow:hidden; }
  .account-card[hidden] { display:none !important; }
  .account-form { display:grid; gap:12px; min-width:0; }
  .account-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; min-width:0; }
  .account-grid label, .permission-grid label { display:grid; gap:6px; font-size:13px; color:var(--muted); }
  .permission-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; min-width:0; }
  .permission-check { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); color:var(--text); }
  .permission-check input { width:auto; margin:0; }
  .matrix-wrap { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .matrix { width:100%; min-width:720px; border-collapse:collapse; }
  .matrix th, .matrix td { border-bottom:1px solid var(--line); padding:8px 6px; vertical-align:top; text-align:left; }
  .matrix th { color:var(--muted); font-size:12px; text-transform:uppercase; }
  .matrix .notes-cell { min-width:240px; }
  .matrix .bulk-cell { width:90px; text-align:center; }
  .matrix .bulk-cell input { width:auto; }
  .matrix select, .matrix input { min-width:0; max-width:100%; }
  .section-title { margin:0 0 4px; font-size:14px; }
  .section-copy { margin:0; color:var(--muted); font-size:12px; }
  .sticky-save { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .style-list { display:grid; gap:8px; }
  .style-item { display:grid; gap:4px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
  .style-item strong { font-size:13px; }
  .style-item span { font-size:12px; color:var(--muted); }
  .account-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
  .account-head-copy { min-width:0; }
  .account-kicker-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .account-search-grid { display:grid; gap:8px; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); align-items:end; }
  .account-search-grid label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
  .account-summary-row { display:flex; gap:6px; flex-wrap:wrap; }
  .account-summary-chip { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:5px 9px; font-size:11px; color:var(--muted); background:rgba(255,255,255,.04); }
  .account-section { border-top:1px solid var(--line); padding-top:10px; }
  .account-section details { display:grid; gap:10px; }
  .account-section summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .account-section summary::-webkit-details-marker { display:none; }
  .account-section-toggle {
    color:var(--muted);
    font-size:12px;
    transition:transform .15s ease;
  }
  .account-section details[open] .account-section-toggle { transform:rotate(180deg); }
  .account-grid > *, .permission-grid > *, .sticky-save > *, .header-top > * { min-width:0; }
  .header-top, .section-copy, .style-item, .permission-check { overflow-wrap:anywhere; }
  input, select { max-width:100%; min-width:0; }
  @media (max-width:900px) {
    .account-grid, .permission-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:640px) {
    .account-search-grid,
    .account-grid, .permission-grid { grid-template-columns:1fr; }
    .matrix-wrap { overflow:hidden; }
    .matrix,
    .matrix tbody,
    .matrix tr,
    .matrix td { display:block; width:100%; min-width:0; }
    .matrix { min-width:0; border-collapse:separate; }
    .matrix thead { display:none; }
    .matrix tr {
      margin:0 0 10px;
      padding:12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:var(--panel2);
    }
    .matrix td {
      border:0;
      padding:6px 0;
    }
    .matrix td::before {
      content:attr(data-label);
      display:block;
      margin-bottom:4px;
      color:var(--muted);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .matrix .notes-cell,
    .matrix .bulk-cell { min-width:0; width:auto; text-align:left; }
    .matrix .bulk-cell input { margin-left:0; }
    .sticky-save { flex-direction:column; align-items:stretch; }
    .account-head { flex-direction:column; }
  }
</style>

<section class="chat-shell">
  <header class="chat-header header app-topbar">
    <div class="slim-header-row">
      <div class="slim-title-wrap">
        <div class="kicker">Haigh Environmental Executive Assistant</div>
        <h1 class="title">Accounts</h1>
        <div class="subtitle">Operator permissions, identity details, and system boundaries.</div>
      </div>
      <details class="header-menu">
        <summary class="burger-button" aria-label="Open menu">☰</summary>
        <nav class="menu-panel" aria-label="Operator navigation">
          <a href="{{ url_for('ls_portal_bp.home') }}">Chat</a>
          <a href="{{ url_for('ls_portal_bp.plans') }}">To-Dos</a>
          {% if approvals_enabled %}
            <a href="{{ url_for('ls_portal_bp.approvals') }}">Approvals</a>
          {% endif %}
          <a href="{{ url_for('ls_portal_bp.ops') }}">Ops</a>
          <a class="is-active" href="{{ url_for('ls_portal_bp.accounts') }}">Accounts</a>
        </nav>
      </details>
    </div>
  </header>

  <section class="thread-pane">
    <section class="chat-thread accounts-scroll">
      <section class="panel accounts-filter-panel">
        <div class="account-search-grid">
          <label>
            Search
            <input type="search" id="accounts-search" placeholder="Search name, username, email, notes">
          </label>
          <label>
            Role
            <select id="accounts-role-filter">
              <option value="">All</option>
              <option value="superuser">Superuser</option>
              <option value="standard">Standard</option>
            </select>
          </label>
          <label>
            Status
            <select id="accounts-status-filter">
              <option value="">All</option>
              <option value="active">Active</option>
              <option value="disabled">Disabled</option>
            </select>
          </label>
        </div>
      </section>
      {% for row in accounts %}
        {% set policy = row['capability_policy'] %}
        {% set services = policy['services'] %}
        {% set monolith = policy['monolith'] %}
        <section
          class="panel account-card"
          data-account-card
          data-account-role="{{ 'superuser' if row.is_superuser else 'standard' }}"
          data-account-status="{{ row.status }}"
          data-account-search="{{ (row.display_name ~ ' ' ~ row.username ~ ' ' ~ (row.email or '') ~ ' ' ~ (row.notes or ''))|lower }}"
        >
          <form method="post" action="{{ url_for('ls_portal_bp.update_account', account_id=row.id) }}" class="account-form">
            <div class="account-head">
              <div class="account-head-copy">
                <div class="account-kicker-row">
                  <div class="kicker">Account {{ row.id }}</div>
                  <span class="badge">{{ 'Superuser' if row.is_superuser else 'Standard operator' }}</span>
                  <span class="badge">{{ row.status }}</span>
                </div>
                <h2 class="section-title">{{ row.display_name or row.username }}</h2>
                <p class="section-copy">{{ row.username }} · {{ row.device_count }} active device{% if row.device_count != 1 %}s{% endif %}</p>
              </div>
              <div class="account-summary-row">
                <span class="account-summary-chip">{{ row.response_style }}</span>
                <span class="account-summary-chip">{{ row.email or 'no email' }}</span>
              </div>
            </div>

            <div class="account-grid">
              <label>
                Display name
                <input type="text" name="display_name" value="{{ row.display_name or '' }}">
              </label>
              <label>
                Email
                <input type="text" name="email" value="{{ row.email or '' }}">
              </label>
              <label>
                Mobile
                <input type="text" name="mobile_phone" value="{{ row.mobile_phone or '' }}">
              </label>
              <label>
                Host
                <input type="text" name="preferred_host" value="{{ row.preferred_host or '' }}">
              </label>
              <label>
                Response style classification
                <select name="response_style">
                  {% for style, style_label, style_help in response_style_fields %}
                    <option value="{{ style }}" {% if row.response_style == style %}selected{% endif %}>
                      {{ style_label }}
                    </option>
                  {% endfor %}
                </select>
              </label>
              <label style="grid-column:1 / -1;">
                Notes
                <input type="text" name="notes" value="{{ row.notes or '' }}">
              </label>
            </div>

            <section class="account-section">
              <details>
                <summary>
                  <div>
                    <h3 class="section-title">Response style default</h3>
                    <p class="section-copy">Style reference and default reply class.</p>
                  </div>
                  <span class="account-section-toggle">⌄</span>
                </summary>
                <div class="style-list">
                  {% for style, style_label, style_help in response_style_fields %}
                    <div class="style-item">
                      <strong>{{ style_label }}</strong>
                      <span><code>{{ style }}</code> - {{ style_help }}</span>
                    </div>
                  {% endfor %}
                </div>
              </details>
            </section>

            <section class="account-section">
              <details open>
                <summary>
                  <div>
                    <h3 class="section-title">Core account gates</h3>
                    <p class="section-copy">Top-level approvals for the operator surface.</p>
                  </div>
                  <span class="account-section-toggle">⌄</span>
                </summary>
                <div class="permission-grid">
                  <label class="permission-check"><input type="checkbox" name="can_access" value="1" {% if row.can_access %}checked{% endif %}>Access</label>
                  <label class="permission-check"><input type="checkbox" name="can_read_logs" value="1" {% if row.can_read_logs %}checked{% endif %}>Read logs</label>
                  <label class="permission-check"><input type="checkbox" name="can_submit" value="1" {% if row.can_submit %}checked{% endif %}>Submit prompts</label>
                  <label class="permission-check"><input type="checkbox" name="can_run_agent" value="1" {% if row.can_run_agent %}checked{% endif %}>Run agent</label>
                  <label class="permission-check"><input type="checkbox" name="can_send_email" value="1" {% if row.can_send_email %}checked{% endif %}>Send email</label>
                  <label class="permission-check"><input type="checkbox" name="can_send_sms" value="1" {% if row.can_send_sms %}checked{% endif %}>Send text</label>
                  <label class="permission-check"><input type="checkbox" name="can_approve_system_changes" value="1" {% if row.can_approve_system_changes %}checked{% endif %}>Approve system changes</label>
                  <label class="permission-check"><input type="checkbox" name="can_manage_devices" value="1" {% if row.can_manage_devices %}checked{% endif %}>Manage devices</label>
                  <label class="permission-check"><input type="checkbox" name="can_manage_accounts" value="1" {% if row.can_manage_accounts %}checked{% endif %}>Manage accounts</label>
                  <label class="permission-check"><input type="checkbox" name="is_superuser" value="1" {% if row.is_superuser %}checked{% endif %}>Superuser</label>
                </div>
              </details>
            </section>

            <section class="account-section">
              <details>
                <summary>
                  <div>
                    <h3 class="section-title">Integrated systems</h3>
                    <p class="section-copy">Live action/bulk capability across connected systems.</p>
                  </div>
                  <span class="account-section-toggle">⌄</span>
                </summary>
                <div class="matrix-wrap">
                  <table class="matrix">
                    <thead>
                      <tr>
                        <th>System</th>
                        <th>Access</th>
                        <th class="bulk-cell">Bulk</th>
                        <th class="notes-cell">Notes / boundary</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for service_key, service_label in capability_services %}
                        {% set service = services[service_key] %}
                        <tr>
                          <td data-label="System">{{ service_label }}</td>
                          <td data-label="Access">
                            <select name="cap_{{ service_key }}_access">
                              {% for level in capability_access_levels %}
                                <option value="{{ level }}" {% if service['access'] == level %}selected{% endif %}>{{ level|replace('_', ' ')|title }}</option>
                              {% endfor %}
                            </select>
                          </td>
                          <td class="bulk-cell" data-label="Bulk"><input type="checkbox" name="cap_{{ service_key }}_bulk" value="1" {% if service['bulk'] %}checked{% endif %}></td>
                          <td class="notes-cell" data-label="Notes / boundary"><input type="text" name="cap_{{ service_key }}_notes" value="{{ service['notes'] or '' }}" placeholder="Optional boundary"></td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </details>
            </section>

            <section class="account-section">
              <details>
                <summary>
                  <div>
                    <h3 class="section-title">Pingu data</h3>
                    <p class="section-copy">Default and area-specific access across the internal system.</p>
                  </div>
                  <span class="account-section-toggle">⌄</span>
                </summary>
                <div class="matrix-wrap">
                  <table class="matrix">
                    <thead>
                      <tr>
                        <th>Area</th>
                        <th>Access</th>
                        <th class="bulk-cell">Bulk</th>
                        <th class="notes-cell">Notes / boundary</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td data-label="Area">Default for other Pingu tables</td>
                        <td data-label="Access">
                          <select name="cap_monolith_default_access">
                            {% for level in capability_access_levels %}
                              <option value="{{ level }}" {% if monolith['default_access'] == level %}selected{% endif %}>{{ level|replace('_', ' ')|title }}</option>
                            {% endfor %}
                          </select>
                        </td>
                        <td class="bulk-cell" data-label="Bulk"><input type="checkbox" name="cap_monolith_default_bulk" value="1" {% if monolith['default_bulk'] %}checked{% endif %}></td>
                        <td class="notes-cell" data-label="Notes / boundary"><input type="text" name="cap_monolith_default_notes" value="{{ monolith['default_notes'] or '' }}" placeholder="Optional default boundary"></td>
                      </tr>
                      {% for area_key, area_label in monolith_areas %}
                        {% set area = monolith['areas'][area_key] %}
                        <tr>
                          <td data-label="Area">{{ area_label }}</td>
                          <td data-label="Access">
                            <select name="cap_monolith_{{ area_key }}_access">
                              {% for level in capability_access_levels %}
                                <option value="{{ level }}" {% if area['access'] == level %}selected{% endif %}>{{ level|replace('_', ' ')|title }}</option>
                              {% endfor %}
                            </select>
                          </td>
                          <td class="bulk-cell" data-label="Bulk"><input type="checkbox" name="cap_monolith_{{ area_key }}_bulk" value="1" {% if area['bulk'] %}checked{% endif %}></td>
                          <td class="notes-cell" data-label="Notes / boundary"><input type="text" name="cap_monolith_{{ area_key }}_notes" value="{{ area['notes'] or '' }}" placeholder="Optional boundary"></td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </details>
            </section>

            <div class="sticky-save">
              <label>
                Status
                <select name="status">
                  {% for status in ['active', 'disabled'] %}
                    <option value="{{ status }}" {% if row.status == status %}selected{% endif %}>{{ status }}</option>
                  {% endfor %}
                </select>
              </label>
              <button type="submit">Save account</button>
            </div>
          </form>
        </section>
      {% endfor %}
    </section>
  </section>
</section>
<script>
  const accountSearch = document.getElementById('accounts-search');
  const accountRoleFilter = document.getElementById('accounts-role-filter');
  const accountStatusFilter = document.getElementById('accounts-status-filter');
  const accountCards = Array.from(document.querySelectorAll('[data-account-card]'));

  function applyAccountFilters() {
    const searchText = (accountSearch.value || '').trim().toLowerCase();
    const roleValue = accountRoleFilter.value;
    const statusValue = accountStatusFilter.value;
    accountCards.forEach((card) => {
      const haystack = (card.dataset.accountSearch || '').toLowerCase();
      const matchesSearch = !searchText || haystack.includes(searchText);
      const matchesRole = !roleValue || card.dataset.accountRole === roleValue;
      const matchesStatus = !statusValue || card.dataset.accountStatus === statusValue;
      card.hidden = !(matchesSearch && matchesRole && matchesStatus);
    });
  }

  [accountSearch, accountRoleFilter, accountStatusFilter].forEach((element) => {
    element.addEventListener('input', applyAccountFilters);
    element.addEventListener('change', applyAccountFilters);
  });
</script>
{% endblock %}