@extends('front.app')
@section('content')
    <section class="wrapper bg-gray">
        <div class="container pt-10 pb-14 pb-md-16">

            <h1 class="fs-50">{{ trans('module.sport_tile') }}</h1>
            <hr class="my-8" />
            <!--/.row -->
            <div class="row grid-view gx-md-8 gx-xl-10 gy-8 text-center">

                <!--/.row -->
                <div class="row mt-17">
                    <div class="col-lg-12">
                        <div class="blog grid grid-view">
                            <div class="row isotope gx-md-8 gy-8 mb-8">
                                @foreach ($interests as $interest)
                                    <article class="item post col-md-4">
                                        <div class="card shadow-lg">
                                            @if (@$interest->images[0])
                                                <figure class="card-img-top overlay overlay-1 hover-scale"><img
                                                        class="img-fluid imgRatio imageHeight"
                                                        src="{{ @$interest->images[0]->original }}" />
                                                </figure>
                                            @else
                                                <figure class="card-img-top overlay overlay-1 hover-scale"><img
                                                        class="img-fluid imgRatio imageHeight" src="{{ url('img/no_image.jpg') }}" />
                                                </figure>
                                            @endif
                                            <div class="card-body card-body-fixed-height-1">
                                                <div class="post-header">
                                                    <div class="post category">
                                                        <show-interest :payload="{{ $interest }}"></show-interest>
                                                    </div>
                                                    <h2 class="post-title h3 mt-1 mb-3">
                                                        {{ $interest->translations[0]->title }}</h2>
                                                </div>
                                                <div class="post-content">
                                                    <p>{{ $interest->translations[0]->description }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.blog -->

                        <!-- /nav -->
                    </div>
                    <!-- /column -->

                    <!-- /column .sidebar -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container -->
    </section>
@endsection