@extends('layouts.legacy')

@section('content')
<div class="container-fluid legacy-page">
    <div class="effect2 page-header-wrap">
        <header class="page-heading">
            <h1 class="page-header">Browse Categories</h1>
            <p>Select a category to view its artworks.</p>
        </header>
    </div>

    <div class="row">
        @forelse ($contentTypes as $ct)
            <div class="col-sm-12">
                <div class="panel panel-default effect2">
                    <div class="panel-heading"><strong>{{ $ct->name }}</strong></div>
                    <div class="panel-body">
                        <p>{!! $ct->description ?? 'Browse artworks by content type.' !!}</p>

                        @forelse ($ct->roots as $cat)
                            @php
                                $name = $cat->category_name ?? '';
                                $subs = $subgroups[$cat->category_id] ?? collect();
                            @endphp
                            <div class="legacy-root-category">
                                <h4>{{ $name }}</h4>
                                <ul class="browseList">
                                    @forelse ($subs as $sub)
                                        @php $picture = $sub->picture ?? 'cfolder15.gif'; @endphp
                                        <li style="width:19%">
                                            <img src="/gfx/icons/{{ $picture }}" width="15" height="15" border="0" alt="{{ $sub->category_name }}" />
                                            <a href="/{{ $name }}/{{ Str::slug($sub->category_name) }}/{{ $sub->category_id }}" title="{{ $sub->category_name }}">{{ $sub->category_name }}</a>
                                        </li>
                                    @empty
                                        <li class="text-muted">No subcategories</li>
                                    @endforelse
                                </ul>
                            </div>
                        @empty
                            <div class="alert alert-info">No categories for this content type.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        @empty
            <div class="col-xs-12">
                <div class="alert alert-info">No content types available.</div>
            </div>
        @endforelse
    </div>
</div>
@endsection