@extends('main.layout')

@section('content')

    <section>
        <h1><x-cache-image src="{{$showing->movie->movie_image}}" alt="{{$showing->movie->movie_name}} Poster" class="poster" width="60px"/>
            {{$showing->movie->movie_name}}</h1>
        <hr/>
        <div id="showing">
            <div class="details">
                <span>Cinema: <a
                        href="/cinema/{{$showing->room->cinema->cinema_id}}">{{$showing->room->cinema->cinema_name}}</a></span><br/>
                <span>Showing: {{$showing->showing_start}} - {{$showing->showing_end()}}</span><br/>
            </div>
        </div>
    </section>

    <section>
        <h1>Details</h1>
        <hr/>
        <span>{{$showing->movie->movie_description}}</span><br/>
        <hr/>
        <span>Runtime: {{$showing->movie->movie_length  }} minutes</span><br/>
        <span>Year: {{$showing->movie->movie_year}}</span><br/>
        <span>Age limit: {{$showing->movie->movie_age_limit}}</span><br/>
        <span>Genre: <a
                href="/genre/{{$showing->movie->genre->genre_id}}">{{$showing->movie->genre->genre_name}}</a></span><br/>
    </section>

    <section>
        <h1>Tickets:</h1>
        <hr/>
        <span>Tickets available: {{$showing->tickets_available()}}</span><br/><br/>
        <a href="/showing/{{$showing->showing_id}}/order" class="button">Order Tickets</a>
    </section>
@endsection