@extends('layouts.app')
@section('title', 'Login')
@section('content')

<!-- 
  1. Container principal que centraliza o card
  (Usa a classe .container-form do seu novo CSS)
-->
<div class="container-form">

    <!-- 
      2. O Card de Login "Vidro Fosco"
      (Usa a classe .form-class do seu novo CSS)
    -->
    <form action="{{ route('login-post') }}" class="form-class" method="POST">
        @csrf

        <!-- 3. A Logo (Usa .container-title) -->
        <div class="container-title">
            <!-- Coloque sua nova logo aqui! -->
            <img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Ingline Logo" class="h-10">
            <!-- (Ajuste o src e o h-10 se necessário) -->
        </div>

        <div class="container-message">

        </div>

        <!-- 4. Título (Usa .form-title) -->
        <h1 class="form-title">
            Efetue seu login
        </h1>

        <!-- 5. Mensagens de Sessão -->
        <x-session-messages />

        <!-- 6. Grupo de Inputs (Usa .input-group, .form-label, .form-input-class) -->
        <div class="input-group">
            <label for="email" class="form-label">E-mail</label>
            <input class="form-input-class" id="email" type="email" name="email" placeholder="seu@email.com" required>
        </div>

        <div class="input-group">
            <label for="password" class="form-label">Senha</label>
            <input class="form-input-class" id="password" type="password" name="password" placeholder="••••••••" required>
        </div>

        <!-- 7. Botão de Login (Usa .form-button-class) -->
        <div class="mt-4">
            <button class="form-button-class" type="submit">Login</button>
        </div>

        <!-- 8. Link de Senha (Usa .forget-password) -->
        <div class="forget-password">
            <a href="#">Esqueceu sua senha?</a>
        </div>

    </form>

</div>
@endsection