<div class="h-screen w-full px-4 py-8 bg-gray-900 flex justify-center items-center">
  <div class="max-w-[400px] w-full flex flex-col">
    <a href={~p"/"} class="mb-2 -ml-2">
      <img src={~p"/images/logo.png"} height="96" width="96" alt="livebook" />
    </a>
    <div class="mb-2 text-xl text-gray-100 font-medium">
      Authentication required
    </div>

    <div class="mb-8 text-sm text-gray-200">
      <p :if={@authentication_mode == :password}>
        Type password to access the Livebook.
      </p>
      <div :if={@authentication_mode == :token} class="space-y-2">
        <%= if Livebook.Config.app?() do %>
          <p>
            Please open Livebook menu in your taskbar, click "Copy URL", and paste it in your browser's address bar.
          </p>
        <% else %>
          <p>
            Please check out the console for authentication URL or type the token directly
            here.
          </p>
        <% end %>
        <p>
          To use password authentication, set the <code>LIVEBOOK_PASSWORD</code>
          environment variable.
        </p>
      </div>
    </div>

    <div class="text-gray-50 w-full">
      <form method="post" class="flex flex-col w-full">
        <input type="hidden" value={Phoenix.Controller.get_csrf_token()} name="_csrf_token" />
        <div>
          <input
            :if={@authentication_mode == :password}
            type="password"
            name="password"
            class={[
              "px-4 py-2 w-full border rounded-lg bg-transparent",
              if @errors == [] do
                "border-gray-500 text-gray-300 placeholder-gray-400"
              else
                "border-red-600 text-red-600 placeholder-red-600"
              end
            ]}
            placeholder="Password"
            autofocus
          />
          <input
            :if={@authentication_mode == :token}
            type="text"
            name="token"
            class={[
              "px-4 py-2 w-full border rounded-lg bg-transparent",
              if @errors == [] do
                "border-gray-500 text-gray-300 placeholder-gray-400"
              else
                "border-red-600 text-red-600 placeholder-red-600"
              end
            ]}
            placeholder="Token"
            autofocus
          />
          <span :for={error <- @errors} class="mt-1 text-red-600 text-sm">
            {translate_error(error)}
          </span>
        </div>
        <button
          type="submit"
          class="mt-4 py-2 w-full rounded-lg text-gray-200 bg-blue-600 hover:bg-blue-700 focus:bg-blue-700"
        >
          <span>Authenticate</span>
          <.remix_icon icon="arrow-right-line" class="ml-1 align-middle" />
        </button>
      </form>
    </div>
  </div>
</div>
