<div>
  <div class="relative min-h-screen grid bg-black">
    <div class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0 ">
      <div
        class="sm:w-1/2 xl:w-3/5 bg-primary-500 h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden  text-white bg-no-repeat bg-cover relative"
        style="background-image: url(/images/client-login.jpg); background-position: 0% 60%;"
      >
        <div class="absolute bg-black  opacity-25 inset-0 z-0"></div>
        <div class="w-full  lg:max-w-2xl md:max-w-md z-10 items-center text-center ">
          <div class=" font-bold leading-tight mb-6 mx-auto w-full content-center items-center ">
            <img src="/images/logo-white.svg" class="ml-3 w-auto lg:h-20 h-15 inline" />
          </div>
        </div>
      </div>
      <div class="md:flex md:items-center md:justify-left w-full sm:w-auto md:h-full xl:w-1/2 p-8 md:p-10 lg:p-14 sm:rounded-lg md:rounded-none ">
        <div class="max-w-xl w-full space-y-4">
          <div class="lg:text-left text-center">
            <h2 class="mt-6  font-bold text-gray-100">
              <img src="/images/logo.svg" class="h-10 w-auto inline" />
            </h2>
            <h2 class="mt-6 text-4xl md:text-6xl font-bold text-gray-100">
              <%= gettext("It's time to empower your presentations.") %>
            </h2>
            <p class="mt-10 text-2xl md:text-4xl text-gray-200">
              <%= gettext("Connect to your account") %>
            </p>
          </div>
          <div class="flex flex-row justify-center items-center space-x-3"></div>

          <.form :let={f} for={@conn} action={~p"/users/log_in"} as={:user} class="mt-12">
            <%= if @error_message do %>
              <ClaperWeb.Component.Alert.error message={@error_message} stick={true} />
            <% end %>
            <input type="hidden" name="remember" value="true" />
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
              <ClaperWeb.Component.Input.email
                form={f}
                key={:email}
                labelClass="text-white sr-only"
                placeholder={gettext("Email address")}
                fieldClass="bg-gray-700 text-white"
                name={gettext("Email")}
                autofocus="true"
                required="true"
              />
              <ClaperWeb.Component.Input.password
                form={f}
                key={:password}
                labelClass="text-white sr-only"
                placeholder={gettext("Password")}
                fieldClass="bg-gray-700 text-white"
                name={gettext("Password")}
                required="true"
              />
            </div>

            <div class="pt-5">
              <button
                type="submit"
                class="w-full flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
              >
                <%= gettext("Login") %>
              </button>
            </div>
          </.form>

          <div :if={@oidc_enabled}>
            <%= link(
              to: ~p"/users/oidc",
              class:
                "w-full flex justify-center items-center gap-x-2 py-2 px-4 rounded-md shadow-sm text-sm font-medium text-white border-2 border-secondary-500 hover:bg-secondary-500 hover:bg-opacity-40"
            ) do %>
              <img width="24" src={@oidc_logo_url} />
              <span><%= gettext("Login with %{provider}", provider: @oidc_provider_name) %></span>
            <% end %>
          </div>

          <div class="mt-4 text-center justify-center">
            <%= link(gettext("Forgot your password?"),
              to: ~p"/users/reset_password",
              class: "text-white text-sm text-center"
            ) %>
            <%= if Application.get_env(:claper, :enable_account_creation) do %>
              <span class="text-white">•</span> <%= link(gettext("Create account"),
                to: ~p"/users/register",
                class: "text-white text-sm text-center"
              ) %>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
