<div v-if="<?=$category?>PopupMode === 'edit' && <?=$category?>PopupItem.data.comments && <?=$category?>PopupItem.data.comments.length" class="px-3 pt-3 pb-0 bg-light">
    <div class="row mb-3">
        <div class="col-12">
            <label class="text-secondary mb-0 font-weight-normal font-size-16">Comments (<span v-html="<?=$category?>PopupItem.data.comments.length"></span>)</label>
        </div>
    </div>
    <div v-for="(message) in <?=$category?>PopupItem.data.comments" class="d-flex align-items-start pb-3">
        <div class="pro-initials text-uppercase mr-2"
             :title="allProsFlat['pro_' + message.pro_id].displayedName"
             :style="'background-color: ' + allProsFlat['pro_' + message.pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + message.pro_id].colors.fc + ';'"
             v-html="allProsFlat['pro_' + message.pro_id].displayedInitials">
        </div>
        <div class="flex-grow-1">
            <div class="">
                @{{ allProsFlat['pro_' + message.pro_id].displayedName }}
                <span class="text-secondary ml-3">@{{ message.created_at }}</span>
            </div>
            <div>@{{ message.message }}</div>
        </div>
    </div>
</div>
<div v-if="<?=$category?>PopupMode === 'edit'" class="comment-input-outer p-3 bg-light d-flex align-items-start border-top">
    <div class="pro-initials text-uppercase mr-2"
         :title="allProsFlat['pro_' + own_pro_id].displayedName"
         :style="'background-color: ' + allProsFlat['pro_' + own_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + own_pro_id].colors.fc + ';'"
         v-html="allProsFlat['pro_' + own_pro_id].displayedInitials">
    </div>
    <div class="flex-grow-1 position-relative">
        <textarea class="form-control form-control-sm txt-comment shadow-none" v-model="comment"></textarea>
        <a href="#" v-on:click.prevent="<?=$category?>SaveComment()" class="btn btn-sm btn-primary text-white btn-save-comment">Comment</a>
    </div>
</div>
