{% if username %}
<form hx-post="{{ cmd_url }}" hx-include="#dataset-list input"
      hx-on::after-request="resetForm(event, this)"
      onsubmit="handleSubmit()"
>
    <div class="d-flex">
        <div class="input-group me-2">
            <input class="form-control" name="command" type="text" placeholder="Prompt" aria-label="Prompt" value="">
            <span class="input-group-text" role="button" data-bs-toggle="offcanvas"
                  data-bs-target="#offcanvasPromptHelp" aria-controls="offcanvasPromptHelp">
                <i class="fa-regular fa-question"></i>
            </span>
        </div>
        <button class="btn btn-outline-success" type="submit">GO</button>
    </div>
</form>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasPromptHelp"
     aria-labelledby="offcanvasPromptHelpLabel" style="width: 600px">
  <div class="offcanvas-header">
    <h4 class="offcanvas-title" id="offcanvasPromptHelpLabel">Prompt Help</h4>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
      <h5>List of commands</h5>
      <dl class="row">
          {% for command in commands %}
            <dt class="col-sm-4">{{ command.expected }}</dt>
            <dd class="col-sm-8">{{ command.__doc__ }}</dd>
          {% endfor %}
      </dl>
      <h5>Expressions</h5>
      <pre>x = &lt;expression&gt;</pre>
      <p>
      Where <strong>x</strong> is the name of the new file, and
      <strong>expression</strong> is a mathematical expression including
      variables that reference other datasets.
      <p>Examples:</p>
      <ul>
          <li>
              <code>x = a + b * 2</code>
              <p>Here <strong>x</strong> will be a lazy expression with
                  <strong>a</strong> and <strong>b</strong> as operands.
                  That means that <strong>x</strong> will not be evaluated until it is needed.
              </p>
          </li>
          <li>
              <code>x := a + b * 2</code>
              <p>Here <strong>x</strong> will eagerly execute the expression with
                  <strong>a</strong> and <strong>b</strong> as operands.
                  That means that <strong>x</strong> will be evaluated immediately and stored.
              </p>
          </li>
          <li>
              <code>x = arange(10)</code>
              <p>Here <strong>x</strong> will be a lazy array, with int64 elements, from 0 to 9 (included).</p>
          </li>
      </ul>
  </div>
</div>

{% endif %}
