<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="icon" href="static/img/debug.png" type="image/png">
  <link rel="icon" href="static/img/debug.svg" type="image/svg+xml">
  <script>
    (function() {
      var saved = localStorage.getItem('web-pdb-theme');
      var theme = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.setAttribute('data-bs-theme', theme);
    }());
  </script>
  <link rel="stylesheet" href="static/styles.min.css">
</head>
<body>
  <nav class="navbar navbar-expand fixed-top bg-body-tertiary border-bottom">
    <div class="container-fluid position-relative d-flex align-items-center">
      <a class="navbar-brand p-0" href="#">
        <img src="static/img/debug.svg" width="24" height="24" alt="Web-PDB">
      </a>
      <p id="host" class="navbar-text mb-0 position-absolute start-50 translate-middle-x"></p>
      <button id="theme_toggle_btn" type="button"
              class="btn btn-outline-secondary btn-sm ms-auto"
              data-bs-toggle="tooltip" title="Switch to dark mode">
        <i class="bi bi-sun-fill"></i>
      </button>
    </div>
  </nav>
  <main class="container-fluid language-python">
    <div class="row gx-2 gy-2">
      <div class="col-sm-6">
        <div class="infobox-label">
          <pre id="curr_file" class="line-numbers info"><code id="curr_file_code"></code></pre>
          <div class="infobox-label-text">
            <strong>Current file:</strong> <samp><span id="filename"></span>(<span id="curr_line"></span>)</samp>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="infobox-label">
          <pre class="info"><code id="globals"></code></pre>
          <div class="infobox-label-text">
            <strong>Globals</strong>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="infobox-label">
          <pre class="info"><code id="locals"></code></pre>
          <div class="infobox-label-text">
            <strong>Locals</strong>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="btn-toolbar mb-1" role="toolbar">
          <div class="btn-group" role="group">
            <button id="next_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="Next line (F10)">
              <i class="bi bi-arrow-bar-right"></i>
            </button>
            <button id="step_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="Step into function (F11)">
              <i class="bi bi-box-arrow-in-down-right"></i>
            </button>
            <button id="return_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="Return from function (Shift + F11)">
              <i class="bi bi-box-arrow-up-right"></i>
            </button>
            <button id="continue_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="Continue execution (F8)">
              <i class="bi bi-play-fill"></i>
            </button>
            <button id="up_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="To upper frame">
              <i class="bi bi-arrow-up"></i>
            </button>
            <button id="down_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="To lower frame">
              <i class="bi bi-arrow-down"></i>
            </button>
            <button id="where_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="Print stack trace (where)">
              <i class="bi bi-geo-alt-fill"></i>
            </button>
            <button id="help_btn" type="button" class="btn btn-outline-secondary"
                data-bs-toggle="tooltip" title="Quick help">
              <i class="bi bi-question-circle"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="infobox-label">
          <pre id="console"><code id="stdout"></code></pre>
          <div class="infobox-label-text">
            <strong>PDB Console</strong>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="input-group">
          <span class="input-group-text">(Pdb)</span>
          <input class="form-control" id="stdin" type="text">
          <button id="send_btn" class="btn btn-light" type="button">Send</button>
        </div>
      </div>
    </div>
  </main>
  <div id="help_window" class="modal fade" tabindex="-1" aria-labelledby="help_window_label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="help_window_label">
            <i class="bi bi-question-circle"></i> Web-PDB Quick Help
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <h6>Web-PDB Shortcuts:</h6>
          <ul>
            <li><kbd>F10</kbd>: proceed to the next line, staying on the current level.</li>
            <li><kbd>F11</kbd>: proceed to the next line and step into a function, if any.</li>
            <li><kbd>Shift + F11</kbd>: step out of the current function.</li>
            <li><kbd>F8</kbd>: continue execution.</li>
            <li><kbd>&uarr;</kbd>: scroll command history from latest to earliest (in the command field).</li>
            <li><kbd>&darr;</kbd>: scroll command history from earliest to latest (in the command field).</li>
            <li><kbd>Enter</kbd>: send a PDB command (from the command field).</li>
            <li>Click on a line number in <strong>Current file</strong> box:
              set or remove a breakpoint.</li>
          </ul>
          <h6>Essential PDB Commands:</h6>
          <ul>
            <li><code>p (var)</code>: print the value of a variable or a Python expression.</li>
            <li><code>pp (var)</code>: print the value of a variable or a Python expression with
              pretty formatting.</li>
            <li><code>!(expr)</code>: execute a Python expression in the current context.</li>
            <li><code>h</code>: print the list of available commands.</li>
            <li><code>h (command)</code>: print quick help for a given command.</li>
            <li><code>restart [args]</code>: restart the program with the given arguments (optional).</li>
            <li><code>q</code>: terminate the current program and quit.</li>
          </ul>
          <p>You can find more detailed info on PDB commands and usage in the
            <a href="https://docs.python.org/3/library/pdb.html" target="_blank" rel="noopener noreferrer">
              official Python documentation</a>.
          </p>
          <hr>
          <p>This program is distributed under the terms of
            <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer">MIT License</a>.</p>
          <p>&copy; 2016 <a href="mailto:roman1972@gmail.com">Roman Miroshnychenko</a>.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script src="static/bundle.min.js"></script>
</body>
</html>
