{{-- image column type --}}
@php
  $value = data_get($entry, $column['name']);

  if (is_array($value)) {
    $value = json_encode($value);
  }
@endphp

<span>
  @if( empty($value) )
    -
  @else

        <script>

    // ADD COLOURBOX CSS
    if(!document.querySelector(".colorbox_css")){
        // console.log("LOAD COLOURBOX CSS");
        var divfc = document.createElement('div');
        if (divfc.classList){ divfc.classList.add('colorbox_css'); }
        var divf = document.createElement('link');
        divf.setAttribute("rel", "stylesheet");
        divf.setAttribute("media", "screen");
        divf.setAttribute("href", "{{ asset('vendor/backpack/colorbox/example1/colorbox.css') }}");
        divfc.appendChild(divf);
        document.body.appendChild(divfc);
    }

    // ADD COLOURBOX JS
    if(typeof(loadJsAsync)=="undefined"){
        var loadJsAsync = function(u, c) {
            if(typeof(window['js_ajaxload'])=="undefined"){
                window['js_ajaxload'] = new Array();
            }
            if(window['js_ajaxload'].indexOf(u)>=0){
                return;
            }
            // console.log("JS ASINC:"+u);
            window['js_ajaxload'].push(u);
            var d = document;
            var t = 'script';
            var o = d.createElement(t);
            var s = d.getElementsByTagName(t)[0];
            o.src = u; // '//' + u;
            if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
            s.parentNode.insertBefore(o, s);
        };
    }

    if(typeof($)=="undefined" || typeof($.colorbox)=="undefined"){
        loadJsAsync("{{ asset('vendor/backpack/colorbox/jquery.colorbox-min.js') }}", null);
    }

    if(typeof($)=="undefined" || typeof(openColorbox)=="undefined"){
        var openColorbox = function(elem){
            if(typeof($.colorbox)=="undefined"){
                var image = new Image();
                image.src = "" + elem.src;
                var w = window.open("");
                w.document.write(image.outerHTML);
            } else {
                $.colorbox({
                    href:elem.src,
                    'photo':true,
                    'maxWidth':'100%',
                    'maxHeight':'100%'
                });
            }
            return(false);
        }
    }
</script>
        @if(strpos($value, ":image/")>0)
            <img
                src="{{ (strpos($value, ":image/")>0)? $value : null   }}"
                style="
                    cursor:pointer;
                    max-height: {{ isset($column['height']) ? $column['height'] : "25px" }};
                    max-width: {{ isset($column['width']) ? $column['width'] : "30px" }};
                    border-radius: 3px;" onclick = 'return(openColorbox(this));'
            />
        @else
            <a class="btn btn-xs btn-default" download href="{{ $value }}">
                <i class="fa fa-download" title="Download"></i> Download
            </a>
        @endif


    @endif
</span>