@if(isset($mode) && $mode === 'view')
    <div class="row">
        <div class="col-sm-12 hidden-xs" style="position:relative; display: inline-block">
            @include('partials.webpImage', [
                'webpUrl' => webAssetUrl($webAssetId) . '?webp=1',
                'jpgUrl' => webAssetUrl($webAssetId),
                'attributes' => [
                    'alt' => isset($alttag) ? trim($alttag) : webLinkTitle(['type' => 'webAsset', 'target' => $webAssetId]),
                    'class' => 'img-responsive',
                    'style' => 'width: 100%',
                ]
            ])
            <div
                    style="position: absolute;
                            z-index: 999;
                            margin: 0 auto;
                    @if( isset($textAreaLocation) && $textAreaLocation == "right" )left: 60%; @else left: 0; @endif
                    @if( isset($textAreaLocation) && $textAreaLocation == "left" )right: 60%; @else right: 0; @endif
                            top: 20%;
                            text-align: center;
                            width: 33%;
                            background: rgba(214, 214, 214, .9);
                            padding-bottom:8px;"
            >
                <div style="border-bottom: solid black 1px; padding-bottom:8px; margin-bottom: 3px; margin-top: 8px; width: 80%; margin-left: 10%">
                    <h3 style="display: inline-block; font-weight: bold; margin-right: 10px;">{{ $header }}</h3>
                    @if(($button != null && $button != "") && ($buttonLocation != null && $buttonLocation == 'header')) <a class="btn btn-md btn-primary" href="{!! webLinkUrl($link, $alternateLogId ?? false) !!}">{{ $button }}</a>@endif
                </div>

                <div style="margin: 5px;">
                    <p>{{ $body }}</p>
                    @if(($button != null && $button != "") && ($buttonLocation != null && $buttonLocation == 'footer')) <a class="btn btn-md btn-primary" href="{!! webLinkUrl($link, $alternateLogId ?? false) !!}">{{ $button }}</a>@endif
                </div>
            </div>
        </div>
        <div class="hidden-sm hidden-md hidden-lg col-xs-12">
            @include('partials.webpImage', [
                'webpUrl' => webAssetUrl($webAssetId) . '?webp=1',
                'jpgUrl' => webAssetUrl($webAssetId),
                'attributes' => [
                    'class' => 'img-responsive',
                    'style' => 'width: 100%'
                ]
            ])
            <div>
                <div style="border-bottom: solid black 1px; padding-bottom:8px; margin-bottom: 3px; margin-top: 8px; width: 80%; margin-left: 10%">
                    <h3 style="display: inline-block; font-weight: bold; margin-right: 10px;">{{ $header }}</h3>
                    @if(($button != null && $button != "") && ($buttonLocation != null && $buttonLocation == 'header')) <a class="btn btn-sm btn-primary" href="{!! webLinkUrl($link, $alternateLogId ?? false) !!}">{{ $button }}</a>@endif
                </div>
                <div style="margin: 5px;">
                    <p>{{ $body }}</p>
                    @if(($button != null && $button != "") && ($buttonLocation != null && $buttonLocation == 'footer')) <a class="btn btn-sm btn-primary" href="{!! webLinkUrl($link, $alternateLogId ?? false) !!}">{{ $button }}</a>@endif
                </div>
            </div>
        </div>
    </div>
    <br>
@else
    <div class="view-container {{$default? 'default visible' : 'alternate hidden'}}" data-view-id="{{$viewId}}" data-target-customers="@if(isset($targetCustomers))  {{json_encode($targetCustomers)}} @endif" data-visible-dates="@if(isset($visibleDates))  {{json_encode($visibleDates)}} @endif" data-default-visibility="@if(isset($defaultVisibility) && trim($defaultVisibility) != "")  {{$defaultVisibility}} @else Visible @endif">
        <div style="position:relative; display: inline-block">
            <img data-web-asset-id="{{ $webAssetId }}" id="enhancedJumbotronThumbnail" src="{{ webAssetUrl($webAssetId) }}" @if(isset($alttag)) alt="{{ trim($alttag) }}" @else alt="{{ webLinkTitle(['type' => 'webAsset', 'target' => $webAssetId]) }}" @endif class="img-responsive center-block">
            <div class="overlay-div"
                    style="position: absolute;
                    z-index: 999;
                    margin: 0 auto;
                    @if( $textAreaLocation == "right" )left: 60%; @else left: 0; @endif
                    @if( $textAreaLocation == "left" )right: 60%; @else right: 0; @endif
                    top: 20%;
                    text-align: center;
                    width: 33%;
                    background: rgba(214, 214, 214, .9);
                    padding-bottom:8px;"
            >
            <div style="border-bottom: solid black 1px; padding-bottom:8px; margin-bottom: 3px; margin-top: 8px; width: 80%; margin-left: 10%">
                <h6 style="display: inline-block; font-weight: bold; margin-right: 5px;">Header</h6>
                <button @if($buttonLocation != 'header') style="display: none "@endif class="btn btn-xs btn-primary header-button">Button</button>
                </div>

                <div style="margin: 5px;">
                    <p>Body</p>
                    <button @if($buttonLocation != 'footer') style="display: none "@endif class="btn btn-xs btn-primary footer-button">Button</button>
                </div>
            </div>
        </div>

        <div>
            @lang('hilco::app.alternate_tag') <a href="#" class="enhanced-jumbotron-alttag" @if(isset($alttag)) data-img-alttag="{{ trim($alttag) }}" @else data-img-alttag="{{ webLinkTitle(['type' => 'webAsset', 'target' => $webAssetId]) }}" @endif>@if(isset($webAssetId) && isset($alttag) && trim($alttag) != "") {{ trim($alttag) }} @else {{ webLinkTitle(['type' => 'webAsset', 'target' => $webAssetId]) }} @endif</a><br>
            @lang('hilco::app.header_colon')&nbsp; <div style="display: inline;" class="header-preview"> @if($header) {{ $header }} @else None @endif</div><br>
            @lang('hilco::app.body_colon') &nbsp; <div style="display: inline;" class="body-preview"> @if($body) {{ $body }} @else None @endif</div><br>
            @lang('hilco::app.button_text_colon') &nbsp; <div style="display: inline;" class="button-preview"> @if($button) {{ $button }} @else None @endif</div><br>
            @lang('hilco::app.button_link_colon') &nbsp; <div style="display: inline;" class="link-preview"> @if($link) {{ $link }} @else None @endif</div><br>
            @lang('hilco::app.button_location_colon') &nbsp; <div style="display: inline;" class="button-location-preview"> @if($buttonLocation) {{ ucfirst($buttonLocation) }} @else None @endif</div><br>
            @lang('hilco::app.overlay_location_colon') &nbsp; <div style="display: inline;" class="overlay-preview"> @if($textAreaLocation) {{ ucfirst($textAreaLocation) }} @else None @endif</div><br>
        </div>

        <button class="btn btn-md btn-primary set-overlay" data-header-text="{{ $header }}" data-body-text="{{ $body }}" @if($button == null || $button == '') data-button-check="false" @else data-button-check="true" @endif data-button-text="{{ $button }}" data-button-link="{{ $link }}" data-textarea-location="{{ $textAreaLocation }}" data-button-location="{{ $buttonLocation }}" >Edit Text Area</button><br>
        @include('hilco::components.targetCustomer.visibilityControls', ['default' => $default ?? true, 'defaultVisibility' => $defaultVisibility ?? '', 'targetCustomersFormatted' => $targetCustomersFormatted ?? '', 'visibleDatesFormatted' => $visibleDatesFormatted ?? ''])

    </div>
@endif