@extends('layouts.basePage', [
    'title' => 'SFs Dupe',
    'breadcrumbs' => [
        [
            'title' => 'Home',
            'href' => '/',
        ]
    ]
])

@section('content')

    <!-- Header on mobile -->
    <header>

    </header>

    <div class="container container--no-gap"><div class="row"> <!-- no-gap should probably be the default tbf -->
        <!-- Sidenav desktop + mobile (via burger) -->
        <nav class="col hide-xs hide-sm col-3 nav" style="height: 100vh;">
            <!-- Change to not be inline also, with manual click dropdowns that perma open/close -->
            <ul class="nav-list">
                @foreach($mainNav as $item)
                    <li class="nav-list__item {{ !empty($item['children']) ? 'nav-list__item--has-dropdown' : '' }}">
                        <a href="{{ $item['link'] }}">{{ $item['title'] }}</a>
                        @if(!empty($item['children']))
                        <ul class="nav-list__item__dropdown">
                        @foreach($item['children'] as $child)
                            <div class="nav-list__item__dropdown__content">
                                <li class="nav-list__item__dropdown__item"><a href="{{ $child['link'] }}">{{ $child['title']; }}</a></li>
                            </div>
                        @endforeach
                        </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </nav>
        
        <div class="col col-xs-12 col-sm-12 col-9 main right" style="height: 100vh; transition: max-width .3s linear;">
            <main>
                <!-- Header h1, etc. -->
                <div class="row row--align-center" style="padding-top: 12px">
                    <div class="col col-6">
                        <h1 class="no-margin">Title</h1>
                    </div>
                    <div class="col col-6 tar">
                        <span class="tag">t1</span>
                        <span class="tag">t1</span>
                    </div>
                </div>

                <!-- Hero -->
                <div class="row">
                    <div class="col col-12">
                        <div class="hero">
                            <img src="https://placehold.co/1200x800">
                            <div class="hero__content">
                                <h2>Main Text</h2>
                                <p>Secondary text</p>
                                <a href="#" class="button">Button</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Items/etc -->
                <div class="row">
                    <div class="col col-12">
                        <p>8 items</p>
                    </div>

                    @for ($i = 0; $i < 8; $i++)
                    <div class="col col-3">
                        <div style="position: relative">
                            @if($i%3 == 1)
                                <div style="position:absolute; left: 4px; top: 4px;"><p class="tag" style="font-size: 12px; background: #000;">Sale</p></div>
                            @elseif($i%5 == 1)
                                <div style="position:absolute; left: 4px; top: 4px;"><p class="tag" style="font-size: 12px; background: #000;">NEW</p></div>
                            @endif
                            <img src="https://placehold.co/400x500">
                            <p>Item tile here</p>
                            <p><strong>£21.99</strong></p>
                        </div>
                    </div>
                    @endfor
                </div>
            </main>
            
            <footer class="footer">
                <p>Footer</p>
            </footer>
        </div>
    </div></div>

@endsection