@extends('main.layout')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/extra.css') }}">
    <script defer src="{{ asset('js/jumbotron.js') }}"></script>
@endpush

@section('content')
{{--    data-images is a , seperated list with all images--}}
    <section id="jumbotron" class="jumbotron" data-delay="5000" data-images="img/bar.jpg,img/cinema.jpg,img/lobby.jpg">
        <div class="container">
            <h1 class="display-4">{{ config('app.name', 'CineFlex') }}</h1>
            <p class="lead">Welcome to CineFlex, the best cinema management system in the world!</p>
            <p>Here you can see what movies are playing at your local cinema and buy tickets for them.</p>
            <a class="button" href="{{ route('cinemas') }}" role="button">Cinemas</a>
        </div>
        <img class="jumbotron-image" src="" data-order="1">
        <img class="jumbotron-image" src="" data-order="2">

    </section>

    <h2>Cinemas</h2>
    <ul>
        @foreach($cinemas as $cinema)
            <li>
                <a href="{{ route('cinema', ['id'=>$cinema->cinema_id]) }}">
                    {{ $cinema->cinema_name }} - {{ $cinema->address->address_city }}
                </a>
            </li>
        @endforeach
    </ul>
@endsection