<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="im_livechat.FeedbackPanel">
<div class="d-flex flex-column bg-view flex-grow-1 p-3">
    <div class="p-2">
        <div class="mb-5">
            <t t-if="state.step === STEP.RATING">
                <p class="text-center fs-6 mb-4">Did we correctly answer your question?</p>
                <div class="d-flex justify-content-center">
                    <img role="button" class="mx-3 opacity-50 opacity-100-hover" t-att-class="{ 'opacity-100': state.rating === RATING.GOOD }" t-att-src="url(`/rating/static/src/img/rating_${RATING.GOOD}.png`)" t-att-alt="RATING.GOOD" t-on-click="() => this.select(RATING.GOOD)"/>
                    <img role="button" class="mx-3 opacity-50 opacity-100-hover" t-att-class="{ 'opacity-100': state.rating === RATING.OK }" t-att-src="url(`/rating/static/src/img/rating_${RATING.OK}.png`)" t-att-alt="RATING.OK"  t-on-click="() => this.select(RATING.OK)"/>
                    <img role="button" class="mx-3 opacity-50 opacity-100-hover" t-att-class="{ 'opacity-100': state.rating === RATING.BAD }" t-att-src="url(`/rating/static/src/img/rating_${RATING.BAD}.png`)" t-att-alt="RATING.BAD" t-on-click="() => this.select(RATING.BAD)"/>
                </div>
            </t>
            <t t-else="">
                <p class="text-center fs-5 fw-bold mb-4">Thank you for your feedback</p>
            </t>
        </div>
        <div t-if="state.rating and state.step === STEP.RATING" class="d-flex flex-column mb-5">
            <textarea t-model="state.feedback" class="form-control my-2" placeholder="Explain your note"/>
            <button class="btn btn-primary align-self-end" t-on-click="onClickSendFeedback">Send</button>
        </div>
        <div class="mb-5">
            <TranscriptSender thread="props.thread"/>
        </div>
        <button class="btn btn-link text-muted text-decoration-underline fw-normal w-100" t-on-click="props.onClickClose">Close conversation</button>
    </div>
</div>
</t>
</templates>
