<div class="col-lg-8 offset-2">
    <div class="card" id="news-{{$nach->id}}">
        <img class="card-img-top" src="{{asset('images/news-header.jpg')}}" alt="Card image cap">
        <div class="card-body">

            <div id="pay-preview"></div>






            <br>

            <h2 class="card-title">{{$nach->title}}</h2>
            <h6 class="card-subtitle mb-2"><b>{{date('d.m.Y | H:i', strtotime($nach->created_at))}}</b></h6>




            <p class="card-text">

                <!-- Here comes the payment preview, tha is the first 200 words of the news content  -->
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque commodi, cum cupiditate deserunt dignissimos eaque error ex impedit ipsa, modi natus nulla odit quis sunt ut voluptas voluptates, voluptatum!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque commodi, cum cupiditate deserunt dignissimos eaque error ex impedit ipsa, modi natus nulla odit quis sunt ut voluptas voluptates, voluptatum!
            </p>





        </div>

        <div class="card-body payment-request">

            <h2 class="text-center"><i class="far fa-gem fa-2x" style="font-size: 20px;"></i> Premium Content</h2>
            <p class="text-center">To read the article please pay 1000 sats <span class="small">(~0.09 $)</span></p>

            <br>
            <p class="text-center">
                <a href="#ln-invoice" data-toggle="collapse" class="btn btn-warning"><i class="fas fa-bolt"></i> Pay 1000 sats</a>
                <br>
                <a href="" class="howtopay" data-toggle="modal" data-target="#explain-lightning"><i class="fal fa-question-circle"></i> How to pay this?</a>

                @include('includes.explain-lightning')

                <br>
                <br>
            </p>

            <div class="row collapse" id="ln-invoice">
                <div class="col-lg-6 offset-3">
                    <a href="LIGHTNING:lnbc1500n1p02hzsypp568fexzpwav5hnmmn7hnj3jt8vppvacyl0ypaadur3gx7kvtdfgmsdpa2fjkzep6ypkxjmntypcxzunpypjkcgrxv96kxet5yqejuvpsxqs8xct5wvsxxcqzpgxqr23ssp5mfpwj5s68g9yn9qn9w6g6mu8gm7aa9dec0rhupdxnyef70y7hnss9qy9qsq6km3w35acswud3ugxhjk78eklgg6cq7r5wsn">
                        <img src="data:image/png;base64,[encoded data, 15428 characters]" class="img-fluid rounded mx-auto d-block">

                    </a>

                    <br>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1"> <a href=""><i class="fal fa-bolt"></i></a></span>
                        </div>
                        <input type="text" class="form-control" value="lnbc1500n1p02hzsypp568fexzpwav5hnmmn7hnj3jt8vppvacyl0ypaadur3gx7kvtdfgmsdpa2fjkzep6ypkxjmntypcxzunpypjkcgrxv96kxet5yqejuvpsxqs8xct5wvsxxcqzpgxqr23ssp5mfpwj5s68g9yn9qn9w6g6mu8gm7aa9dec0rhupdxnyef70y7hnss9qy9qsq6km3w35acswud3ugxhjk78eklgg6cq7r5wsn"  aria-describedby="basic-addon1">
                    </div>
                </div>
            </div>


            </p>

        </div>



        @if (env('APP_COMMENTS', false))
            <div class="card-footer" id="comment_button_{{$nach->id}}">

                @if(sizeof($nach->comments) > 0)

                    <a href="#" onclick="showComments(event, {{$nach->id}})"> <span class="badge badge-primary">{{sizeof($nach->comments)}}</span> Kommentare ansehen</a>
                @else
                    <i>Bisher noch keine Kommentare</i>
                @endif

                <button class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#exampleModal2" onclick="setCommentId({{$nach->id}}),ga('send', 'event', 'Read Comments', 'Website', '{{$nach->title}}');">
                    <i class="fas fa-comment"></i> Beitrag kommentieren
                </button>
            </div>
        @endif



        <div style="display:none" id="comments_{{$nach->id}}">
            <div class="card-footer bg-primary">
                <a  class="text-white"> <span class="badge badge-light">{{sizeof($nach->comments)}}</span> Kommentare</a>
                <button class="btn btn-dark btn-sm float-right" data-toggle="modal" data-target="#exampleModal2" onclick="setCommentId({{$nach->id}}),ga('send', 'event', 'Create Comment', 'Modal for Comment Creation', '{{$nach->title}}');">
                    <i class="fas fa-comment"></i> Beitrag kommentieren
                </button>
            </div>
            <table>
                @foreach($nach->comments as $comment)
                    <row>
                        <div class="card-footer">
                            <i class="fas fa-user" style="color: #007BFF"></i> {{$comment->name}}:
                            <!-- For now taking that out, time is wrong... -->
                            <span class="float-right" title="{{date('d.m.Y | H:i', strtotime($comment->created_at))}} Uhr">{{date('d.m.Y H:i', strtotime($comment->created_at))}} Uhr</span>

                        </div>
                        <div class="card-body comment-text">
                            <p class="card-text">
                                {{$comment->comment}}
                            </p>
                        </div>
                    </row>
                @endforeach
            </table>
        </div>

    </div>
</div>
