<div class="c-mmh-categories">

    @foreach($mmhForEachCategories as $mmh)

        <a class="c-mmh-categories__item" href="{{ $links->monthly_must_have->route }}/{{$mmh->translation->slug}}" >

            <div class="c-mmh-categories__image">
                <figure class="c-mmh-categories__figure">
                    @if($mmh->images->isNotEmpty())
                        <img class="u-object-cover" data-object-cover alt="{{ $mmh->images->first()->name }}" src="{{ $mmh->images->first()->medium_image_url }}" />
                    @endif
                </figure>
            </div>

            <div class="c-mmh-categories__body">

                <div class="c-mmh-categories__icon-box">
                    <div class="c-mmh-categories__icon  c-mmh-categories__icon--{{ $mmh->category->code_name }}">
                        @include('site.components.icons.' . $mmh->category->code_name)
                    </div>
                </div>

                <div class="c-mmh-categories__content">

                    <div class="c-mmh-categories__label">{{ ucfirst(strtolower( __('site/global.monthly_must_have') )) }}</div>
                    <h5 class="c-mmh-categories__title">{{ $mmh->translation->name }}</h5>

                    <div class="c-mmh-categories__action">
                        @include('site.components.textButton', ['modifiers' => ['icon', 'on-dark'], 'textButtonText' => __('site/global.watch_must_have'), 'isButton' => true])
                    </div>

                </div>

            </div>

        </a>

    @endforeach

</div>