@extends('layouts.portal')

@section('title', $point->name)
@section('portal_class', 'portal-mode-gate')

@section('content')
<section
    class="portal-card portal-gate {{ $kind === 'active' ? 'is-active' : 'is-cooldown' }}"
    data-portal-cooldown
    data-remaining-seconds="{{ $remainingSeconds }}"
>
    <div class="portal-card-body">
        @if ($kind === 'active')
            <h1 class="portal-card-title">Acesso em uso</h1>
            <p class="portal-card-text">
                Seu Wi-Fi em <strong>{{ $point->name }}</strong> ainda está liberado.
            </p>
        @else
            <h1 class="portal-card-title">Aguarde para reconectar</h1>
            <p class="portal-card-text">
                Você já usou o Wi-Fi em <strong>{{ $point->name }}</strong>.
                Quando o tempo abaixo zerar, poderá assistir um novo vídeo.
            </p>
        @endif

        <div class="portal-panel-time">
            <span class="portal-panel-time-label">
                @if ($kind === 'active')
                    Tempo restante
                @else
                    Pode reconectar em
                @endif
            </span>
            <strong class="portal-panel-time-value" data-portal-cooldown-label>{{ $remainingLabel }}</strong>
            <span class="portal-panel-time-at">
                @if ($kind === 'active')
                    Até {{ $availableAt->format('H:i') }}
                @else
                    Liberado às {{ $availableAt->format('H:i') }}
                @endif
            </span>
        </div>

        <p class="portal-card-foot">
            @if ($kind === 'active')
                Depois desse prazo, será necessário aguardar antes de reconectar.
            @else
                Esta página atualiza automaticamente.
            @endif
        </p>

        @include('portal._platform-brand')
    </div>
</section>
@endsection