@if (successMessage) {
<div
  class="px-4 py-3 mb-8 bg-teal-100 rounded-lg text-teal-800 text-sm mt-10 max-w-11/12 sm:max-w-8/12 mx-auto"
>
  <p>{{successMessage}}</p>
</div>
}
<section class="my-5 sm:my-10 flex justify-center items-center">
  <article class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="md:col-span-1 lg:col-span-2">
      <img
        src="/assets/images/login-page.jpg"
        alt=""
        class="rounded-lg object-cover w-full h-full"
      />
    </div>

    <article class="space-y-4">
      <h1 class="text-3xl text-gray-800 font-space font-bold">Login</h1>

      <h2 class="text-xl text-gray-600">Get access to your Orders, Wishlist and Recommendations</h2>

      <form [formGroup]="loginForm" (ngSubmit)="loginUser()" class="flex flex-col space-y-5">
        <fieldset class="fieldset">
          <legend class="fieldset-legend">Email</legend>
          <input formControlName="email" type="text" class="input" placeholder="Enter email here" />
          <p class="label">your-email-address@email.com</p>
          <app-error fieldName="email" [control]="loginForm.get('email')" />
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend">Password</legend>
          <input formControlName="password" type="password" class="input" placeholder="Type here" />
          <app-error fieldName="password" [control]="loginForm.get('password')" />
        </fieldset>

        <button type="submit" class="btn btn-black py-2">Login</button>
      </form>
      <a
        routerLink="/register"
        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
        >New User ? Sign Up</a
      >
    </article>
  </article>
</section>