@extends('main.layout')

@section('content')

    <section>
        <h1>{{$genre->genre_name}}</h1>
        <hr/>
        <div id="genre">
            <div class="details">
                <span>{{$genre->genre_description}}</span><br/>
            </div>
        </div>
    </section>

    <section>
        <h1>Movies:</h1>
        <hr/>
        <div id="movies">
            @foreach($genre->movies as $movie)
                <a href="/movie/{{$movie->movie_id}}">
                    <x-cache-image src="{{$movie->movie_image}}" alt="{{$movie->movie_name}} Poster" class="poster" width="200px"/>
                    <div class="details">
                        <span>{{$movie->movie_name}}</span><br/>
                        <span>{{$movie->movie_length}} min</span>
                    </div>
                </a>
            @endforeach
        </div>
    </section>
@endsection