{{--

Footer: Found at the bottom of every page
We want our content to stay focused in the center area,
but we also want to align some of the items vertically.
Therefor we use a flexable-layout inside a contained-layout.

1: Small hack: Because the footer in on every page,
we here added the id to keep track of the grid-size.
This is used in our drip animation.

--}}

<footer class="main">

    {{--
        Keep the content focused in the center area
        1: This element is also used to calculate drip-width
    --}}
    <div class="contained-layout" id="drip-transition-grid-width">

        {{-- Centered content on a 12-column grid --}}
        <div class="col-12 centered">

            {{--
                Create a flexable layout for better alignment opportunities
            --}}
            <div class="flexable-layout">

                {{-- Left section --}}
                <div class="logo-container footer-col">
                    <a class="logo" href="/">
                        @include('site.svg.kommaLogoWba')
                    </a>
                </div>

                {{-- Middle section --}}
                <div class="button-container footer-col">
                    @if(View::hasSection('footer_button'))
                        @yield('footer_button')
                    @else
                        <a href="/gesprek-plannen" class="button stroked footer arrow">Plan een gesprek</a>
                    @endif
                </div>

                {{-- Right section --}}
                <div class="contact-container footer-col">

                    {{-- Social media--}}
                    <span class="social-media">
                        <a href="{!! Config::get('site.social.facebook') !!}" target="_blank" class="icon facebook"></a>
                        <a href="{!! Config::get('site.social.linkedIn') !!}" target="_blank" class="icon linkedIn"></a>
                    </span>

                    {{-- Contact --}}
                    <span class="contact-details">
                        @include('site.partials.phone')<br />
                        <a href="mailto:info@komma.pro">info@komma.pro</a>
                    </span>
                </div>

                {{-- Button full navigation section --}}
                {{-- Todo: refactor navigation --}}
                <nav class="footer">

                    <ul>
                        <li @if(Request::path() == '/') class="active" @endif >
                            <a data-name="home" href="/" >Home</a>
                        </li>
                        <li @if(starts_with(Request::path(),'over-ons')) class="active" @endif >
                            <a data-name="about" href="/over-ons">Over ons</a>
                        </li>
                        <li @if(starts_with(Request::path(),'cases')) class="active" @endif >
                            <a data-name="cases" href="/cases">Cases</a>
                        </li>
                        <li @if(starts_with(Request::path(),'aanpak')) class="active" @endif >
                            <a data-name="process" href="/aanpak">Aanpak</a>
                        </li>
                        <li @if(starts_with(Request::path(),'diensten')) class="active" @endif >
                            <a data-name="services" href="/diensten">Diensten</a>
                        </li>
                        <li @if(starts_with(Request::path(),'referenties')) class="active" @endif >
                            <a data-name="testimonials" href="/referenties">Referenties</a>
                        </li>
                        <li @if(starts_with(Request::path(),'vacatures')) class="active" @endif >
                            <a data-name="jobs" href="/vacatures">Werken bij Komma</a>
                        </li>
                        <li @if(starts_with(Request::path(),'contact')) class="active" @endif >
                            <a data-name="contact" href="/contact">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    {{-- Less important stuff goes here--}}
    <div class="less-important-stuff">
        <div class="contained-layout">
            <div class="col-6 offset-1">
                <a href="/" class="copyright">&copy; Komma {{ date('Y') }}</a>
            </div>
            <div class="col-6">
                <a class="no-barba" href="/privacy">Privacy</a>
                <a data-name="terms" href="/algemene-voorwaarden">Algemene voorwaarden</a>
                <a data-name="disclaimer" href="/disclaimer">Disclaimer</a>
                <a data-name="sitemap" href="/sitemap">Sitemap</a>
            </div>
        </div>
    </div>
</footer>