blue-twilight/resources/views/themes/base/partials/photo_comments.blade.php

<div class="row">
    <div class="col mt-4">
        <h2>@lang('gallery.photo_comments_heading')</h2>

        <h3>@lang('gallery.photo_comments_reply_form_heading')</h3>
        <p>@lang('gallery.photo_comments_reply_form_p1')</p>
        <hr/>
        @include(Theme::viewName('partials.photo_comments_reply_form'))

        @if ($photo->approvedComments()->count() > 0)
            <ul>
                @foreach ($photo->approvedComments as $comment)
                    @include(Theme::viewName('partials.photo_single_comment'))
                @endforeach
            </ul>
        @endif
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="comment-reply-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@lang('gallery.photo_comments_reply_modal_title')</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div v-if="is_reply_form_loading" class="text-center">
                    <p class="m-2"><img src="{{ asset('ripple.svg') }}" alt="@lang('global.please_wait')" title="@lang('global.please_wait')"></p>
                    <p>@lang('global.please_wait')</p>
                </div>

                <div id="comment-reply-form-content" v-bind:style="replyFormStyle">
                </div>
            </div>
        </div>
    </div>
</div>