<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sovran_SystemsOS Hub</title>
  <link rel="stylesheet" href="/static/css/base.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/buttons.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/header.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/layout.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/tiles.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/modals.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/features.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/onboarding.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/support.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/domain-setup.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/security.css?v={{ asset_version }}" />
</head>
<body>

  <!-- Header bar -->
  <header class="header-bar">
    <img src="/static/sovran-hub-icon.svg" alt="Sovran Hub" class="header-logo" />

    <div class="title-group">
      <span class="title">Sovran_SystemsOS Hub</span>

      <!-- OS Version Badge — styled identically to the version badge in service modals -->
      <span class="os-version-badge" id="os-version-badge" title="Sovran_SystemsOS Version">v{{ sovran_version }}</span>
    </div>

    <div class="header-buttons">
      <span class="role-badge" id="role-badge">Loading…</span>
      <button class="btn btn-header-reboot" id="btn-header-reboot" title="Restart the entire computer">Reboot</button>
      <button class="btn btn-logout" id="btn-logout" title="Sign out">Sign Out</button>
    </div>
  </header>

  <!-- IP bar -->
  <div class="ip-bar">
    <span>
      <span class="ip-label">Internal IP:</span>
      <span class="ip-value" id="ip-internal">…</span>
    </span>
    <span class="ip-separator">|</span>
    <span>
      <span class="ip-label">External IP:</span>
      <span class="ip-value" id="ip-external">…</span>
    </span>
  </div>

  <!-- Service tiles -->
  <main class="main-content">
    <aside class="sidebar" id="sidebar">
      <div id="sidebar-support"></div>
      <div id="sidebar-features"></div>
    </aside>
    <div id="tiles-area">
      <div class="dashboard-loading" role="status" aria-live="polite">
        <span class="dashboard-loading-spinner" aria-hidden="true"></span>
        <span>Loading service status…</span>
      </div>
    </div>
  </main>

  <!-- Update modal -->
  <div class="modal-overlay" id="update-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title-text">
    <div class="modal-dialog">
      <div class="modal-header">
        <span class="modal-title" id="modal-title-text">Sovran_SystemsOS Update</span>
        <div class="modal-spinner" id="modal-spinner"></div>
        <span class="modal-status" id="modal-status">Updating…</span>
      </div>
      <div class="modal-log" id="modal-log" aria-live="polite"></div>
      <div class="modal-footer">
        <button class="btn btn-save" id="btn-save-report" style="display:none">Save Error Report</button>
        <button class="btn btn-save" id="btn-retry-update-status" style="display:none">Retry Status</button>
        <button class="btn btn-reboot" id="btn-reboot" style="display:none">Restart Entire System</button>
        <button class="btn btn-close-modal" id="btn-close-modal" disabled>Close</button>
      </div>
    </div>
  </div>

  <!-- Credentials info modal -->
  <div class="modal-overlay" id="creds-modal" role="dialog" aria-modal="true" aria-labelledby="creds-modal-title">
    <div class="creds-dialog">
      <div class="creds-header">
        <span class="creds-title" id="creds-modal-title">Service Info</span>
        <button class="creds-close-btn" id="creds-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body" id="creds-body">
        <p class="creds-loading">Loading…</p>
      </div>
    </div>
  </div>

  <!-- Tech Support modal -->
  <div class="modal-overlay" id="support-modal" role="dialog" aria-modal="true" aria-labelledby="support-modal-title">
    <div class="creds-dialog">
      <div class="creds-header">
        <span class="creds-title" id="support-modal-title">Tech Support</span>
        <button class="creds-close-btn" id="support-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body" id="support-body">
        <p class="creds-loading">Loading…</p>
      </div>
    </div>
  </div>

  <!-- Domain Setup Modal -->
  <div class="modal-overlay" id="domain-setup-modal" role="dialog" aria-modal="true" aria-labelledby="domain-setup-title">
    <div class="creds-dialog">
      <div class="creds-header">
        <span class="creds-title" id="domain-setup-title">🌐 Domain Setup</span>
        <button class="creds-close-btn" id="domain-setup-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body" id="domain-setup-body"></div>
    </div>
  </div>

  <!-- SSL Email Modal -->
  <div class="modal-overlay" id="ssl-email-modal" role="dialog" aria-modal="true" aria-labelledby="ssl-email-title">
    <div class="creds-dialog domain-narrow-dialog">
      <div class="creds-header">
        <span class="creds-title" id="ssl-email-title">📧 SSL Certificate Email</span>
        <button class="creds-close-btn" id="ssl-email-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body">
        <p class="support-desc">Let's Encrypt needs an email address for SSL certificate notifications.</p>
        <div class="domain-field-group">
          <label class="domain-field-label" for="ssl-email-input">Email:</label>
          <input class="domain-field-input" type="email" id="ssl-email-input" placeholder="you@example.com" />
        </div>
        <div class="domain-field-actions">
          <button class="btn btn-close-modal" id="ssl-email-cancel-btn">Cancel</button>
          <button class="btn btn-primary" id="ssl-email-save-btn">Save</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Feature Confirm Modal -->
  <div class="modal-overlay" id="feature-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="feature-confirm-title">
    <div class="creds-dialog domain-narrow-dialog">
      <div class="creds-header">
        <span class="creds-title" id="feature-confirm-title">Confirm Action</span>
        <button class="creds-close-btn" id="feature-confirm-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body">
        <p class="support-desc" id="feature-confirm-message"></p>
        <div class="domain-field-actions">
          <button class="btn btn-close-modal" id="feature-confirm-cancel-btn">Cancel</button>
          <button class="btn btn-primary" id="feature-confirm-ok-btn">Continue</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Port Requirements Modal -->
  <div class="modal-overlay" id="port-requirements-modal" role="dialog" aria-modal="true" aria-labelledby="port-req-title">
    <div class="creds-dialog">
      <div class="creds-header">
        <span class="creds-title" id="port-req-title">🔌 Router / Firewall Port Requirements</span>
        <button class="creds-close-btn" id="port-req-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body" id="port-req-body"></div>
    </div>
  </div>

  <!-- Rebuild Modal -->
  <div class="modal-overlay" id="rebuild-modal" role="dialog" aria-modal="true" aria-labelledby="rebuild-modal-title">
    <div class="modal-dialog">
      <div class="modal-header">
        <span class="modal-title" id="rebuild-modal-title">Sovran_SystemsOS Rebuild</span>
        <div class="modal-spinner" id="rebuild-spinner"></div>
        <span class="modal-status" id="rebuild-status">Rebuilding…</span>
      </div>
      <div class="modal-log" id="rebuild-log" aria-live="polite"></div>
      <div class="modal-footer">
        <button class="btn btn-save" id="rebuild-save-report" style="display:none">Save Error Report</button>
        <button class="btn btn-reboot" id="rebuild-reboot-btn" style="display:none">Restart Entire System</button>
        <button class="btn btn-close-modal" id="rebuild-close-btn" disabled>Close</button>
      </div>
    </div>
  </div>

  <!-- Upgrade Modal (Node → Server+Desktop) -->
  <div class="modal-overlay" id="upgrade-modal" role="dialog" aria-modal="true" aria-labelledby="upgrade-modal-title">
    <div class="creds-dialog upgrade-dialog">
      <div class="creds-header">
        <span class="creds-title" id="upgrade-modal-title">🚀 Upgrade to Server + Desktop</span>
        <button class="creds-close-btn" id="upgrade-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body">
        <p class="support-desc">
          Upgrading to the full <strong>Server + Desktop</strong> experience will unlock all services —
          encrypted messaging, password management, cloud storage, website hosting, and more.
        </p>
        <div class="upgrade-info-box">
          <p class="upgrade-info-title">Simple, guided setup:</p>
          <ul class="upgrade-info-list">
            <li>Sovran_SystemsOS walks you through getting your domain from <a href="https://njal.la" target="_blank" rel="noopener noreferrer">Njal.la</a> and connecting your services</li>
            <li>To make your services available outside your home, complete one router task: forward ports <strong>80 and 443</strong> to this computer</li>
          </ul>
        </div>
        <p class="support-desc">
          The Hub guides you through every step.
        </p>
        <p class="support-desc upgrade-rebuild-note">
          The system will rebuild after upgrading. This may take several minutes.
        </p>
        <div class="domain-field-actions">
          <button class="btn btn-close-modal" id="upgrade-cancel-btn">Cancel</button>
          <button class="btn btn-primary" id="upgrade-confirm-btn">Yes, Upgrade</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Security Reset overlay -->
  <div class="security-reset-overlay" id="security-reset-overlay">
    <!-- Phase 1: wiping in progress -->
    <div class="reboot-card" id="security-reset-phase1">
      <div class="security-reset-overlay-icon">🛡</div>
      <h2 class="reboot-title">Security Reset In Progress</h2>
      <p class="reboot-message">
        ⚠️ Wiping all data and credentials.<br />
        <strong>Do not power off your computer.</strong><br />
        This may take several minutes.
      </p>
      <div class="reboot-dots">
        <span class="reboot-dot"></span>
        <span class="reboot-dot"></span>
        <span class="reboot-dot"></span>
      </div>
      <p class="reboot-submessage" id="security-reset-overlay-step">Erasing data and resetting credentials…</p>
    </div>
    <!-- Phase 2: password display -->
    <div class="reboot-card" id="security-reset-phase2" style="display:none;">
      <div class="security-reset-overlay-icon">🔑</div>
      <h2 class="reboot-title">Security Reset Complete</h2>
      <p class="security-reset-password-label">Your new login password is:</p>
      <div class="security-reset-password-box" id="security-reset-new-password">&nbsp;</div>
      <p class="security-reset-password-warning">
        ✍️ <strong>Write this down now.</strong><br />
        You will need it to log in to your computer<br />and the Sovran Hub at <em>sovransystemsos.local</em>.
      </p>
      <button class="security-reset-reboot-btn" id="security-reset-reboot-btn" disabled>
        I have written down my new password — Restart Entire System
      </button>
    </div>
  </div>

  <!-- Reboot overlay -->
  <div class="reboot-overlay" id="reboot-overlay">
    <!-- Normal restarting card -->
    <div class="reboot-card" id="reboot-main-card">
      <div class="reboot-icon" aria-hidden="true">↻</div>
      <h2 class="reboot-title">Restarting Entire System</h2>
      <p class="reboot-message">
        The entire computer is restarting, including the desktop and all hosted services.<br />
        This page will reconnect automatically when Sovran_SystemsOS is back online.
      </p>
      <div class="reboot-dots" aria-hidden="true">
        <span class="reboot-dot"></span>
        <span class="reboot-dot"></span>
        <span class="reboot-dot"></span>
      </div>
      <p class="reboot-submessage" id="reboot-submessage" aria-live="polite">Sending restart request…</p>
    </div>
    <!-- Error card (shown if restart request fails definitively) -->
    <div class="reboot-card" id="reboot-error-card" style="display:none">
      <div class="reboot-icon" aria-hidden="true">⚠</div>
      <h2 class="reboot-title">Restart could not be started</h2>
      <p class="reboot-message">
        The computer did not begin restarting. No services were intentionally stopped. Please try again.
      </p>
      <div class="reboot-error-actions">
        <button class="btn btn-close-modal" id="reboot-error-close-btn">Close</button>
        <button class="btn btn-restart-amber" id="reboot-error-retry-btn">Try Again</button>
      </div>
    </div>
  </div>

  <!-- Restart Confirm Dialog -->
  <div class="modal-overlay" id="restart-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="restart-confirm-title">
    <div class="creds-dialog domain-narrow-dialog">
      <div class="creds-header">
        <span class="creds-title" id="restart-confirm-title">Restart the entire computer?</span>
      </div>
      <div class="creds-body">
        <div id="restart-conflict-box" class="restart-conflict-box" style="display:none">
          <p class="restart-conflict-title">The system cannot restart right now.</p>
          <p class="restart-conflict-desc">A system update, rebuild, backup, restore, or security operation is currently running. Wait for it to finish, then try again.</p>
        </div>
        <p class="support-desc"><strong>This will reboot the physical machine running Sovran_SystemsOS — not just the Hub.</strong></p>
        <p class="support-desc">The desktop and all hosted services will stop temporarily and restart with the computer. Anyone currently using these services will be disconnected.</p>
        <p class="support-desc">The system usually returns within 1–3 minutes. This page will reconnect automatically.</p>
        <div class="domain-field-actions">
          <button class="btn btn-close-modal" id="restart-confirm-cancel-btn">Cancel</button>
          <button class="btn btn-restart-amber" id="restart-confirm-ok-btn">Restart Entire System</button>
        </div>
      </div>
    </div>
  </div>

  <script src="/static/js/constants.js?v={{ asset_version }}"></script>
  <script src="/static/js/state.js?v={{ asset_version }}"></script>
  <script src="/static/js/helpers.js?v={{ asset_version }}"></script>
  <script src="/static/js/domain-prereqs.js?v={{ asset_version }}"></script>
  <script src="/static/js/tiles.js?v={{ asset_version }}"></script>
  <script src="/static/js/service-detail.js?v={{ asset_version }}"></script>
  <script src="/static/js/support.js?v={{ asset_version }}"></script>
  <script src="/static/js/update.js?v={{ asset_version }}"></script>
  <script src="/static/js/rebuild.js?v={{ asset_version }}"></script>
  <script src="/static/js/features.js?v={{ asset_version }}"></script>
  <script src="/static/js/security.js?v={{ asset_version }}"></script>
  <script src="/static/js/events.js?v={{ asset_version }}"></script>
</body>
</html>
