<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

        <!--
            Integrate Livechat in Common Frontend for Website
            Template registering all the assets required to execute the Livechat from a page containing Odoo
        -->
        <template id="assets_frontend" name="im_livechat assets frontend" inherit_id="website.assets_frontend">
            <xpath expr="." position="inside">
                    <!-- thread window -->
                    <script type="text/javascript" src="/mail/static/src/js/thread_windows/abstract_thread_window.js"></script>
                    <script type="text/javascript" src="/im_livechat/static/src/js/website_livechat_window.js"></script>

                <script type="text/javascript" src="/bus/static/src/js/longpolling_bus.js"></script>
                <script type="text/javascript" src="/bus/static/src/js/crosstab_bus.js"></script>
                <script type="text/javascript" src="/bus/static/src/js/services/bus_service.js"></script>

                <script type="text/javascript" src="/mail/static/src/js/document_viewer.js"></script>
                <script type="text/javascript" src="/mail/static/src/js/thread_widget.js"></script>
                <script type="text/javascript" src="/mail/static/src/js/utils.js"></script>
                <script type="text/javascript" src="/im_livechat/static/src/js/im_livechat.js"></script>
                <!-- Models -->
                    <!-- threads -->
                    <script type="text/javascript" src="/mail/static/src/js/models/threads/abstract_thread.js"></script>
                    <script type="text/javascript" src="/im_livechat/static/src/js/models/website_livechat.js"></script>
                        <!-- thread typing mixin -->
                        <script type="text/javascript" src="/mail/static/src/js/models/threads/thread_typing_mixin/thread_typing_mixin.js"></script>
                        <script type="text/javascript" src="/mail/static/src/js/models/threads/thread_typing_mixin/timer.js"></script>
                        <script type="text/javascript" src="/mail/static/src/js/models/threads/thread_typing_mixin/timers.js"></script>
                        <script type="text/javascript" src="/mail/static/src/js/models/threads/thread_typing_mixin/cc_throttle_function.js"></script>
                    <!-- messages -->
                    <script type="text/javascript" src="/mail/static/src/js/models/messages/abstract_message.js"></script>
                    <script type="text/javascript" src="/im_livechat/static/src/js/models/website_livechat_message.js"></script>
                <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/abstract_thread_window.scss"></link>
                <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/thread.scss"></link>
                <link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat.scss"/>
            </xpath>
        </template>

        <template id="assets_editor_inherit_website_livechat" inherit_id="website.assets_editor" name="website_livechat Assets Editor">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/website_livechat/static/src/js/website_livechat.editor.js"></script>
            </xpath>
        </template>

        <template id="loader" inherit_id="website.layout" name="Livechat : include loader on Website">
            <xpath expr="//div[@id='wrapwrap']" position="after">
                <t t-if="website and website.channel_id">
                    <script>
                        <t t-call="im_livechat.loader">
                            <t t-set="channel" t-value="website.channel_id.id"/>
                        </t>
                    </script>
                </t>
            </xpath>
        </template>

        <!-- Page Layout -->
        <template id="channel_page" name="Livechat Channel Satisfaction Page">
            <t t-call="website.layout">
              <div id="wrap">
                <div class="container">
                    <!-- published button -->
                    <t t-call="website.publish_management">
                        <t t-set="object" t-value="channel"/>
                        <t t-set="publish_edit" t-value="True"/>
                    </t>

                    <h1><span>Livechat Channel</span>  <small t-field="channel.name" /></h1>
                    <div t-field="channel.website_description" class="oe_structure mt16" />
                    <div class="row mt32">
                        <div class="col-lg-8">
                            <t t-if="len(ratings) &gt; 0">
                                <div class="row">
                                    <div class="col-lg-12 mb32">
                                        <h3>Statistics</h3>
                                        <div class="row">
                                            <div class="col-lg-5">
                                                <div class="card bg-success text-white" t-attf-style="height: #{150 + int(percentage['great'])}px;">
                                                    <div class="card-body text-center">
                                                        <img src="/rating/static/src/img/rating_10_white.png" style="height:40px" alt="Happy face"/>
                                                    </div>
                                                    <div class="card-body text-center">
                                                        <h2 style="margin: 0">
                                                            <b style="font-size: 30px">
                                                                <t t-esc="percentage['great']" />
                                                            </b>
                                                            <small>%</small>
                                                        </h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="card bg-warning text-white" t-attf-style="height: #{150 + int(percentage['okay'])}px;">
                                                    <div class="card-body text-center">
                                                        <img src="/rating/static/src/img/rating_5_white.png" style="height:40px" alt="Neutral face"/>
                                                    </div>
                                                    <div class="card-body text-center">
                                                        <h2 style="margin: 0">
                                                            <b style="font-size: 30px">
                                                                <t t-esc="percentage['okay']" />
                                                            </b>
                                                            <small>%</small>
                                                        </h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="card bg-danger text-white" t-attf-style="height: #{150 + int(percentage['bad'])}px;">
                                                    <div class="card-body text-center">
                                                        <img src="/rating/static/src/img/rating_1_white.png" style="height:40px" alt="Sad face"/>
                                                    </div>
                                                    <div class="card-body text-center">
                                                        <h2 style="margin: 0">
                                                            <b style="font-size: 30px">
                                                                <t t-esc="percentage['bad']" />
                                                            </b>
                                                            <small>%</small>
                                                        </h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12 mb32">
                                        <h3>The <t t-esc="len(ratings)"/> last feedbacks</h3>
                                        <div style="text-align:center">
                                            <t t-foreach="ratings" t-as="rating">
                                                <img t-attf-src='/rating/static/src/img/rating_#{int(rating.rating)}.png' t-att-alt="rating.res_name" width="48px" height="48px"/>
                                                <t t-if="(rating_index+1) % 10 == 0">
                                                    <br/>
                                                </t>
                                            </t>
                                        </div>
                                    </div>
                                </div>
                            </t>
                            <t t-if="len(ratings) == 0">
                                <h4 style="text-align:center">There is no rating for this channel for now.</h4>
                            </t>
                        </div>
                        <div class="col-lg-4 mb32">
                            <h3>The Team</h3>
                            <t t-foreach="team" t-as="user">
                                <div class="media mt-3">
                                    <t t-if="user.image_small">
                                        <img t-att-src="user.image_small and image_data_uri(user.image_small) or '/web/static/src/img/placeholder.png'"
                                            class="rounded" style="padding-right: 8px;" t-att-alt="user.name"/>
                                    </t>
                                    <div class="media-body">
                                        <h5><t t-esc="user.name"/></h5>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </div>
                </div>
              </div>
            </t>
        </template>


        <template id="channel_list_page" name="Livechat Channel List Page">
            <t t-call="website.layout">
                <div id="wrap">
                    <div class="oe_structure" id="oe_structure_website_livechat_channel_list_1"/>
                    <div class="container">
                        <h1>Livechat Support Channels</h1>
                        <div class="row mt32 mb32">
                            <t t-if="not len(channels)">
                                <div class="col-lg-6 offset-lg-3">
                                    There is no public livechat channel to show.
                                </div>
                            </t>
                            <t t-if="len(channels)">
                                <div class="col-lg-6 offset-lg-3">
                                    <t t-foreach="channels" t-as="channel">
                                        <div t-attf-class="media#{' mt-3' if channel_index else ''}">
                                            <a t-attf-href="/livechat/channel/#{ slug(channel)}">
                                                <img t-att-src="channel.image_small and image_data_uri(channel.image_small) or '/web/static/src/img/placeholder.png'" t-att-alt="channel.name" />
                                            </a>
                                            <div class="media-body">
                                                <h4><t t-esc="channel.name"/></h4>
                                            </div>
                                        </div>
                                    </t>
                                </div>
                            </t>
                        </div>
                    </div>
                    <div class="oe_structure" id="oe_structure_website_livechat_channel_list_2"/>
                </div>
            </t>
        </template>

        <!-- User Navbar -->
        <template id="user_navbar_inherit_website_livecaht" inherit_id="website.user_navbar">
            <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_livechat']" position="attributes">
                <attribute name="name"/>
                <attribute name="t-att-data-module-id"/>
                <attribute name="t-att-data-module-shortdesc"/>
                <attribute name="groups">im_livechat.im_livechat_group_manager</attribute>
            </xpath>
        </template>

    </data>
</odoo>
