@push('liveStyle')
<link rel="stylesheet" href="{{ asset('assets/front/common/css/annotator.css?v='.time()) }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
    textarea.dummy {
        width: 20em !important;
    }
    #dummy {
        /* cursor: not-allowed; */
}
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Old versions of Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .highlight {
	background-color: #ccff00;
	height: 30px;
	z-index: -1;
}
    .annotationStyle {
        background-color: #2185d0 !important;
        border: 1px dashed white;
        color: white;
        z-index: 2000;
    }

    /* Popover Styles */
    /* #annotate_settings {
        background: #FFF;
        border-radius: 4px;
        color: white;
        font-size: 13px;
        font-weight: bold;
        padding: 4px 8px;
        z-index: 2000;
    } */

    #annotate_settings[data-show] {
        display: block;
    }

    #arrow,
    #arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        z-index: -1;
    }

    #arrow::before {
        content: '';
        transform: rotate(45deg);
        background: #FFF;
        box-shadow: -4px -4px 5px #00000012;
    }

    #annotate_settings[data-popper-placement^='top']>#arrow {
        bottom: -4px;
    }

    #annotate_settings[data-popper-placement^='bottom']>#arrow {
        top: -4px;
    }

    #annotate_settings[data-popper-placement^='left']>#arrow {
        right: -4px;
    }

    #annotate_settings[data-popper-placement^='right']>#arrow {
        left: -4px;
    }

    /* Semantic UI Overrides */
    .ui.floating {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 2001;
    }

    .ui.segment {
        margin: 0.5rem !important;
    }

    .ui.card>.content {
        height: 80vh;
        overflow-y: auto;
    }

    .ui.feed>.event>.content .example.text {
        font-size: 1.2em;
        line-height: 1.6285em;
        max-width: 100%;
        border: 2px dashed #8080803b;
        padding: 0.25em;
    }

    /* Utilities */
    .p-around_small {
        margin: 1rem !important;
    }

    .m-bottom_medium {
        margin-bottom: 2rem !important;
    }

    .m-bottom_x-small {
        margin-bottom: 1rem !important;
    }

    /* Custom Styles */
    .love {
        color: #ff2733;
    }
    .cus_mdal_survey {
	position: sticky;
	bottom: 20%;
	z-index: 9;
	padding: 0 62px;
}
</style>
@endpush
<div>
    <div class="container-fluid">
        <div class="rb-heading">
            <h2 class="font-size-28">Dashboard</h2>
        </div>
        <div class="famous-design-main mt-10">
            <div class="container-fluid py-4">
                <div class="row">
                    <div class="col-lg-2 col-md-12">
                        <div class="items-list">
                            <ul class="nav nav-pills products-pics-list pb-4 draft-sidebar-container-js">
                                {{-- @foreach($all_drafts as $key => $value)
                                <li class="nav-item prev-space">
                                    <a class="nav-link p-0 active changeDslide" data-toggle="pill" href="#img1" data-id="{{$value->id}}" >
                                        <img src="{{asset('assets/front/common/images/Group-1521.png')}}" class="product-img">
                                        @if($value->id == $id)
                                        <span class="done_check">
                                            <span class="material-icons done_sign">check_circle</span>
                                        </span>
                                        @endif
                                    </a>
                                </li>
                                @endforeach --}}
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="tab-content full-view-image">
                            <div class="tab-pane active" id="img1">
                                <div class="zoom_img" id="hubble-container">
                                    <div class="example dummyseo_cnt" id="dummy">
                                        {!! file_get_contents($draft->preview_media->url) !!}
                                    </div>

                                </div>
                            </div>
                            @if( !isset( $hideApproveForm ) || $hideApproveForm === false )
                            <x-draft.survey-form :draftId="$id" />
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Annotator Popover Contents-->
        <div id="annotate_settings" style="display: none">
        </div>

    </div>
</div>
@include('inc.logo-loader')
@push('liveScript')
@if ( isAnonymousUser() )
<script>
    var anonymous_user = '{{ session('referalUser')->name }}';
</script>
@endif
<script>
    var projectType = 'content';
    var draftId = '{{$id}}';
    var projectId = '{{$project_id}}';
    var project_status = '{{$projectStatus->slug ?? ''}}'
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
<!--Optional (used for Templating)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.6/jsrender.min.js"></script>
<!--Optional (used for Semantic UI)-->
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> --}}
<script src="{{asset('assets/front/js/classes/draftClasses.js?v='.time())}}"></script>
<script src="{{asset('assets/front/js/content-preview.js?v='.time())}}"></script>
<script src="{{ asset('assets/front/common/js/annotator.js?v='.time()) }}"></script>
<script src="{{ asset('assets/front/js/seo-annotation.js?v='.time()) }}"></script>
<script>

</script>

@endpush