<div class="c-mmh">

{{--    <a class="c-mmh__image-link" href="{{ $links->monthly_must_have->route . '/' . $mmh->translation->slug }}">--}}
        <picture class="c-mmh__image">
            @if(isset($mmh->images) && $mmh->images->isNotEmpty())
                <source media="(max-width: 550px)" srcset="{{ $mmh->images->first()->small_image_url }}">
                <source media="(max-width: 1000px)" srcset="{{ $mmh->images->first()->medium_image_url }}">
                <img class="u-object-cover" alt="{{$mmh->images->first()->name}}" src="{{$mmh->images->first()->large_image_url}}" data-object-fit="cover" />
            @endif
        </picture>
{{--    </a>--}}

    <div class="c-mmh__main">

        <div class="c-mmh__content">

            <h2 class="c-mmh__title">@lang('site/global.monthly_must_have')</h2>
            <span class="c-mmh__month">@lang('calendar.month_names.'. ($mmh->date->format('n') - 1) )</span>

            <p class="c-mmh__text">
                {!! nl2br($mmh->translation->meta_description) !!}
            </p>

            @if(!empty($mmh->price))
                <div class="c-mmh__price">
                    @include('site.components.priceLabel', [
                        'priceLabelText' => $mmh->price
                    ])
                </div>
            @endif

        </div>

        <div class="c-mmh__cta">

            <div class="c-mmh__cta-title">Interesse in dit product?</div>

            <div class="c-mmh__cta-button">
                @include('site.components.button', [
                    'modifiers' => ['on-dark', 'icon'],
                    'buttonLink' => $links->contact->route,
                    'buttonText' => __('site/global.cta.title'),
                ])
            </div>

        </div>

        <div class="c-mmh__socials">
            @foreach(config('site.socials') as $social => $media)
                <a class="c-mmh__social  c-mmh__social--{{$social}}" target="_blank" href="{{$media}}">@include('site.components.icons.socials.'.$social)</a>
            @endforeach
        </div>

    </div>
</div>