@if($edit)
    <div class="mceNonEditable component-container" data-component-key="assetLink" style="display: inline-block; width: 250px; margin: 5px;"
         data-web-asset-id="{{ $webAssetId }}"
         data-link-type="{{ $link['type'] }}"
         data-link-target="{{ $link['target'] }}"
         data-link-caption="{{ $caption }}"
         data-link-private="{{ $link['isPrivate'] }}"
    >
        <a href="#" class="btn btn-danger pull-right delete-component">X</a>
        <h4>@lang('hilco::app.asset_link_with_thumbnail')</h4>
        <img src="{{ webAssetUrl(['id' => $webAssetId, 'size' => 'thumbnail']) }}" style="min-width: 80px; min-height: 80px;" class="img-responsive center-block asset-link-thumbnail">
        @lang('hilco::app.destination_colon') <a href="#" class="asset-link-url text-center">{!! strlen(webLinkTitle($link)) ? webLinkTitle($link) : '<em>'.trans('hilco::app.none').'</em>'  !!} </a><br>
        @lang('hilco::app.caption_colon') <a href="#" class="asset-link-caption text-center">{!! strlen($caption) ? $caption : '<em>'.trans('hilco::app.none').'</em>'  !!} </a><br>
        @lang('hilco::app.require_login_question_colon') <a href="#" class="asset-link-private text-center">{!! Arr::get($link, 'isPrivate') ? trans('hilco::app.yes') : trans('hilco::app.no') !!}</a>
        {{--<a class="edit-asset-link-button btn btn-primary" href="#">Edit Thumbnail</a>--}}
        {{--<a class="edit-asset-link-url-button btn btn-primary" href="#">Edit Destination</a>--}}
        {{--<a class="edit-asset-link-caption-button btn btn-primary" href="#">Edit Caption</a>--}}
    </div>
@endif

@if($script)
    <script type="text/javascript">
        function setAssetLinkImage(component, asset) {
            component.find('.asset-link-thumbnail').attr('src', asset.urls.thumbnail);
            component.attr('data-web-asset-id', asset.id);
        }
        function setAssetLinkLink(component, description, linkType, linkTarget) {
            component.find('.asset-link-url').text(description);
            component.attr('data-link-type', linkType);
            component.attr('data-link-target', linkTarget);
        }
        function setAssetLinkCaption(component, caption) {
            component.find('.asset-link-caption').text(caption);
            component.attr('data-link-caption', caption);
        }
        function setAssetLinkPrivate(component, isPrivate) {
            component.find('.asset-link-private').text(isPrivate ? '@lang('hilco::app.yes')' : '@lang('hilco::app.no')');
            component.attr('data-link-private', isPrivate);
        }

        registerComponent('assetLink', {
            inline: true,
            menuText: '@lang('hilco::app.asset_link_with_thumbnail')',
            bladeTemplate: 'hilco::components.assetLink',
            init: function (body) {
                $(body).on('click', '.asset-link-thumbnail', function() {
                    var button = this;
                    assets.finder({
                        successFunction: function(data) {
                            setAssetLinkImage($(button).closest('.component-container'), data);
                        }
                    });
                });
                $(body).on('click', '.asset-link-url', function() {
                    var button = this;
                    assets.link({
                        successFunction: function(data) {
                            setAssetLinkLink($(button).closest('.component-container'), data.description, data.link_type, data.target);
                        }
                    });
                });
                $(body).on('click', '.asset-link-caption', function() {
                    var container = $(this).closest('.component-container');
                    var caption = prompt('@lang('hilco::app.please_enter_a_caption')', container.data('link-caption'));
                    setAssetLinkCaption(container, caption);
                });
                $(body).on('click', '.asset-link-private', function() {
                    var container = $(this).closest('.component-container');
                    setAssetLinkPrivate(container, !container.data('link-private'));
                });
            },
            serialize: function (componentNode) {
                return {
                    webAssetId: $(componentNode).data('web-asset-id'),
                    link: {
                        type: $(componentNode).data('link-type'),
                        target: $(componentNode).data('link-target'),
                        isPrivate: $(componentNode).data('link-private'),
                    },
                    caption: $(componentNode).data('link-caption'),
                };
            },
            insert: function (component) {
                assets.finder({
                    successFunction: function(data) {
                        setAssetLinkImage(component, data);
                        setAssetLinkLink(component, data.asset_category + '/' + data.asset_key, 'webAsset', data.id);
                        setAssetLinkCaption(component, data.name);
                        setAssetLinkPrivate(component, data.is_private);
                    }
                });
            }
        });
    </script>
@endif

@if($view)
<div style="display: inline-block; width: 200px; min-height: 150px; padding: 15px; margin: 10px; vertical-align: top;">
    @if($link['isPrivate'] && is_null(auth()->user()))
        <a target="_blank" href="/login" class="thumbnail" style="border: 0; vertical-align: top;">
    @else
        <a target="_blank" href="{{ webLinkUrl(array_merge($link, ['dl' => false])) }}" class="thumbnail" style="border: 0; vertical-align: top;">
    @endif
            @include('partials.webpImage', [
                'webpUrl' =>  webAssetUrl(['id' => $webAssetId, 'size' => 'small']) . '?webp=1',
                'jpgUrl' => webAssetUrl(['id' => $webAssetId, 'size' => 'small']),
                'attributes' => [],
            ])
        <div class="text-center" style="margin-top: 5px; min-height: 3em; vertical-align: top;">{{ $caption }}</div>
    </a>
</div>
@endif