@extends('layouts.app')

@section('content')
<div class="page-wrapper content-wrapper page-arena">
    <section class="mini-banner" style="background-image: url()">
        <div class="container">
            <div class="mini-banner__title">
                <small>Quadras</small>
                <h2>Acesse os seus replays</h2>
            </div>
        </div>
    </section>

    <section class="arenas">
        <div class="container">
            <h2>Selecione a arena para visualizar <strong>seu replay.</strong></h2>
            <div class="arenas__items">
                @foreach($arenas as $arena)
                    <a href="{{ route('courts.index', ['arena' => $arena->name, 'court' => '', 'date' => '', 'time_range' => '']) }}">
                        <div class="arena__item">
                            <div class="image">
                                @if(isset($arena->image) && $arena->image)
                                    <img src="{{ asset('storage/' . $arena->image) }}" alt="{{ $arena->name }}">
                                @else
                                    <img src="{{ asset("storage/arenas/{$arena->name}.png") ?? $siteInfo->header_logo ?? '' }}" alt="{{ $arena->name }}">
                                @endif
                            </div>
                            <h3>{{ $arena->name }}</h3>
                            <p>{{ $arena->location ?? 'Fortaleza - CE' }}</p>
                        </div>
                    </a>
                @endforeach
            </div>
            
           

            <!--<ul class="pagination">
                <li>
                    <a href="#" class="prev"> <i class="fas fa-fw fa-chevron-left"></i> </a>
                </li>
                <li>
                    <a class="page-numbers" href="#"> 1 </a>
                </li>
                <li>
                    <a class="page-numbers current"> 2 </a>
                </li>
                <li>
                    <span class="page-numbers dots"> ... </span>
                </li>
                <li>
                    <a class="page-numbers" href="#"> 5 </a>
                </li>
                <li>
                    <a href="#" class="next"> <i class="fas fa-fw fa-chevron-right"></i> </a>
                </li>
            </ul> -->
        </div>
    </section>
</div>
@endsection