@if($article->image_path != null || $article->description != "")
<div {{ $attributes->merge(['class' => 'd-flex p-3 mx-1 my-2 bg-white rounded shadow-sm mt-2']) }} >

    <div class="flex-fill d-none d-xl-block pb-2">
        @if($article->image_path != null)
            <a href="{{ asset(Storage::disk("article-pictures")->url($article->image_path)) }}" target="_blank">
            <img class="me-3 mb-1 img-fluid d-none d-xl-block float-start" src="{{ asset(Storage::disk("article-pictures")->url($article->image_path)) }}" style="max-width:250px; max-height:250px;">
            </a>
        @endif
        {!! $article->description !!}

    </div>

    <div class="flex-fill d-block d-xl-none pb-2">
        @if($article->image_path != null)
        <div class="d-flex flex-fill justify-content-center my-3">
            <a href="{{ asset(Storage::disk("article-pictures")->url($article->image_path)) }}" target="_blank">
                <img class="img-fluid" src="{{ asset(Storage::disk("article-pictures")->url($article->image_path)) }}" style="max-width:250px; max-height:250px;">
            </a>
        </div>
        @endif
        <div class="w-100">
            {!! $article->description !!}
        </div>
    </div>
</div>
@endif

<a href="#" class="align-self-end d-none"  title="{{__("app.article.content.copy-qrcode-title")}}" onclick="copyRichTextToClipboard('<a title=\'{{ $article->name }}\' href=\'{{route($this->article->classTypeShortName() .'-view',['article' => $this->article->id])}}\'>' + document.querySelector('#qrcode').innerHTML +'</a>');"><div id="qrcode" wire:ignore  title="{{__("app.article.content.copy-qrcode-title")}}" ></div></a>

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "{{ route($this->article->classTypeShortName() .'-view', ['article' => $article->id ]) }}",
        width: 64,
        height: 64,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
</script>