@extends('front._layouts.master')

@section('first-css')

    <style>
        #categories > .item {
            display  : block;
            float    : left;
            width    : 50%;
            position : relative;
        }

        #categories > .item > img {
            min-height : 28vw;
        }

        #main > #logo {
            min-height : 19vw;
        }

        #main > #company-logo {
            min-height : 37vw;
        }
    </style>

@endsection

@section('css')

@endsection

@section('body')

    {{-- main section of the menu --}}
    <div id="main">
        <nav class="clearfix">
            @if($company->settingsGet('text_menu_enabled'))
                <a id="text" href="{{ route('front.company.menu.text.index', $company->slug) }}">
                    <img id="liste" src="/assets/front/images/menu/text.svg">
                </a>
            @endif
            <a id="picture" href="#">
                <img src="/assets/front/images/menu/picture-ring.svg">
            </a>
        </nav>

        <img id="company-logo" src="{{ $company->getImageUrl() . '?v=' . config('versioning.main') }}">

        <div id="logo"><img src="{{ label('image.menu-logo-wide-white.svg') }}"></div>

        <div id="categories" class="items clearfix">
            @foreach($categories as $category)
                @if($category->firstProduct)
                    <a class="item"
                       href="{{ route('front.company.menu.picture.index', ['slug' => $company->slug, 'category_id' => $category->id]) }}">
                        <img data-original="{{ $category->firstProduct->mainImage('thumb') }}" src="/assets/front/images/product-default-thumb.jpg">
                        <p>{{ $category->name }}</p>
                    </a>
                @endif
            @endforeach
        </div>

        <footer>
            <p id="company-name"><b>{{ $company->name }}</b></p>

            <div id="company-info">
                <p>{!! nl2br($company->address) !!}</p>
                <p>{!! nl2br($company->phone) !!}</p>
                <p>{{ $company->web }}</p>
            </div>
        </footer>
    </div>

@endsection

{{-- Page-specific scripts --}}
@section('scripts')

    <script>
        new LazyLoad()
    </script>

@endsection