@extends('layouts.guest')

@section('content')
<div class="content-wrapper" style="margin-left: 0">
    <div class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-4 mt-5">
                    <div class="card shadow">
                        <div class="card-body">
                            <h4 class="text-center">Student Login</h4>

                            <!-- Logo -->
                            <div class="text-center mb-3">
                                <img src="{{ asset('images/culinary-logo.png') }}" alt="Culinary Logo" style="max-height: 80px;">
                            </div>

                            <!-- Login Form -->
                            <form method="POST" action="{{ route('login') }}">
                                @csrf

                                <div class="form-group">
                                    <label for="email">Regnumber</label>
                                    <input type="text" class="form-control" id="email" name="email" placeholder="Enter Regnumber" required>
                                </div>

                                <div class="form-group mt-3">
                                    <label for="password">Password</label>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password" required>
                                </div>

                                <div class="form-group mt-3">
                                    <button type="submit" class="btn btn-block btn-primary">Login</button>
                                </div>

                                <div class="form-group text-center mt-3">
                                    <a href="{{ route('password.request') }}" class="btn btn-link">Forgot Password</a> |
                                    <a href="#" class="btn btn-link">Activate Account</a>
                                </div>
                            </form>

                        </div> <!-- /.card-body -->
                    </div> <!-- /.card -->
                </div> <!-- /.col -->
            </div> <!-- /.row -->
        </div> <!-- /.container-fluid -->
    </div> <!-- /.content -->
</div> <!-- /.content-wrapper -->
@endsection