Proyectos de Subversion LeadersLinked - Antes de SPA

use LeadersLinked\Model\ContentReaction;

$this->inlineScript()->appendFile($this->basePath('vendors/jquery-validation/localization/messages_es.js'));

$this->inlineScript()->captureStart();

echo <<<JS

jQuery( document ).ready(function( $ ) {

    $.fn.reloadAnswers = function() {

        var action = $('#row-view').data('link-answers');

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'get',

            'url'       : action,

        }).done(function(response) {

            if(response['success']) {

                $('#my-coach-question-answers-list').empty();

                if(response['data']['items'].length > 0) {

                    $( "#my-coach-question-answers-list" ).html(

                		$( "#answerTemplate" ).render( response['data']['items'] )

                	);

                } else {

                    var html = '<div class="company-title"><div class="widget widget-jobs"><div class="sd-title">ERROR_NO_RECORD_MATCHED_YOUR_QUERY</div></div></div>';

                    $( "#my-coach-question-answers-list" ).html(html);

                }     

                $('button.btn-my-coach-delete-answer').confirmation({

                    rootSelector: 'button.btn-my-coach-delete-answer',

                    title : 'LABEL_ARE_YOU_SURE',

                    singleton : true,

                    btnOkLabel: 'LABEL_YES',

                    btnCancelLabel: 'LABEL_NO',

                    onConfirm: function(value) {

                        var action = $(this).data('link');

                        NProgress.start();

                        $.ajax({

                            'dataType'  : 'json',

                            'accept'    : 'application/json',

                            'method'    : 'post',

                            'url'       :  action,

                        }).done(function(response) {

                            if(response['success']) {

                                $.fn.showSuccess(response['data']);

                                $.fn.reload();

                            } else {

                                $.fn.showError(response['data']);

                            }

                        }).fail(function( jqXHR, textStatus, errorThrown) {

                            $.fn.showError(textStatus);

                        }).always(function() {

                            NProgress.done();

                        });

                        return false;

                    },

                });

            } else {

                $.fn.showError(response['data']);

            } 

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

    });

    var validatorAnswer = $('#form-answer').validate({

        debug: true,

        onclick: false,

        onkeyup: false,

        ignore: [],

        rules: {

            'description': {

                updateCkeditor:function() {

                        CKEDITOR.instances.description_answer.updateElement();

                },

                required: true

            },

        },

        submitHandler: function(form)

        {

			NProgress.start();

            $.ajax({

                'dataType'  : 'json',

                'accept'    : 'application/json',

                'method'    : 'post',

                'url'       :  $('#form-answer').attr('action'),

                'data'      :  $('#form-answer').serialize(),

            }).done(function(response) {

				if(response['success']) {

                    $('#modal-answer').modal('hide');

                    var uuid = $('#row-view').data('question-uuid');

                    $('#answers-' + uuid).html(response['data']['answers']);

                    $('#my-coach-question-answer-count-answers').html(response['data']['answers']);

                    $('#my-coach-question-answers-list').prepend(

                        $('#answerTemplate').render(response['data']['item'])

                    );

                } else {

                    validatorAnswer.resetForm();

                    if(jQuery.type(response['data']) == 'string') {

                        $.fn.showError(response['data']);

                    } else  {

                        $.each(response['data'], function( fieldname, errors ) {

                            $.fn.showFormErrorValidator('#form-answer #' + fieldname, errors);

                        });

                    }

                }

            }).fail(function( jqXHR, textStatus, errorThrown) {

                $.fn.showError(textStatus);

            }).always(function() {

                NProgress.done();

            });

            return false;

        },

        invalidHandler: function(form, validator) {

        }

        $('#modal-question').modal('hide');

        $('#modal-answer').modal('hide');

    });

    $('#my-coach-question-answer-btn-delete').confirmation({

        rootSelector: 'button.my-coach-question-answer-btn-delete',

        title : 'LABEL_ARE_YOU_SURE',

        singleton : true,

        btnOkLabel: 'LABEL_YES',

        btnCancelLabel: 'LABEL_NO',

        onConfirm: function(value) {

            var action = $(this).data('link');

            var uuid = $(this).data('question-uuid');

            NProgress.start();

            $.ajax({

                'dataType'  : 'json',

                'accept'    : 'application/json',

                'method'    : 'post',

                'url'       :  action,

            }).done(function(response) {

                if(response['success']) {

                    $.fn.showSuccess(response['data']);

                    var uuid = $('#row-view').data('question-uuid');

                    var key = 'my-coach-record-card-question-' + uuid;

                    $('#' + key).remove();

                    $('#row-view').hide();

                    $('#my-coach-add-question').show();

                    $('#row-list').show();

                } else {

                    $.fn.showError(response['data']);

                }

            }).fail(function( jqXHR, textStatus, errorThrown) {

                $.fn.showError(textStatus);

            }).always(function() {

                NProgress.done();

            });

            return false;

        },

    });

    $('body').on('click', 'button.btn-my-coach-edit-view', function(e) {

        e.preventDefault();

        var action = $(this).data('link');

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'get',

            'url'       :  action,

        }).done(function(response) {

            if(response['success']) {

                $('#row-view').data('link-answers', response['data']['link_answers']);

                $('#row-view').data('question-uuid', response['data']['uuid']);

                $('#my-coach-question-answer-btn-answer').data('link', response['data']['link_answers_add']); 

                $('#my-coach-question-answer-btn-delete').data('link', response['data']['link_delete']); 

                $('#my-coach-question-user-image').attr('src', response['data']['user_image']);

                $('#my-coach-question-user-name').html(response['data']['user_name']);

                $('#my-coach-question-title').html(response['data']['title']);

                $('#my-coach-question-description').html(response['data']['description']);

                $('#my-coach-answer-categories').empty();

                $.each(response['data']['categories'], function(key, value) {

                    var li = $('<li>');

                    li.text(value.category).appendTo('#my-coach-answer-categories')

                });

                $('#my-coach-question-answer-question-date').html(response['data']['added_on']);

                $('#my-coach-question-answer-last-date').html(response['data']['last_answer_on']);

                $('#my-coach-question-answer-count-answers').html(response['data']['answers']);

                $('#my-coach-question-answer-count-reactions').html(response['data']['reactions']);

                $('#my-coach-question-answer-count-views').html(response['data']['views']);

                $('#my-coach-question-answer-count-comments').html(response['data']['comments']);

                $('#views-' + response['data']['uuid']).html( response['data']['views'] );

                $('#my-coach-add-question').hide();

                $('#row-list').hide();

                $('#row-view').show();

                $.fn.reloadAnswers();

            } else {

                $.fn.showError(response['data']);

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

    });

    $('#my-coach-question-answer-btn-back').click(function(e) {

        e.preventDefault();

        $('#my-coach-add-question').show();

        $('#row-view').hide();

        $('#row-list').show();

    });

    $('#my-coach-question-answer-btn-answer').click(function(e) {

        e.preventDefault();

        $('#form-answer').attr('action', $(this).data('link') );

        CKEDITOR.instances.description_answer.setData('');

        validatorAnswer

        $('#modal-answer').modal('show');

    });

    $('body').on('click', 'a.btn-comment-trash', function(e) {

        e.preventDefault();

        var action = $(this).data('link');

        var unique = $(this).data('comment-unique');

        var answer_uuid = $(this).data('answer-uuid');

        var question_uuid = $('#row-view').data('question-uuid');

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'post',

            'url'       :  action,

        }).done(function(response) {

            if(response['success']) {

                $('div.comment-' + unique).remove();

                //Listado de la respuesta

                $('#answer-total-comment-' + answer_uuid).html( response['data']['total_comments_answer'] );

                //Encabezado pregunta del view

                $('#my-coach-question-answer-count-comments').html( response['data']['total_comments_question'] );

                //Listado de preguntas

                $('#comments-' + question_uuid).html( response['data']['total_comments_question'] );

            } else {

                $.fn.showError(response['data']);

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

    });

    $('body').on('submit', 'form.feedCommentContainer', function(e) {

        e.preventDefault();

        var action          = $(this).attr('action');

        var answer_uuid     = $(this).data('answer');

        var question_uuid   = $('#row-view').data('question-uuid');

        var form_id         = $(this).attr('id');

        var comment = $('#' + form_id + ' #comment').val().trim();

        if(comment.length == 0) {

            return;

        }

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'post',

            'url'       : action,

            'data'      : $(this).serialize()

        }).done(function(response) {

		  if(response['success']) {

            $('#' + form_id + ' #comment').val('');

            $('#comment-list-' + answer_uuid).prepend(

                $( "#commentTemplate" ).render( response['data']['item'] )

            );

            //Listado de la respuesta

            $('#answer-total-comment-' + answer_uuid).html( response['data']['total_comments_answer'] );

            //Encabezado pregunta del view

            $('#my-coach-question-answer-count-comments').html( response['data']['total_comments_question'] );

            //Listado de preguntas

            $('#comments-' + question_uuid).html( response['data']['total_comments_question'] );

          } else {

            $.fn.showError(textStatus);

          }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

        return false;

    });

  $('body').on('click', 'button.btn-save-reaction', function(e) {

        e.preventDefault();

        var reaction = $(this).data('reaction');

        var action = $(this).data('link');

        var answer_uuid = $(this).data('answer');

        var question_uuid   = $('#row-view').data('question-uuid');

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'post',

            'url'       :  action,

            'data'      : {

                'reaction' : reaction

            }

        }).done(function(response) {

            if(response['success']) {

                $('#reactions-' + question_uuid).html(response['data']['total_reactions_question']) ; 

                $('#my-coach-question-answer-count-reactions').html(response['data']['total_reactions_question']) ; 

                $('#answer-total-reactions-' + answer_uuid).html(response['data']['total_reactions_answer']) ; 

                $('#' + 'current-reaction-' + answer_uuid).data('reaction', response['data']['reaction']);

                $('#' + 'current-reaction-' + answer_uuid).html(

                    $('#reactionTemplate').render({reaction: reaction})

                );

            } else {

                $.fn.showError(response['data']);

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

    });

    $('body').on('click', 'button.reaction-btn', function(e) {

        e.preventDefault();

        var reaction = $(this).data('reaction');

        if(!reaction) return 

        var action = $(this).data('link');

        var answer_uuid = $(this).data('answer');

        var question_uuid   = $('#row-view').data('question-uuid');

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'post',

            'url'       :  action,

        }).done(function(response) {

            if(response['success']) {

                $('#' + 'current-reaction-' + answer_uuid).data('reaction', response['data']['reaction']);

                $('#' + 'current-reaction-' + answer_uuid).html(

                    $('#reactionTemplate').render({reaction: ''})

                );

                $('#reactions-' + question_uuid).html(response['data']['total_reactions_question']) ; 

                $('#my-coach-question-answer-count-reactions').html(response['data']['total_reactions_question']) ; 

                $('#answer-total-reactions-' + answer_uuid).html(response['data']['total_reactions_answer']) ; 

            } else {

                $.fn.showError(response['data']);

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

    });

    let isMouseHover;

    $('body').on('mouseover', '#reaction-container', function(e) {

        isMouseHover = true;

        setTimeout(() => {

            $('.reactions').addClass('active');

        }, 500);

    });

    $('body').on('mouseout', '#reaction-container', function(e) {

        isMouseHover = false;

        setTimeout(() => {

            if(!isMouseHover) {

                $('.reactions').removeClass('active');

            }

        }, 500);

    });

    $('#paginator-process-comm').click(function(e) {

        e.preventDefault();

        var next_page = $(this).data('next-page');

        $.fn.reload(false, next_page);

    CKEDITOR.replace('description_answer',{

        toolbar: [

                    { name: 'editing', items: ['Scayt'] },

                    { name: 'links', items: ['Link', 'Unlink'] },

                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },

                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },

                    '/',

                    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },

                    { name: 'styles', items: ['Styles', 'Format'] },

                    { name: 'tools', items: ['Maximize'] }

                ],

                removePlugins: 'elementspath,Anchor',

                heigth: 100

    }); 

    </div>

    <div id="row-view" style="display: none">

    	<div class="row">

        	<div class="col-12 col-md-8 mx-auto">

            	<div class="my-coach-record-card" >

                	<div class="my-coach-record-card-container" >

                    	<div class="my-coach-record-card-resume" >

        					<div class="my_coach_question_detail_user_rectangle"> 

                        		<img id="my-coach-question-user-image" class="my_coach_question_detail_user_image" src="" />

                        		<p id="my-coach-question-user-name" class="my_coach_question_detail_user_name"></p>

                        	</div>

                    	</div>

                    	<div class="my-coach-record-card-content" >

                        	<h2 id="my-coach-question-title"></h2>

                        	<p id="my-coach-question-description"></p> 

                        	<div class="d-flex align-items-center justify-content-between">

                            	<ul id="my-coach-answer-categories" class="d-flex align-items-center  my-coach-record-card-categories">

                            	</ul> 

                        	</div>    

                         	<div class="d-flex align-items-center justify-content-between">    

                            	<div>LABEL_MY_COACH_QUESTION <br/>  <span  id="my-coach-question-answer-question-date"> </span></div>

                            	<div>LABEL_MY_COACH_LAST_ANSWER <br/> <span id="my-coach-question-answer-last-date"> </span></div>

                        	</div>

                         	<div class="d-flex align-items-center justify-content-between">

                            	<div><span id="my-coach-question-answer-count-answers"> </span> LABEL_MY_COACH_ANSWERS</div>

                            	<div><span id="my-coach-question-answer-count-reactions"></span> LABEL_MY_COACH_REACTIONS</div>

                            	<div><span id="my-coach-question-answer-count-views"> </span> LABEL_MY_COACH_VIEWS</div>

                            	<div><span id="my-coach-question-answer-count-comments"> </span> LABEL_COMMENTS</div>

                        	</div>

                          	<div class="d-flex align-items-center justify-content-between">

                          		<button id="my-coach-question-answer-btn-back"> <i class="fa fa-chevron-left" aria-hidden="true"></i> LABEL_BACK </button>

                            	<button id="my-coach-question-answer-btn-answer"> <i class="fa fa-pencil" aria-hidden="true"></i> LABEL_REPLY </button>

                            	<button id="my-coach-question-answer-btn-delete"> <i class="fa fa-trash" aria-hidden="true"></i> LABEL_DELETE </button>

                        	</div>

                    	</div>

                	</div>

				</div>

			</div>		

		</div>

        <div id="my-coach-question-answers-list">

        </div>

	</div>        

</div>

<div class="modal" id="modal-answer">

    <div class="modal-dialog  modal-xl">

        <div class="modal-content">

            <!-- Modal Header -->

            <div class="modal-header">

                <h4 class="modal-title">LABEL_MY_COACH_ANSWER_ADD</h4>

                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>

            <!-- Modal body -->

            <div class="modal-body">

                <?php

                $form = $this->formAnswer;

                $form->setAttributes([

                    'method'    => 'post',

                    'name'      => 'form-answer',

                    'id'        => 'form-answer',

                ]);

                $form->prepare();

                echo $this->form()->openTag($form);

                ?>

              	<div class="form-group">

                    <?php

                    $element = $form->get('description');

                    $element->setOptions(['label' => 'LABEL_TEXT']);

                    $element->setAttributes(['class' => 'form-control', 'id' => 'description_answer']);

                    echo $this->formLabel($element);

                    echo $this->formTextArea($element);

                    ?>

                </div>

                <div class="text-right">

                    <button type="submit" class="btn btn-primary">LABEL_SAVE</button>

                    <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>

                </div>

                <?php echo $this->form()->closeTag($form); ?>

            </div>

        </div>

    </div>

</div>

<script id="answerTemplate" type="text/x-jsrender">

<div class="row">

    <div class="col-12 col-md-8 mx-auto">

        <div class="my-coach-record-card-container" >

            <div class="my-coach-record-card-resume" >

                <div class="my_coach_question_detail_user_rectangle"> 

                    <img class="my_coach_question_detail_user_image" src="{{:user_image}}" />

                    <p class="my_coach_question_detail_user_name">{{:user_name}}</p>

                </div>

            </div>

            <div class="my-coach-record-card-content" >

                <p>{{>description}}</p> 

                <div class="d-flex align-items-center justify-content-between">

                   <div>LABEL_DATE  <span>{{:time_elapsed}} </span></div> 

                   <div>LABEL_COMMENTS <span id="answer-total-comment-{{:uuid}}">{{:total_comments}}<span></div>

                   <div>LABEL_REACTIONS <span id="answer-total-reactions-{{:uuid}}">{{:total_reactions}}<span></div>  

                </div>

            </div>

            <div class="my-coach-record-card-actions">

                <div class="position-relative" id="reaction-container">

                    <button class="btn reaction-btn" data-answer="{{:uuid}}" data-link="{{:link_reaction_delete}}" data-reaction="{{:reaction}}" id="current-reaction-{{:uuid}}">

                        {{if reaction === '<?php echo ContentReaction::REACTION_FUN ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="EmojiEmotionsIcon" style="color: rgb(255, 127, 80);">

                            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8zM12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4zm3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path>

                        </svg>

                        LABEL_REACTION_FUN

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_INTEREST ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="TungstenIcon" style="color: rgb(245, 187, 92);transform: rotate(180deg);">

                            <path d="M11 19h2v3h-2zm-9-8h3v2H2zm17 0h3v2h-3zm-3.106 6.8014 1.4072-1.4071 2.1213 2.1213-1.4071 1.4071zm-11.3099.7071 2.1214-2.1213 1.4071 1.4072-2.1213 2.1213zM15 8.02V3H9v5.02c-1.21.92-2 2.35-2 3.98 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.06-2-3.98zM11 5h2v2.1c-.32-.06-.66-.1-1-.1s-.68.04-1 .1V5z"></path>

                        </svg>

                        LABEL_REACTION_INTEREST

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_LOVE ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="FavoriteTwoToneIcon" style="color: rgb(223, 112, 77);">

                            <path d="M16.5 5c-1.54 0-3.04.99-3.56 2.36h-1.87C10.54 5.99 9.04 5 7.5 5 5.5 5 4 6.5 4 8.5c0 2.89 3.14 5.74 7.9 10.05l.1.1.1-.1C16.86 14.24 20 11.39 20 8.5c0-2-1.5-3.5-3.5-3.5z" opacity=".3"></path>

                            <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>

                        </svg>

                        LABEL_REACTION_LOVE

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_RECOMMENDED ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RecommendIcon" style="color: rgb(116, 5, 249);">

                            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6 9.8a.9.9 0 0 1-.1.5l-2.1 4.9a1.34 1.34 0 0 1-1.3.8H9a2 2 0 0 1-2-2v-5a1.28 1.28 0 0 1 .4-1L12 5l.69.69a1.08 1.08 0 0 1 .3.7v.2L12.41 10H17a1 1 0 0 1 1 1z"></path>

                        </svg>

                        LABEL_REACTION_RECOMMENDED

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_SUPPORT ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="VolunteerActivismIcon" style="color: rgb(100, 149, 237);">

                            <path d="M1 11h4v11H1zm15-7.75C16.65 2.49 17.66 2 18.7 2 20.55 2 22 3.45 22 5.3c0 2.27-2.91 4.9-6 7.7-3.09-2.81-6-5.44-6-7.7C10 3.45 11.45 2 13.3 2c1.04 0 2.05.49 2.7 1.25zM20 17h-7l-2.09-.73.33-.94L13 16h2.82c.65 0 1.18-.53 1.18-1.18 0-.49-.31-.93-.77-1.11L8.97 11H7v9.02L14 22l8.01-3c-.01-1.1-.9-2-2.01-2z"></path>

                        </svg>

                        LABEL_REACTION_SUPPORT

                        {{/if}}

                        {{if reaction === ''}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RecommendIcon" style="color: gray;">

                            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6 9.8a.9.9 0 0 1-.1.5l-2.1 4.9a1.34 1.34 0 0 1-1.3.8H9a2 2 0 0 1-2-2v-5a1.28 1.28 0 0 1 .4-1L12 5l.69.69a1.08 1.08 0 0 1 .3.7v.2L12.41 10H17a1 1 0 0 1 1 1z"></path>

                        </svg>

                        LABEL_REACTION_UNSET

                        {{/if}}

                    </button>

                    <div class="reactions">

                        <button class="btn-save-reaction" data-link="{{:link_save_reaction}}" data-reaction="<?php echo ContentReaction::REACTION_RECOMMENDED ?>" title="LABEL_REACTION_RECOMMENDED" data-answer="{{:uuid}}">

                            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RecommendIcon" style="color: rgb(116, 5, 249);">

                                <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6 9.8a.9.9 0 0 1-.1.5l-2.1 4.9a1.34 1.34 0 0 1-1.3.8H9a2 2 0 0 1-2-2v-5a1.28 1.28 0 0 1 .4-1L12 5l.69.69a1.08 1.08 0 0 1 .3.7v.2L12.41 10H17a1 1 0 0 1 1 1z"></path>

                            </svg>

                        </button>

                        <button class="btn-save-reaction" data-link="{{:link_save_reaction}}" data-reaction="<?php echo ContentReaction::REACTION_SUPPORT ?>" title="LABEL_REACTION_SUPPORT" data-answer="{{:uuid}}">

                            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="VolunteerActivismIcon" style="color: rgb(100, 149, 237);">

                                <path d="M1 11h4v11H1zm15-7.75C16.65 2.49 17.66 2 18.7 2 20.55 2 22 3.45 22 5.3c0 2.27-2.91 4.9-6 7.7-3.09-2.81-6-5.44-6-7.7C10 3.45 11.45 2 13.3 2c1.04 0 2.05.49 2.7 1.25zM20 17h-7l-2.09-.73.33-.94L13 16h2.82c.65 0 1.18-.53 1.18-1.18 0-.49-.31-.93-.77-1.11L8.97 11H7v9.02L14 22l8.01-3c-.01-1.1-.9-2-2.01-2z"></path>

                            </svg>

                        </button>

                        <button class="btn-save-reaction" data-link="{{:link_save_reaction}}" data-reaction="<?php echo ContentReaction::REACTION_LOVE ?>" title="LABEL_REACTION_LOVE" data-answer="{{:uuid}}">

                            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="FavoriteTwoToneIcon" style="color: rgb(223, 112, 77);">

                                <path d="M16.5 5c-1.54 0-3.04.99-3.56 2.36h-1.87C10.54 5.99 9.04 5 7.5 5 5.5 5 4 6.5 4 8.5c0 2.89 3.14 5.74 7.9 10.05l.1.1.1-.1C16.86 14.24 20 11.39 20 8.5c0-2-1.5-3.5-3.5-3.5z" opacity=".3"></path>

                                <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>

                            </svg>

                        </button>

                        <button class="btn-save-reaction" data-link="{{:link_save_reaction}}" data-reaction="<?php echo ContentReaction::REACTION_INTEREST ?>" title="LABEL_REACTION_INTEREST" data-answer="{{:uuid}}">

                            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="TungstenIcon" style="color: rgb(245, 187, 92);transform: rotate(180deg);">

                                <path d="M11 19h2v3h-2zm-9-8h3v2H2zm17 0h3v2h-3zm-3.106 6.8014 1.4072-1.4071 2.1213 2.1213-1.4071 1.4071zm-11.3099.7071 2.1214-2.1213 1.4071 1.4072-2.1213 2.1213zM15 8.02V3H9v5.02c-1.21.92-2 2.35-2 3.98 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.06-2-3.98zM11 5h2v2.1c-.32-.06-.66-.1-1-.1s-.68.04-1 .1V5z"></path>

                            </svg>

                        </button>

                        <button class="btn-save-reaction" data-link="{{:link_save_reaction}}" data-reaction="<?php echo ContentReaction::REACTION_FUN ?>" title="LABEL_REACTION_FUN" data-answer="{{:uuid}}">

                            <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="EmojiEmotionsIcon" style="color: rgb(255, 127, 80);">

                                <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8zM12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4zm3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path>

                             </svg>

                        </button>

                    </div>

                </div>

            </div>

            <div class="comments-container show px-3">

                <form class="feedCommentContainer"  id="form-comment-{{:uuid}}" class="form-comment-{{:uuid}}" action="{{:link_add_comment}}" data-answer="{{:uuid}}">

                    <input class="commentInput" type="text" name="comment" id="comment" maxlength="256" placeholder="LABEL_WRITE_A_COMMENT">

                    <button class="btn btn-primary" type="submit">LABEL_SEND</button>

                </form>

                <ul id="comment-list-{{:uuid}}" class="comment-list">

                    {{for comments}}

                    <li>

                        <div class="comment-container">

	                       <div class="comment-content comment-{{:unique}}" >

	                           <div class="info">

                                    <a href="{{>user_url}}">

                                        <h3>{{>user_name}}</h3>

                                    </a>

                                    <span>

                                        {{>time_elapsed}}

                                        {{if link_delete}}

                                        <a href="#" class="btn-comment-trash" data-link="{{:link_delete}}" data-comment-unique="{{>unique}}" data-answer-uuid="{{>answer_uuid}}">

                                        <i class="fa fa-trash"></i>

                                        </a> 

                                        {{/if}}

                                    </span>

                                </div>            

		                        <p>{{>comment}}</p>

		                  </div>

	                   </div>

                    </li>

                    {{/for}}

                </ul>

            </div>

        </div>

    </div>

</div>    

</script>

<script id="reactionTemplate" type="text/x-jsrender">

                        {{if reaction === '<?php echo ContentReaction::REACTION_FUN ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="EmojiEmotionsIcon" style="color: rgb(255, 127, 80);">

                            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8zM12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4zm3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path>

                        </svg>

                        LABEL_REACTION_FUN

                        {{if reaction === '<?php echo ContentReaction::REACTION_INTEREST ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="TungstenIcon" style="color: rgb(245, 187, 92);transform: rotate(180deg);">

                            <path d="M11 19h2v3h-2zm-9-8h3v2H2zm17 0h3v2h-3zm-3.106 6.8014 1.4072-1.4071 2.1213 2.1213-1.4071 1.4071zm-11.3099.7071 2.1214-2.1213 1.4071 1.4072-2.1213 2.1213zM15 8.02V3H9v5.02c-1.21.92-2 2.35-2 3.98 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.06-2-3.98zM11 5h2v2.1c-.32-.06-.66-.1-1-.1s-.68.04-1 .1V5z"></path>

                        </svg>

                        LABEL_REACTION_INTEREST

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_LOVE ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="FavoriteTwoToneIcon" style="color: rgb(223, 112, 77);">

                            <path d="M16.5 5c-1.54 0-3.04.99-3.56 2.36h-1.87C10.54 5.99 9.04 5 7.5 5 5.5 5 4 6.5 4 8.5c0 2.89 3.14 5.74 7.9 10.05l.1.1.1-.1C16.86 14.24 20 11.39 20 8.5c0-2-1.5-3.5-3.5-3.5z" opacity=".3"></path>

                            <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>

                        </svg>

                        LABEL_REACTION_LOVE

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_RECOMMENDED ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RecommendIcon" style="color: rgb(116, 5, 249);">

                            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6 9.8a.9.9 0 0 1-.1.5l-2.1 4.9a1.34 1.34 0 0 1-1.3.8H9a2 2 0 0 1-2-2v-5a1.28 1.28 0 0 1 .4-1L12 5l.69.69a1.08 1.08 0 0 1 .3.7v.2L12.41 10H17a1 1 0 0 1 1 1z"></path>

                        </svg>

                        LABEL_REACTION_RECOMMENDED

                        {{/if}}

                        {{if reaction === '<?php echo ContentReaction::REACTION_SUPPORT ?>'}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="VolunteerActivismIcon" style="color: rgb(100, 149, 237);">

                            <path d="M1 11h4v11H1zm15-7.75C16.65 2.49 17.66 2 18.7 2 20.55 2 22 3.45 22 5.3c0 2.27-2.91 4.9-6 7.7-3.09-2.81-6-5.44-6-7.7C10 3.45 11.45 2 13.3 2c1.04 0 2.05.49 2.7 1.25zM20 17h-7l-2.09-.73.33-.94L13 16h2.82c.65 0 1.18-.53 1.18-1.18 0-.49-.31-.93-.77-1.11L8.97 11H7v9.02L14 22l8.01-3c-.01-1.1-.9-2-2.01-2z"></path>

                        </svg>

                        LABEL_REACTION_SUPPORT

                        {{/if}}

                        {{if reaction === ''}}

                        <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RecommendIcon" style="color: gray;">

                            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6 9.8a.9.9 0 0 1-.1.5l-2.1 4.9a1.34 1.34 0 0 1-1.3.8H9a2 2 0 0 1-2-2v-5a1.28 1.28 0 0 1 .4-1L12 5l.69.69a1.08 1.08 0 0 1 .3.7v.2L12.41 10H17a1 1 0 0 1 1 1z"></path>

                        </svg>

                        LABEL_REACTION_UNSET

                        {{/if}}

</script>

<script id="commentTemplate" type="text/x-jsrender">

    <li>

        <div class="comment-container">

	        <div class="comment-content comment-{{:unique}}" >

	            <div class="info">

                    <a href="{{>user_url}}">

                        <h3>{{>user_name}}</h3>

                    </a>

                    <span>

                        {{>time_elapsed}}

                        {{if link_delete}}

                        <a href="#" class="btn-comment-trash" data-link="{{:link_delete}}" data-comment-unique="{{>unique}}"  data-answer-uuid="{{>answer_uuid}}">

                            <i class="fa fa-trash"></i>

                        </a> 

                        {{/if}}

                    </span>

                </div>            

		      <p>{{>comment}}</p>

<script id="recordTemplate" type="text/x-jsrender">

    <div class="my-coach-record-card" id="my-coach-record-card-question-{{:uuid}}">

                    <p class="my_coach_question_detail_user_name">{{:user_name}}</p>

        <div class="d-flex align-items-center justify-content-between">

            <button data-link="{{:link_view}}" class="btn-my-coach-edit-view"> <i class="fa fa-external-link" aria-hidden="true"></i> LABEL_VIEW </button>