{{-- PDF viewer js--}}
<script src="{{ asset('/js/pdf.min.js') }}"></script>
<script src="{{ asset('/js/pdf.worker.min.js') }}"></script>

@if($pdfPreview === 'true' || $pdfPreview === true)
    <div id="loadingSpinnerAjax" class="d-flex justify-content-center align-items-center w-100">
        <div class="spinner-border text-primary d-flex justify-content-center" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div id="pdfPreview" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active caro_border p-0">
                <canvas oncontextmenu="return false;" class="d-block w-100" id="the-canvas"></canvas>
            </div>
        </div>
        <a class="carousel-control-prev" href="#pdfPreview" role="button" id="prev" >
            <span class="caro_arrow"><i class="fas fa-angle-left"></i></span>
            <span class="sr-only">{{ __('contract.preview.pdfPrevious') }}</span>
        </a>
        <a class="carousel-control-next" href="#pdfPreview" role="button" id="next">
            <span class="caro_arrow"><i class="fas fa-angle-right"></i></span>
            <span class="sr-only">{{ __('contract.preview.pdfNext') }}</span>
        </a>
    </div>

    <p id="pdfPage" class="text-center">{{ __('contract.preview.pdfPage') }} <span id="page_num"></span> / <span id="page_count"></span></p>
    
    @if( isset($contract['editable']) && $contract['editable'] )
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="col-12 col-md-8 mb-3 m-0 p-0 d-flex justify-content-center align-items-center">
                <a href="/contract/{{ $contract['id'] }}/create-free-body" class="btn btn-light-blue col-10 col-md-8 px-2 px-sm-3 px-md-4 text-center createFreeBodyContractBtn fly-to-top" id="createThisContract"><i class="far fa-edit mr-0 mr-sm-2"></i> {{ __('button.create.freeWordContract') }}</a>
                <i class="far fa-question-circle pointer ml-3" style="font-size: 20px;" data-container="body" data-toggle="freebodyTooltip" data-placement="left" data-content="{{ __('button.create.freeWordContract.tooltip') }}"></i>
                <script>$(function () { $('[data-toggle="freebodyTooltip"]').popover() });</script>
            </div>
        </div>
    </div>
    
    
    @endif
    
    @if( isset($showContractName) ) 
        @if( $showContractName === true )
            <div class="mt-4 @if(Session::has('loginToken') !== true) mb-4 @endif">
                <label for="contractNewName" class="component-label mb-0">{{ __('contract.summary.nameOfTheContract') }}</label>
                <input id="contractNewName" type="email" class="col-md-12 form-control" name="contractNewName" value="{{ $contract['name'] }}" autocomplete="off" required>
                <span class="invalid-feedback" role="alert" style="display: none;"></span>
            </div>

            <div class="form-group question component-type-checkbox bmd-form-group pt-1 @if(Session::has('loginToken') !== true) d-none @endif" id="question-saveAsTemplate">
                <div class="component optional">
                    <div class="d-block checkbox container">
                        <div class="row">
                            <div class="col-*-*">
                                <input id="saveAsTemplate" name="saveAsTemplate" value="true" type="checkbox" class="evp_checkbox pointer" data-alertmodaltitle="{{ __('modal.saveContract.alert.title') }}" data-alertmodalmsg="{{ __('modal.saveContract.alert.msg') }}" autocomplete="off" @if(Session::has('loginToken') !== true) disabled @endif>
                                <label class="mt-2" for="saveAsTemplate"></label>
                            </div>
                            <div class="col">
                                <label class="p-1 mt-2 pointer" for="saveAsTemplate">{{ __('contract.draft.saveAsTemplate') }}</label>
                            </div>
                        </div>
                    </div>
                    <span class="invalid-feedback" role="alert"></span>
                </div>
            </div>
        @endif
    @endif
    
    <script>
        // If absolute URL from the remote server is provided, configure the CORS
        // header on that server.
        ///     ---- [ pdfs/wiki.pdf ] ----
        var url = '{{ $pdf."?rnd=".uniqid() }}';
    </script>

    <script type="text/javascript" src="{{URL::asset('/js/pdf_preview.js')}}?{{ time() }}"></script>
@else
    <div id="previewHtml" class="p-4 overflow-auto disable-select">
        {!! $previewHtml !!}
    </div>
    <div id="previewHtmlScroll" class="d-block d-sm-none">
        <div id="previewHtmlScrollDown" class="btn btn-secondary btn-preview-scroll float-left d-flex align-items-center"><i class="fas fa-chevron-down"></i></div>
        <div id="previewHtmlScrollUp" class="btn btn-secondary btn-preview-scroll float-right d-flex align-items-center"><i class="fas fa-chevron-up"></i></i></div>
    </div>
@endif