<!-- -*- mode: html -*- -->
<div class="topbar">
  <div class="site-header">
    <img class="logo" src="/static/img/logo.png" alt="DamageBDD Logo" />
    <div class="brand-text">
      <div class="title">DamageBDD</div>
      <div class="subtitle">The tool to break your stack</div>
    </div>
  </div>
  <div class="toolbar-items">

    <div id="balanceDiv" class="token-cta" data-micromodal-trigger="invoice-modal">
      <div class="balance-column">
        <span id="balanceAddress" title="Wallet Address">
          ak_...
        </span>
        <div class="balance-row">
          <span id="balanceLabel">DAMAGE:</span>
          <span id="balanceAmount" class="damage-amount"></span>
          <span id="aeBalanceLabel" class="ae-sub">AE:</span>
          <span id="aeBalance" class="ae-sub"></span>

          <button id="balanceRefreshBtn"
                  type="button"
                  class="icon-btn"
                  title="Refresh balance"
                  aria-label="Refresh balance">
            ⟳
          </button>
        </div>
      </div>

    </div>


    <div id="installBtn" class="install-btn" data-micromodal-trigger="install-modal">Install Node</div>
    <div id="logoutBtn" class="logout-btn" data-micromodal-trigger="logout-modal">Logout</div>
  </div>
</div>

<div class="modal micromodal-slide" id="connect-wallet-modal" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="connect-wallet-title">
      <header class="modal__header">
        <h2 class="modal__title" id="connect-wallet-title">Connect Browser Wallet</h2>
      </header>
      <main class="modal__content">
        <p>We couldn’t find a connected browser wallet. Click “Connect now”.</p>
        <ol>
          <li>Have a <a href="https://damagebdd.com/supported_wallets" target="blank">compatible wallet</a> installed.</li>
          <li>Approve the connection request in your wallet popup.</li>
        </ol>
        <button id="connect-wallet-now" class="styled-btn">Connect now</button>
      </main>
    </div>
  </div>
</div>

<div class="modal micromodal-slide" id="email-login-modal" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="login-title">
      <header class="modal__header">
        <h2 class="modal__title" id="login-title">Email Login/Custodial Wallet</h2>
        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
      </header>
      <main class="modal__content">
        <form id="login-form" class='panel' >
          <input type="email" id="email-login-username" autocomplete="username" required placeholder="Email Address"><br>
          <div class="password-wrapper">
            <input type="password" name="password" id="email-password" autocomplete="current-password" required placeholder="Password">
            <button type="button" class="toggle-password" data-target="password">👁️</button>
          </div>
        </form>
      </main>
      <footer class="modal__footer">
        <div class="login-links">
          <button id="email-login-submit-btn" class="modal__btn modal__btn-primary styled-btn" aria-label="Login with email and password" title="Login Submit">Login</button><br>
      </footer>
      </div>
    </div>
  </div>
