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

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

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_5')],
        ['label' => __('site.page_camera_h1')],
    ];
@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_camera_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_camera_sub') }}</p>
        </div>
    </header>

    <div class="camblock" id="cam-blocked" hidden>
        <span class="camblock__ico"><i class="fa-solid fa-triangle-exclamation"></i></span>
        <div>
            <h2 class="camblock__title">{{ __('site.page_camera_block_title') }}</h2>
            <p class="camblock__text" id="cam-blocked-text"></p>
        </div>
    </div>

    <div class="camlayout">

        <div class="camstage" id="cam-stage">
            <video class="camstage__video" id="cam-video" autoplay muted playsinline></video>

            <div class="camstage__empty" id="cam-empty">
                <i class="fa-solid fa-video"></i>
                <span id="cam-empty-text"></span>
            </div>

            <div class="camstage__bar" id="cam-bar" hidden>
                <span class="camstage__live" id="cam-live" hidden>
                    <span class="camstage__dot"></span> {{ __('site.page_camera_live') }}
                </span>
                <span class="camstage__clock" id="cam-clock">00:00:00</span>
            </div>
        </div>

        <div class="campanel">

            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-sliders"></i> {{ __('site.page_camera_control') }}</h2>
                </div>

                <div class="sec__body">
                    <div class="camfield" id="cam-source-box" hidden>
                        <label class="camfield__label" for="cam-source">{{ __('site.page_camera_select_label') }}</label>
                        <select class="input" id="cam-source"></select>
                        <span class="camfield__help">{{ __('site.page_camera_select_help') }}</span>
                    </div>

                    <div class="camact">
                        <button class="btn btn--primary" type="button" id="cam-start" disabled>
                            @include('includes.spinner')
                            <i class="fa-solid fa-tower-broadcast"></i>
                            <span class="btn__label">{{ __('site.page_camera_btn_start') }}</span>
                        </button>

                        <button class="btn btn--danger" type="button" id="cam-stop" hidden>
                            <i class="fa-solid fa-stop"></i> {{ __('site.page_camera_btn_stop') }}
                        </button>
                    </div>
                </div>
            </section>

            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-circle-info"></i> {{ __('site.page_camera_notes') }}</h2>
                </div>

                <div class="sec__body">
                    <p class="camnote camnote--warn">
                        <i class="fa-solid fa-triangle-exclamation"></i> {{ __('site.page_camera_warning') }}
                    </p>
                    <p class="camnote"><i class="fa-solid fa-video"></i> {{ __('site.page_camera_note_1') }}</p>
                    <p class="camnote"><i class="fa-solid fa-volume-xmark"></i> {{ __('site.page_camera_note_2') }}</p>
                </div>
            </section>

        </div>

    </div>

    <div class="modal cammodal" id="cam-modal" role="alertdialog" aria-modal="true" aria-labelledby="cam-modal-title" hidden>
        <div class="modal__card">
            <span class="cammodal__ico"><i class="fa-solid fa-circle-exclamation"></i></span>

            <h2 class="modal__title" id="cam-modal-title">{{ __('site.page_camera_error_title') }}</h2>
            <p class="modal__text" id="cam-modal-text"></p>
            <p class="cammodal__detail" id="cam-modal-detail" hidden></p>

            <div class="modal__foot">
                <button class="btn btn--primary" type="button" data-cam-close>{{ __('site.page_camera_understood') }}</button>
            </div>
        </div>
    </div>

</main>

@section('scripts')
    <script>
        window.STUDIOCAM = {
            ws: @json(config('studiocam.ws')),
            application: @json(config('studiocam.application')),
            stream: @json((string) $siteData->stream_port),
            videoBitrate: {{ (int) config('studiocam.video_bitrate') }},
            videoFrameRate: {{ (float) config('studiocam.video_framerate') }},
            videoCodec: @json(config('studiocam.video_codec')),
            txt: {
                start: @json(__('site.page_camera_btn_start')),
                starting: @json(__('site.page_camera_btn_starting')),
                asking: @json(__('site.page_camera_asking')),
                denied: @json(__('site.page_camera_denied')),
                noCamera: @json(__('site.page_camera_no_camera')),
                cameraError: @json(__('site.page_camera_camera_error')),
                cameraN: @json(__('site.page_camera_camera_n')),
                connectError: @json(__('site.page_camera_connect_error')),
                serverError: @json(__('site.page_camera_server_error')),
                startError: @json(__('site.page_camera_start_error')),
                dropped: @json(__('site.page_camera_dropped')),
                noSecure: @json(__('site.page_camera_no_secure')),
                noSupport: @json(__('site.page_camera_unsupported')),
                noSupportShort: @json(__('site.page_camera_no_support_short')),
                stopAsk: @json(__('site.page_camera_stop_ask')),
                stopText: @json(__('site.page_camera_stop_text')),
                stopDo: @json(__('site.page_camera_btn_stop'))
            }
        };
    </script>
    <script src="{{ assetv('/assets/js/studio-cam.js') }}"></script>
@endsection

@include('includes/footer-novo')