@php
/**
 * Legacy browse-categories view ported from oldSite/pages/browse-categories.page.php
 * Variables: $categories (collection), $fixName (callable)
 */
@endphp
@extends('layouts.nova')

@section('content')
    <div class="effect2">
        <div class="page-heading">
            <h1 class="page-header">Browse Categories</h1>
            <p>List of all categories at Skinbase</p>
        </div>
    </div>

    @if (class_exists('\App\Banner'))
        <?php \App\Banner::ShowResponsiveAd(); ?>
    @endif

    @foreach ($contentTypes as $ct)
        <div class="panel panel-skinbase effect2">
            <div class="panel-heading">
                <h2 class="panel-title">{{ $ct->name }}</h2>
            </div>
            <div class="panel-body">
                <p>{!! $ct->description ?? '' !!}</p>

                @php
                    $roots = $categoriesByType[$ct->slug] ?? $ct->rootCategories ?? collect();
                @endphp

                @if ($roots->isEmpty())
                    <div class="alert alert-info">No categories for this content type.</div>
                @else
                    <ul class="browseList" style="list-style:none;padding:0;margin:0;">
                        @foreach ($roots as $category)
                            <li style="display:block;margin-bottom:8px;">
                                <h4>{{ $category->name }}</h4>
                                <p>{!! $category->description !!}</p>
                                <ul style="list-style:none;padding:0;margin:0;">
                                    @foreach ($category->subcategories as $subcategory)
                                        @php
                                            $picture = $subcategory->image ?: "../cfolder15.gif";
                                            $subcategoryName = $subcategory->name;
                                            $subcategoryUrl = $subcategory->url;
                                        @endphp
                                        <li style="width:19%;display:inline-block;vertical-align:top;">
                                            <img src="/gfx/icons/{{ $picture }}" width="15" height="15" alt="{{ $subcategoryName }}" />
                                            <a href="{{ $subcategoryUrl }}" title="{{ $subcategoryName }}">{!! $subcategoryName !!}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    @endforeach
@endsection