@extends('template.'.config('settings.template').'.content.master')
@section('head')
    <title>Home | {{config('settings.name')}}</title>
    <style>
        #map {
            height: 80vh;
            width: 100%;
        }
    </style>
@stop
@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>{{config('settings.name')}}</h1>
                <p>{{config('settings.description')}}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-4" id="contents">
                <div class="card d-none">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-5">
                                <img data-src="$image" alt="">
                            </div>
                            <div class="col-7">
                                <h3 class="h5">$title</h3>
                                <a data-href="$path">Ansehen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-8 g-0">
                <div id="map"></div>
                <div id="marker-window" class="d-none">
                    <h5 id="firstHeading" class="firstHeading">$title</h5>
                    <div id="bodyContent">
                        <p>$description</p>
                        <a data-href="$path">Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script>
        const contentUrl = "{{url('/api/types/locations/contents')}}";
        const locationField = "location";
    </script>
    <script src="{{asset('template/js/maps.js')}}"></script>
@stop