@extends('layouts.frontend.main')

{{-- content --}}
@section('content')
<section class="mb-5">

    <div class="row justify-content-md-center mb-3">
		<div class="col col-lg-4">

            <div class="card">
                <img
                    class="img-fluid"
                    src="http://via.placeholder.com/640x360"
                >
                <div class="card-body pb-2">
                    <h5 class="card-title text-center mb-3">
                        Part name / product line-up
                    </h5>
                    @foreach($list as $key => $value)
                        <dl class="row small text-muted mb-1">
                            <dt class="col-auto me-auto mb-lg-0">
                                {!! $value !!}
                            </dt>
                            <dd class="col-auto mb-0">
                                ########
                            </dd>
                        </dl>
                    @endforeach
                </div>
            </div>

        </div>
    </div>

    <div class="text-center">
        <a
            class="btn btn-outline-secondary btn-sm px-5"
            href="{!! route('mocup.page', [
                'page1_1',
            ]) !!}"
        >
            Back
        </a>
    </div>

</section>

<section class="mb-5">

    <div class="text-center mb-3">
        <h4 class="card-title mb-0">
            Applicable vehicles
        </h4>
    </div>

    <div class="row justify-content-md-center mb-3">
		<div class="col col-lg-4">
            <div class="d-grid gap-2">
                <a
                    class="btn btn-primary"
                    href="{!! route('mocup.page', [
                        'page1_4',
                    ]) !!}"
                >
                    Search
                </a>
            </div>
        </div>
    </div>

</section>
@endsection

{{-- css --}}
@section('css')
<style>

</style>
@stop

{{-- js --}}
@section('js')
<script>
$(function() {
	//
});
</script>
@stop