@extends('app.layout.base')

@section('content')
    <main id="main" style="justify-content: space-between;">
        <div class="d-flex col block-container mt-2">
            <a href="{{ route('menu-plans.index') }}" class="block text-center mb-1">Menuplan</a>
            <a href="{{ route('events.index') }}" class="block text-center mb-1">Aktiviteter</a>
            <a href="{{ route('washing-reservations.appindex') }}" class="block text-center mb-1">Reservationer</a>
            <a href="{{ route('contacts.index') }}" class="block text-center mb-1">Kontoret</a>
            <a href="{{ route('phones.index') }}" class="block text-center mb-1">Vagttelefon</a>
            <a href="{{ route('guides.index') }}" class="block text-center mb-1">Vejledninger</a>
        </div>
        <div class="row" style="align-self: center; margin: 8px 0 8px 0;">
            <a href="https://www.facebook.com" target="_blank" class="link">
                <img src="{{ URL::asset('/images/icons/facebook-icon.png') }}" class="h-100" alt="Facebook">
            </a>
            <a href="https://www.youtube.com" target="_blank" class="link">
                <img src="{{ URL::asset('/images/icons/yt.png') }}" class="h-100" alt="Youtube">
            </a>
            <a href="https://www.instagram.com" target="_blank" class="link">
                <img src="{{ URL::asset('/images/icons/instagram.png') }}" class="h-100" alt="Instagram">
            </a>
        </div>
    </main>
@endsection

@section('scripts')
    <script>
        function mainHeight() {
            document.getElementById('main').style.height = (window.innerHeight - document.getElementById('header').clientHeight) + "px";
        }

        window.onresize = mainHeight;
        mainHeight();
    </script>
@endsection