<div class="operator-login-viewport">
  <div class="operator-login-panel glass-panel">
    <p class="operator-login-brand">Syntropy mission control</p>
    <h1>Operator sign in</h1>
    <p class="operator-login-hint">
      Mission control access requires operator credentials.
    </p>

    <form class="operator-login-form" method="post" action="/login">
      <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />

      <label class="operator-login-field">
        <span>Username</span>
        <input type="text" name="username" value={@username} autocomplete="username" required />
      </label>

      <label class="operator-login-field">
        <span>Password</span>
        <input type="password" name="password" autocomplete="current-password" required />
      </label>

      <div class="operator-login-actions">
        <button type="submit" class="primary-button">Sign in</button>
        <%= if @error do %>
          <span class="operator-login-error" role="alert">{@error}</span>
        <% end %>
      </div>
    </form>
  </div>
</div>
