@extends('layouts/main')

@section('body')
    @include('layouts.navbar')

    <div class="container mx-auto p-5">

        <link href="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.css" rel="stylesheet" />
        <style>
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
            }
        </style>
        <div id="map"></div>
        <script>
            window.drivingJobId = {{ $driver->id }};
        </script>
        <script src="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.js"></script>
        @vite('resources/js/map.js')
    </div>
@endsection