@extends('website.layouts.app')

@section('content')

    <div class="container pt-50 pb-50">
		<div class="title">Fish Detailes</div>
        <div class="fish_details section mb-80">
            <div class="columns is-vcentered is-multiline has-text-centered">
                <div class="column is-6 pl-20 pr-20">
                    <div class="image-wrapper">
                        <img src="{{ asset('storage/'.$fish->image) }}"
                        data-demo-src="{{ asset('storage/'.$fish->image) }}"/>
                    </div>
                </div>
                <div class="column is-6 pl-20 pr-20 mb-0">
                    <div>
                        <div class="title">{{ $fish->name }}</div>
                        <div class="">{{ $fish->description }}</div>
                    </div>
                </div>
            </div>
        </div>

        @if($fish->content)
            <div class="fishes-list section mb-100">
                <div class="page_section is-vcentered has-text-centered">
                    {!! $fish->content !!}
                </div>
            </div>
        @endif

		<div class="title">Related Fish</div>
        <div class="fishes-list section mb-100">
            <div class="columns is-vcentered is-multiline has-text-centered">
                @foreach($related_fishes as $fish)
                    <div class="column is-4 pl-20 pr-20 mb-40">
                        <a href="{{ route('fish_details', ['fish' => $fish->id]) }}">
                            <div class="image-wrapper">
                                <img src="{{ asset('storage/'.$fish->image) }}"
                                data-demo-src="{{ asset('storage/'.$fish->image) }}"/>
                            </div>
                            <div>
                                <div class="title">{{ $fish->name }}</div>
                                <div class="type">{{ $fish->fish_type->name }}</div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>

    </div>

@endsection