@section('title', __('site.page_chat_title'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/sitechat.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_5')],
        ['label' => __('site.menu_item_5_sub_2')],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_chat_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_chat_sub') }}</p>
        </div>

        <div class="page-head__acts">
            <a class="btn btn--ghost" href="https://{{ $siteData->domain }}" target="_blank" rel="noopener">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('site.page_themes_open_site') }}
            </a>

            <button class="btn btn--primary banopen" type="button">
                <i class="fa-solid fa-user-slash"></i> {{ __('site.page_chat_btn') }}
                <span class="btn__count banopen__count" @if(! $totalBanned) hidden @endif>{{ $totalBanned }}</span>
            </button>
        </div>
    </header>

    <section class="sec chatroom">
        <div class="sec__head">
            <h2 class="sec__title"><i class="fa-solid fa-comments"></i> {{ __('site.page_chat_room') }}</h2>
            <p class="sec__desc">{{ __('site.page_chat_room_desc') }}</p>
        </div>

        <div class="sec__body chatroom__body">
            <iframe class="chatroom__frame" src="{{ $chatUrl }}" title="{{ __('site.page_chat_h1') }}"
                    referrerpolicy="no-referrer" allow="clipboard-write"></iframe>
        </div>
    </section>

    <p class="chatnote">
        <i class="fa-solid fa-circle-info"></i> {{ __('site.page_chat_note') }}
    </p>

    <div class="modal banmodal" id="ban-modal" role="dialog" aria-modal="true" aria-labelledby="ban-modal-title" hidden>
        <div class="modal__card">
            <div class="banmodal__head">
                <h2 class="modal__title" id="ban-modal-title">{{ __('site.page_chat_ban_h1') }}</h2>

                <button class="banmodal__x" type="button" data-ban-close aria-label="{{ __('general.action_close') }}">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <p class="modal__text">{{ __('site.page_chat_ban_msg') }}</p>

            <div class="banmodal__body">
                <ul class="banskel" aria-hidden="true">
                    @for($i = 0; $i < 3; $i++)
                        <li class="banskel__item">
                            <span class="banskel__who">
                                <span class="banskel__bar banskel__bar--name"></span>
                                <span class="banskel__bar banskel__bar--when"></span>
                            </span>
                            <span class="banskel__bar banskel__bar--btn"></span>
                        </li>
                    @endfor
                </ul>

                <p class="banmodal__state" hidden></p>
                <ul class="banlist" hidden></ul>
            </div>

            <p class="banmodal__capped" hidden>{{ __('site.page_chat_ban_capped') }}</p>

            <div class="modal__foot">
                <button class="btn btn--ghost" type="button" data-ban-close>{{ __('general.action_close') }}</button>
            </div>
        </div>
    </div>

</main>

@section('scripts')
    <script>
        window.CHATBAN = {
            list: @json(route('site.chat.d.list')),
            origin: @json(parse_url(config('chat.url'), PHP_URL_SCHEME) . '://' . parse_url(config('chat.url'), PHP_URL_HOST)),
            remove: @json(route('site.chat.d.do', ['id' => '%id%'])),
            txt: {
                empty: @json(__('site.page_chat_ban_norec')),
                fail: @json(__('site.page_chat_ban_fail')),
                unban: @json(__('site.page_chat_ban_unban')),
                unbanAsk: @json(__('site.page_chat_ban_unban_ask', ['name' => '%name%'])),
                bannedAt: @json(__('site.page_chat_ban_at', ['when' => '%when%', 'ago' => '%ago%']))
            }
        };
    </script>
    <script src="{{ assetv('/assets/js/site-chat.js') }}"></script>
@endsection

@include('includes/footer-novo')