<svg xmlns="http://www.w3.org/2000/svg" encoding="utf-8" style="display: none;">
    <symbol id="icon-comment" viewBox="0 0 32 32">
        <title>comment</title>
        <path class="path1" d="M32 16q0 3.109-2.142 5.742t-5.822 4.16-8.037 1.527q-1.25 0-2.59-0.142-3.536 3.125-8.215 4.32-0.875 0.251-2.034 0.395-0.306 0.039-0.549-0.16t-0.311-0.517v-0.018q-0.053-0.069-0.009-0.215t0.037-0.178 0.078-0.169l0.107-0.16 0.128-0.151 0.142-0.16q0.126-0.142 0.553-0.617t0.617-0.679 0.553-0.709 0.581-0.907 0.48-1.051 0.466-1.36q-2.805-1.591-4.421-3.934t-1.614-5.013q0-2.32 1.266-4.434t3.41-3.653 5.106-2.441 6.217-0.905q4.354 0 8.034 1.531t5.822 4.16 2.144 5.737z"></path>
    </symbol>
</svg>

<section class="comments" id="comments">

    <div class="comments__display" id="comments__display">
        <h3 class="comments__heading">Komentari</h3>
        <h4 class="comments__count">Trenutno <span class="comments__count_number"> {{ count($comments) }}</span> komentar{{ count($comments) == 1 ? '' : 'a' }} na ovu lekciju</h4>

        <ul class="comments__list">
            @foreach ($comments as $comment)
                <li class="comments__single">

                    <img alt="{{ $comment->author->username }}" class="comments__avatar" src="{{ $comment->author->avatar }}" />
                    <input class="comments__reply_toggle common_landing__visually_hidden" id="comments__reply_toggle--{{ $comment->?id }}" type="checkbox" />
                    <div class="comments__single_heading">
                        <h5 class="comments__author">{{ $comment->author->username }}</h5>
                        <time class="comments__time" datetime="{{ $comment->date }}">{{ $comment->date }}</time>
                        <label class="comments__reply" for="comments__reply_toggle--{{ $comment->id }}"><svg class="icon icon-comment"><use xlink:href="#icon-comment"></use></svg>reply</label>
                    </div>

                    <p class="comments__text">
                        {{ $comment->text }}
                    </p>

                    <form action="/comment_post_reply" class="comments__reply_form" id="comments__reply_form" method="post">
                        <textarea class="comments__reply_text" name="text" required="required"></textarea>

                        <input class="comments__reply_submit" type="submit" value="Komentar" />
                    </form>

                    <ul class="comments__replies">
                        @foreach ($comment->replies as $reply)
                            <li class="comments__reply_single">

                                <img alt="{{ $reply->author->username }}" class="comments__avatar" src="{{ $reply->author->avatar }}" />
                                <div class="comments__single_heading">
                                    <h5 class="comments__author">{{ $comment->author->username'] }}</h5>
                                    <time class="comments__time" datetime="{{ $reply->date }}">{{ $reply->date }}</time>
                                </div>
                                <p class="comments__text">
                                    {{ $reply->text }}
                                </p>
                            </li>
                        @endforeach
                    </ul>
                </li>
            @endforeach
        </ul>
    </div>

    <form action="/comment_post_new" class="comments__create" id="comments__create" method="post">

        <h3 class="comments__heading">Ostavi komentar:</h3>

        <textarea class="comments__post_text" name="text" placeholder="Ostavi komentar" required="required"></textarea>

        <input class="comments__post" type="submit" value="Komentar" />
    </form>
</section>