{% extends "base.html" %}

{% block content %}
<div class="text-center mt-5">
    <h1 class="display-4 mb-4">🚗 KM & Maintenance Tracker</h1>
    <p class="lead mb-5">Complete solution for vehicle tracking, fuel management, and maintenance tickets</p>
    
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Select Login Type</h4>
                    
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-primary">
                                <div class="card-body text-center">
                                    <h5 class="card-title">🚚 Driver</h5>
                                    <p class="card-text">Submit daily KM & Fuel entries</p>
                                    <a href="{{ url_for('login_driver') }}" class="btn btn-primary">Driver Login</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-warning">
                                <div class="card-body text-center">
                                    <h5 class="card-title">🔧 Maintenance</h5>
                                    <p class="card-text">Create & manage maintenance tickets</p>
                                    <a href="{{ url_for('login_maintenance') }}" class="btn btn-warning">Maintenance Login</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-danger">
                                <div class="card-body text-center">
                                    <h5 class="card-title">👨‍💼 Admin</h5>
                                    <p class="card-text">Full system control & reports</p>
                                    <a href="{{ url_for('login_admin') }}" class="btn btn-danger">Admin Login</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    
                    <div class="alert alert-info">
                        <h6>Default Login Credentials:</h6>
                        <div class="row">
                            <div class="col-md-4">
                                <strong>Driver:</strong><br>
                                Username: <code>driver1</code><br>
                                Password: <code>driver123</code>
                            </div>
                            <div class="col-md-4">
                                <strong>Maintenance:</strong><br>
                                Username: <code>maint1</code><br>
                                Password: <code>maint123</code>
                            </div>
                            <div class="col-md-4">
                                <strong>Admin:</strong><br>
                                Username: <code>admin</code><br>
                                Password: <code>admin123</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}