@extends('frontend::layouts.master')
@section('content')
    @livewire('frontend::page-title', ['article' => $article, 'breadcrumb' => $breadcrumb])

    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h1 class="fs-1 fw-bold mb-3">{!! $article['name'] ?? '' !!}</h1>
                <p>{!! $article['detail'] ?? '' !!}</p>
            </div>

            <div class="row row-cols-1 row-cols-md-2 g-4">
                @if (!empty($machines))
                    <div class="col">
                        <div class="card hover-card h-auto">
                            <div class="text-inner"><a href="{{ $machines['url'] ?? '' }}">{!! $machines['name'] ?? '' !!}</a></div>
                            <div class="ratio ratio-21x9">
                                <img class="object-fit-cover" src="{{ asset($machines['image'] ?? '') }}" alt="...">
                            </div>
                        </div>
                        @if (!empty($pouch))
                            <div class="card hover-card h-auto">
                                <div class="link-inner">
                                    <a href="{{ $pouch['url'] ?? '' }}">{!! $pouch['name'] ?? '' !!}<i
                                            class="fas fa-angle-double-right ms-2 text-ci-primary"></i></a>
                                </div>
                            </div>
                        @endif
                        @if (!empty($peripheral))
                            <div class="card hover-card h-auto">
                                <div class="link-inner">
                                    <a href="{{ $peripheral['url'] ?? '' }}">{!! $peripheral['name'] ?? '' !!}<i
                                            class="fas fa-angle-double-right ms-2 text-ci-primary"></i></a>
                                </div>
                            </div>
                        @endif
                    </div>
                @endif

                @if (!empty($film))
                    <div class="col">
                        <div class="card hover-card h-auto">
                            <div class="text-inner"><a href="{{ $film['url'] ?? '' }}">{!! $film['name'] ?? '' !!}</a></div>
                            <div class="ratio ratio-21x9">
                                <img class="object-fit-cover"
                                    src="{{ asset($film['image'] ?? '') }}" alt="...">
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <x-frontend::section.contact-n-question title=""  description="{!! $questions['detail'] ?? '' !!}" image="{!! $questions['image'] !!}" :toggleBtnContactUs=false :toggleBtnFindAnswers=true :toggleBtnGetInTouch=true :url="$page_init['url']" />
@endsection