@include('login-header')
  <section class="header-container">
    <div class="nav-container container-width">
      <div class="brand-container"><img src="{{asset('images/composer-logo.png')}}" loading="lazy" sizes="(max-width: 479px) 100vw, 130px" srcset="{{asset('images/composer-logo-p-500.png')}} 500w, {{asset('images/composer-logo-p-800.png')}} 800w, {{asset('images/composer-logo-p-1080.png')}} 1080w, {{asset('images/composer-logo-p-1600.png')}} 1600w, {{asset('images/composer-logo.png')}} 1839w" alt=""></div>
      <div class="nav-middle-container">
        <div class="nav-links-container">
          <a href="#" class="nav-link purple-text">How it Works</a>
          <a href="#" class="nav-link">Article Samples</a>
          <a href="#" class="nav-link">Pricing</a>
        </div>
      </div>
      <div class="nav-cta-container">
        <a href="/composer/auth/google" class="button-link-block w-inline-block">
          <div class="button">
            <div class="button-text">
              <div class="text-block">Login or Register</div>
            </div>
            <div class="button-icon"><img src="{{asset('images/google-icon.png')}}" loading="lazy" alt=""></div>
          </div>
        </a>
      </div>
      <div data-w-id="757e2e0d-8f77-ae8a-74ff-035a7dc13bb0" class="hamburger-menu-container">
        <img src="{{asset('images/9041966_menu_hamburger_icon.png')}}" loading="lazy" alt="" class="image-2">
      </div>
    </div>
    <div class="mobile-menu-links-container">
      <a href="#" class="mobile-menu-link">How it Works</a>
      <a href="#" class="mobile-menu-link">Article Samples</a>
      <a href="#" class="mobile-menu-link">Pricing</a>
      <a href="/composer/auth/google" class="mobile-menu-link">Login or Register</a>
    </div>
  </section>
  <section class="body-section">
      @if (session('success'))
          <div class="alert alert-success">
              {{ session('success') }}
          </div>
      @endif
      @if (session('error'))
          <div class="col-sm-12">
              <div class="alert alert-error" role="alert">
                  {{ session('error') }}
              </div>
          </div>
      @endif
        <div class="container-width">
            <div class="w-layout-grid grid">
                <div class="form-block-2 w-form">
                    <form id="wf-form-name" name="wf-form-name" method="POST" action="{{ route('userLogin') }}">
                        @csrf <!-- CSRF token -->
                        <h3 class="heading">Email Login</h3>
                        <label for="name">Email Address</label>
                        <input type="email" class="keyword-form-input w-input" placeholder="Email" maxlength="256" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus/>
                        @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                        <label for="email" class="field-label">Password</label>
                        <input type="password" class="keyword-form-input w-input" name="password" required autocomplete="current-password" />
                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                        <label class="w-checkbox checkbox-field">
                            <input type="checkbox" id="checkbox" name="remember" data-name="Checkbox" class="w-checkbox-input" {{ old('remember') ? 'checked' : '' }} />
                            <span class="w-form-label" for="checkbox">Remember me?</span>
                        </label>
                        <input type="submit" value="Submit" data-wait="Please wait..." class="button white-text purple w-button" />
                    </form>
                </div>
                <div id="w-node-bc9d354a-e502-1be4-b3bd-1324eadfd009-a84b1bf7">
                    <h3 class="heading">Social Login</h3>
                    <a href="/composer/auth/google" class="button-link-block w-inline-block">
                        <div class="button">
                            <div class="button-text">
                                <div class="text-block">Login With Google</div>
                            </div>
                            <div class="button-icon">
                                <img src="{{asset('images/google-icon.png')}}" loading="lazy" alt="" />
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
  <script src="{{asset('js/jQuery-3.5.1.js')}}"></script>
  <script src="{{asset('js/webflow.js')}}"></script>
  <script src="{{asset('js/composer.js')}}"></script>