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

    <!-- **********************************************************************************************-->
    <t t-extend="mail.ChatWindow">
        <t t-jquery="div.o_chat_window.o_in_appswitcher">$(this).addClass("cloudoffix_livechat_frontend");</t>
        <t t-jquery=".o_chat_composer" t-operation="append">
            <div class="btn-group o_composer_buttons">
                <div role="button" title="Emoji" class="o_composer_button o_composer_button_emoji"><span><svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" opacity=".45" fill="#263238"><path  d="M9.153 11.603c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551 6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051 1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804 1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02 18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273 0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001 5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z"/></svg>
                </span></div>
                <div role="button" title="Attach" class="o_composer_button co_livechat_add_attachment"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#263238"
                         fill-opacity=".5"><path  d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171 3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205 7.207a5.577 5.577 0 0 0-1.645 3.971z"/></svg>
                </span>
                </div>
                <div role="button" title="Send" class="o_composer_button o_composer_button_send">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#263238"
                         fill-opacity=".45"><path  d="M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z"/></svg>
                </div>
            </div>
        </t>

        <t t-jquery=".o_chat_composer" t-operation="before">
            <div class="div_attachments">
                <div class="co_livechat_attachments_list"/>
            </div>
        </t>
        <t t-jquery=".o_chat_header" t-operation="replace">
            <div class="o_chat_header">
                <t t-call="cloudoffix_livechat_frontend.ChatWindowHeaderContent">
                    <t t-set="status" t-value="widget.status"/>
                    <t t-set="title" t-value="widget.title"/>
                    <t t-set="folded" t-value="widget.folded"/>
                    <t t-set="unread_counter" t-value="widget.unread_msgs"/>
                </t>
            </div>
        </t>

	</t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.status-message">
        <t t-if="status">
            <small>
                <p t-if="status == 'online'">
                    <i class="o_mail_user_status o_user_online fa fa-circle" title="Online"/>
                    <span class='user_status ml4'>Online</span>
                </p>
                <p t-if="status == 'away'">
                    <i class="o_mail_user_status o_user_idle fa fa-circle" title="Away"/>
                    <span class='user_status ml4'>Away</span>
                </p>
                <p t-if="status == 'offline'">
                    <i class="o_mail_user_status o_user_offline fa fa-circle" title="Offline"/>
                    <span class='user_status ml4'>Offline</span>
                </p>
            </small>
        </t>
    </t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.chat_window_extended">
        <span class="hide">
            <t t-set="fileupload_id" t-value="fileupload_id"/>
<!--            <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment/public</t>-->
            <t t-set="fileupload_action" t-translation="off"><t t-esc="fileupload_action_value"/></t>
            <div t-attf-class="o_hidden_input_file #{fileupload_class or ''}" t-att-style="fileupload_style">
                <form class="o_form_binary_form" t-att-target="fileupload_id" method="post"
                      enctype="multipart/form-data" t-att-action="fileupload_action || '/web/binary/upload'">
<!--                    <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>-->
                    <input type="hidden" name="callback" t-att-value="fileupload_id"/>
                    <input type="hidden" name="model" value="mail.compose.message"/>
                    <input type="hidden" name="id" value="0"/>
                    <input type="hidden" name="session_id" t-att-value="session_id"/>
                    <input class="co_form_input_file" name="ufile" type="file"/>
                </form>
                <iframe t-att-id="fileupload_id" t-att-name="fileupload_id" style="display: none"/>
            </div>
        </span>
        <span class="o_composer_emoji"/>
    </t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.ChatWindowHeaderContent">
        <t t-set="class_fold_hidden" t-value="''"/>
        <t t-if="folded">
            <t t-set="class_fold_hidden" t-value="'hidden'"/>
        </t>

        <t t-set="class_fold_show" t-value="'hidden'"/>
        <t t-if="folded">
            <t t-set="class_fold_show" t-value="''"/>
        </t>

        <div t-attf-class="livechat_img_container #{class_fold_hidden}" t-if="operator_img">
        	<img class="avatar avatar-xl" t-att-src="operator_img"/>
        </div>
        <div t-attf-class="livechat_img_container #{class_fold_hidden}" t-if="!operator_img">
            <img class="avatar avatar-xl" t-att-src="operator_img"/>
        </div>


        <span t-attf-class="o_chat_title #{class_fold_hidden}">
            <t t-esc="title"/>
            <span t-if="unread_counter" class="badge badge-primary rounded font-weight-bold">
                <t t-esc="unread_counter"/>
            </span>
            <t t-call="cloudoffix_livechat_frontend.status-message"/>
        </span>


        <div t-attf-class="display-flex chat-folded-header #{class_fold_show}">
            <div class="cloudoffix_livechat_frontend_button hidden-print btn"
                 t-attf-style="background-color: #{bg_color_btn} ; border-color: #{bg_color_btn}; color: #{text_color_btn};">
                 <span t-if="unread_counter"
                       t-attf-class="badge  rounded font-weight-bold folded-notification #{class_fold_show}">
                        <t t-esc="unread_counter"/>
                </span>
                <img t-attf-src="#{img_src}" style=" height: 30px; "/>
                <div class="cloudoffix-button-text"><t t-esc="button_text"/></div>
            </div>
        </div>
        <div t-attf-class="chat-header-right-open display-flex #{class_fold_hidden}">
            <button t-if="is_transcript" class="header-icon mr-4 co_email_transcript" type="button" aria-label=""
                    style="color: rgb(255, 255, 255);">
                <svg viewBox="-1 -0.5 11 7"  width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                	<path d="m0 0h8v6h-8zm.75 .75v4.5h6.5v-4.5zM0 0l4 3 4-3v1l-4 3-4-3z"/>
                </svg>
            </button>

            <button class="header-icon mr-4 co_livechat_minimize" type="button" aria-label=""
                    style="color: rgb(255, 255, 255);">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"
                     enable-background="new 0 0 129 129"> <g> <path
                        d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/> </g> </svg>
            </button>

            <button class="header-icon co_livechat_close" type="button" aria-label=""
                    style="color: rgb(255, 255, 255);">
                <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path
                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                    <path d="M0 0h24v24H0z" fill="none"/> </svg>
            </button>
        </div>
    </t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.CloudoffixOfflineLivechat">
        <script id="recaptchav3" t-attf-src="https://www.google.com/recaptcha/api.js?render=#{recaptcha_key_site_v3}" t-att-clientkey="recaptcha_key_site_v3" ></script>
        <div class="o_chat_window offline_livechat_cloudoffix cloudoffix_livechat_frontend offline">
            <!--<div class="content">-->
            <div class="co_loading_livechat text-center" title="Loading sending form"
                 style="display:none;background: #fafafa;">
                    <svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
                         preserveAspectRatio="xMidYMid" class="lds-cloudy" style="background: none;"><g transform="translate(0 18)"><path d="M53.2,30.3c0.4-1.3,0.6-2.7,0.6-4.2c0-1.2-0.1-2.3-0.4-3.4c-1.5-6-7-10.5-13.5-10.5 c-5.3,0-9.9,3-12.3,7.4c-0.9-0.3-1.8-0.4-2.8-0.4c-5.1,0-9.3,4.1-9.3,9.3c0,0.6,0.1,1.3,0.2,1.9c-4.7,0.7-8.3,4.8-8.3,9.7 c0,5.4,4.4,9.8,9.8,9.8h34.2c3.8,0,7.1-2.2,8.8-5.4c0.7-1.3,1.1-2.9,1.1-4.5C61.4,35.2,57.8,31.1,53.2,30.3z" fill="#0055a5" transform="translate(-2.99771 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="2"/></path><defs><path id="cpp" d="M0,0v100h100V0H0z M62.9,44.4c-1.7,3.4-5.3,5.8-9.4,5.8H17c-5.8,0-10.5-4.7-10.5-10.5 c0-5.2,3.8-9.6,8.9-10.4c-0.1-0.6-0.2-1.3-0.2-2c0-5.5,4.4-9.9,9.9-9.9c1,0,2,0.2,3,0.5c2.5-4.7,7.4-7.9,13.1-7.9 c6.9,0,12.8,4.8,14.4,11.2c0.3,1.2,0.4,2.4,0.4,3.6c0,1.6-0.2,3.1-0.7,4.5c5,0.8,8.7,5.2,8.7,10.3C64,41.3,63.6,43,62.9,44.4z" transform="translate(-2.99771 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="2"/></path>
                        <clipPath id="cp"><use href="#cpp"/></clipPath></defs><g clip-path="url(#cp)"><path d="M84.9,28.9c0.4-1.1,0.6-2.3,0.6-3.5c0-1-0.1-1.9-0.4-2.8 c-1.3-5-6.1-8.7-11.8-8.7c-4.6,0-8.7,2.5-10.7,6.1c-0.8-0.2-1.6-0.4-2.4-0.4c-4.5,0-8.1,3.4-8.1,7.6c0,0.5,0.1,1,0.2,1.5 c-4.1,0.6-7.2,4-7.2,8c0,4.5,3.8,8.1,8.6,8.1h29.8c3.3,0,6.2-1.8,7.7-4.4c0.6-1.1,0.9-2.3,0.9-3.7C92,32.9,88.9,29.6,84.9,28.9z" fill="#45aee7" transform="translate(-2.98992 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="1.32"/></path></g></g> </svg>
                </div>
            <div class="o_chat_header">
                    <div class="livechat_img_container">
                        <div class='img img-responsive'>
                            <t t-if="options.avatar_operator">
                                <img class="avatar avatar-xl" t-attf-src="#{options.avatar_operator}" />
                            </t>
                            <t t-else="">
                                 <img class="avatar avatar-xl" src="/cloudoffix_livechat_frontend/static/src/img/avatar/avatar_01.jpg"/>
                            </t>
                        </div>
                    </div>
                <span class="o_chat_title">
                    <t t-if="offline_chat_header">
                        <t t-esc="offline_chat_header"/>
                    </t>
                    <t t-else="">
		                Cloudoffix Livechat
                    </t>
                    <small>
                        <p>
                            <i class="o_mail_user_status o_user_offline fa fa-circle" title="Offline"/>
                            <span class='user_status ml4'>Offline</span>
                        </p>
                    </small>
		        </span>
                <div class="hidden display-flex chat-folded-header">
                    <div class="cloudoffix_livechat_frontend_button hidden-print btn"
                         t-attf-style="background-color: #{options.bg_color_btn} ; border-color: #{options.bg_color_btn}; color: #{options.text_color_btn};">
                        <img t-attf-src="#{options.img_src}" style=" height: 30px; "/>
                        <div class="cloudoffix-button-text"><t t-esc="options.button_text"/></div>
                    </div>
                </div>
                <div class="chat-header-right-open display-flex">
                    <button class="header-icon mr-4 co_minimize_livechat" type="button" aria-label=""
                            style="color: rgb(255, 255, 255);">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"
                             enable-background="new 0 0 129 129"> <g> <path
                                d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/> </g> </svg>
                    </button>
                    <button class="header-icon co_livechat_close" type="button" aria-label=""
                            style="color: rgb(255, 255, 255);">
                        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24"
                             xmlns="http://www.w3.org/2000/svg"> <path
                                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                            <path d="M0 0h24v24H0z" fill="none"/> </svg>
                    </button>
                </div>
            </div>
            <div class="cloudoffix_livechat_frontend_form">
                    <div class="co_offline_chat_container">
                        <div class="container mt16 text-center">
                             <div class="col-xs-12">
                                 <div class="alert alert-danger hidden" role="alert">
                                    <div class="content_error">
                                    </div>
                                 </div>
                                 <t t-raw="offline_message and offline_message or ''"/>
                             </div>
                         </div>
                        <div class="cloudoffix_livechat_form">
                            <div class="container">
                                <div class="col-xs-12">
                                    <div class="mb32">
                                        <div t-att-class="'input-group mb16 ' + (departments.length &lt;= 1? 'hide':'') ">
                                            <select class="form-control chat_department" name="department" maxlength="40" placeholder="Department *">
                                                <t t-foreach="departments" t-as="department">
                                                    <t t-if="department.id == selected_department" >
                                                        <option t-att-value="department.id" selected="selected" >
                                                            <t t-esc="department.name"/>
                                                        </option>
                                                    </t>
                                                    <t t-else="" >
                                                        <option t-att-value="department.id">
                                                            <t t-esc="department.name"/>
                                                        </option>
                                                    </t>
                                                </t>
                                            </select>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-user"/></span>
                                            </div>
                                        </div>


                                        <div class="input-group mb16">
                                            <input type="text" class="name form-control" name="name" maxlength="80"
                                                   placeholder="Name *"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-user"/></span>
                                            </div>
                                        </div>
                                        <div class="input-group mb16">
                                            <input type="email" class="email form-control" name="email"
                                                   placeholder="Email *"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-envelope"/></span>
                                            </div>
                                        </div>

                                        <div class="input-group mb16">
                                            <input type="tel" class="phone form-control" name="phone" maxlength="40"
                                                   placeholder="Phone *"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-phone"/></span>
                                            </div>
                                        </div>

                                        <div class="input-group mb16">
                                            <input type="text" class="company_name form-control" name="company_name"
                                                   placeholder="Company *"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-building"/></span>
                                            </div>
                                        </div>

                                        <div class="form-group mb16">
                                            <textarea class="message form-control" placeholder="Your message" rows="2"/>
                                        </div>

                                        <div class="invalid_recaptcha mb16" />
                                        <div id="recaptcha-v2-container" class="input-group mb16" />

                                        <input class="co_send_button btn btn-primary btn-block" type="button"
                                               value="Send Message"/>

                                    </div>

                                 </div>
                            </div>
                        </div>
                    </div>
                </div>
            <!--</div>-->

        </div>
        <t t-call="cloudoffix_livechat_frontend.CloudoffixOfflineLivechatThanks"/>
    </t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.CloudoffixOfflineLivechatThanks">
        <!--Modal -->
        <div id="modal-thanks" tabindex="-1" aria-labelledby="Thanks"
             aria-hidden="true">
            <div class="thanks_message">
                <t t-raw="thanks_message and thanks_message or 'Thank you for contacting us. We will come back to you as soon as possible'"/>
            </div>
            <button type="button">Close</button>
          </div>
    </t>

    <t t-name="cloudoffix_livechat_frontend.CloudoffixLivechatForm">
        <script id="recaptchav3" t-attf-src="https://www.google.com/recaptcha/api.js?render=#{recaptcha_key_site_v3}" t-att-clientkey="recaptcha_key_site_v3" ></script>
        <div class="cloudoffix_livechat_frontend_form content_form_livechat">
            <div class="container mb32 ">
                <div class="col-xs-12 text-center mt8">
                     <div class="alert alert-danger hidden" role="alert">
                        <div class="content_error">
                        </div>
                     </div>
                    <t t-raw="welcome_message and welcome_message or ''"/>
                    <div class="mt16 mb16 chat-form">
                        <div t-att-class="'input-group mb16 ' + (departments.length &lt;= 1? 'hide':'') ">
                            <select class="form-control chat_department" name="department" maxlength="40" placeholder="Department *">
                                <t t-foreach="departments" t-as="department">
                                    <t t-if="department.id === selected_department" >
                                        <option t-att-value="department.id" selected="selected" >
                                            <t t-esc="department.name"/>
                                        </option>
                                    </t>
                                    <t t-else="" >
                                        <option t-att-value="department.id">
                                            <t t-esc="department.name"/>
                                        </option>
                                    </t>
                                </t>
                            </select>
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fa fa-user"/></span>
                            </div>
                        </div>

                        <div class="input-group mb16">
                            <input type="text" class="name form-control" name="name" maxlength="40"
                                   placeholder="Name *"/>
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fa fa-user"/></span>
                            </div>
                        </div>
                        <div class="input-group mb16">
                            <input type="email" class="email form-control" name="email"
                                   placeholder="Email *"/>
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fa fa-envelope"/></span>
                            </div>
                        </div>
                        <div class="input-group mb16">
                              <input type="tel" class="phone form-control" name="phone" maxlength="40"
                                     placeholder="Phone *"/>
                            <div class="input-group-append">
                                  <span class="input-group-text"><i class="fa fa-phone"/></span>
                              </div>
                          </div>

                        <div class="input-group mb16">
                            <input type="text" class="company_name form-control" name="company_name"
                                   placeholder="Company *"/>
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fa fa-building"/></span>
                            </div>
                        </div>

                        <div class="invalid_recaptcha mb16 text-left" />
                        <div id="recaptcha-v2-container" class="input-group mb16" />

                    </div>
                    <div class="text-left">
                        <button class="co_begin_chat btn btn-primary btn-block">Begin Chat</button>
                    </div>
                </div>

            </div>
            <div class="co_loading_livechat text-center" title="1" style="display:none">
                <svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
                     preserveAspectRatio="xMidYMid" class="lds-cloudy" style="background: none;"><g transform="translate(0 18)"><path d="M53.2,30.3c0.4-1.3,0.6-2.7,0.6-4.2c0-1.2-0.1-2.3-0.4-3.4c-1.5-6-7-10.5-13.5-10.5 c-5.3,0-9.9,3-12.3,7.4c-0.9-0.3-1.8-0.4-2.8-0.4c-5.1,0-9.3,4.1-9.3,9.3c0,0.6,0.1,1.3,0.2,1.9c-4.7,0.7-8.3,4.8-8.3,9.7 c0,5.4,4.4,9.8,9.8,9.8h34.2c3.8,0,7.1-2.2,8.8-5.4c0.7-1.3,1.1-2.9,1.1-4.5C61.4,35.2,57.8,31.1,53.2,30.3z" fill="#0055a5" transform="translate(-2.99771 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="2"/></path><defs><path id="cpp" d="M0,0v100h100V0H0z M62.9,44.4c-1.7,3.4-5.3,5.8-9.4,5.8H17c-5.8,0-10.5-4.7-10.5-10.5 c0-5.2,3.8-9.6,8.9-10.4c-0.1-0.6-0.2-1.3-0.2-2c0-5.5,4.4-9.9,9.9-9.9c1,0,2,0.2,3,0.5c2.5-4.7,7.4-7.9,13.1-7.9 c6.9,0,12.8,4.8,14.4,11.2c0.3,1.2,0.4,2.4,0.4,3.6c0,1.6-0.2,3.1-0.7,4.5c5,0.8,8.7,5.2,8.7,10.3C64,41.3,63.6,43,62.9,44.4z" transform="translate(-2.99771 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="2"/></path>
                    <clipPath id="cp"><use href="#cpp"/></clipPath></defs><g clip-path="url(#cp)"><path d="M84.9,28.9c0.4-1.1,0.6-2.3,0.6-3.5c0-1-0.1-1.9-0.4-2.8 c-1.3-5-6.1-8.7-11.8-8.7c-4.6,0-8.7,2.5-10.7,6.1c-0.8-0.2-1.6-0.4-2.4-0.4c-4.5,0-8.1,3.4-8.1,7.6c0,0.5,0.1,1,0.2,1.5 c-4.1,0.6-7.2,4-7.2,8c0,4.5,3.8,8.1,8.6,8.1h29.8c3.3,0,6.2-1.8,7.7-4.4c0.6-1.1,0.9-2.3,0.9-3.7C92,32.9,88.9,29.6,84.9,28.9z" fill="#45aee7" transform="translate(-2.98992 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="1.32"/></path></g></g> </svg>
            </div>
        </div>
    </t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.loader_sending_message">
		<div class="o_thread_message visitor_message">
			<div class="o_thread_message_core">
                <div class="container_sending">
                    <span>Sending</span>
                    <div class="animation_sending">
                        <svg class="lds-message" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="translate(20 50)"> <circle
                                cx="0" cy="0" r="6" fill="#1d3f72" transform="scale(0.956888 0.956888)"> <animateTransform
                                attributeName="transform" type="scale" begin="-0.375s" calcMode="spline"
                                keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s"
                                repeatCount="indefinite"/> </circle> </g>
                            <g transform="translate(40 50)"> <circle cx="0" cy="0" r="6" fill="#5699d2"
                                                                     transform="scale(0.686491 0.686491)"> <animateTransform
                                    attributeName="transform" type="scale" begin="-0.25s" calcMode="spline"
                                    keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s"
                                    repeatCount="indefinite"/> </circle> </g>
                            <g transform="translate(60 50)"> <circle cx="0" cy="0" r="6" fill="#d8ebf9"
                                                                     transform="scale(0.335259 0.335259)"> <animateTransform
                                    attributeName="transform" type="scale" begin="-0.125s" calcMode="spline"
                                    keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s"
                                    repeatCount="indefinite"/> </circle> </g>
                            <g transform="translate(80 50)"> <circle cx="0" cy="0" r="6" fill="#71c2cc"
                                                                     transform="scale(0.0545763 0.0545763)"> <animateTransform
                                    attributeName="transform" type="scale" begin="0s" calcMode="spline"
                                    keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s"
                                    repeatCount="indefinite"/> </circle> </g> </svg>
                    </div>
                </div>
			</div>
		</div>
    </t>

    <!-- **********************************************************************************************-->
    <t t-name="cloudoffix_livechat_frontend.exit_chat">
        <div class="modal fade" id="modal-exit-chat" tabindex="-1" role="dialog" aria-labelledby="ExitChat"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Exit Chat</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&amp;times;</span>
                  </button>
                </div>

                  <div class="modal-body">
                  <p class="lead">Are you sure You want to end this chat?</p>
                </div>

                  <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                      <button type="button" class="co_exit_chat btn btn-primary">OK</button>
                </div>
              </div>
            </div>
          </div>
	</t>

    <t t-name="cloudoffix_livechat_frontend.email_transcript">
		<div class="transcript_wrap">
            <div class="alert alert-danger hidden" role="alert">
                <div class="content_error">
                </div>
            </div>

            <div class="input-group mb16">
                <input type="email" class="transcript_email form-control" name="transcript_email"
                       placeholder="Email *"/>
            </div>

            <div class="text-left">
                <input class="transcript_cancel btn btn-secondary" type="button" value="Cancel"/>
                <input class="transcript_send btn btn-primary" type="button" value="Send"/>
            </div>
            <div class="transcript_loader co_loading_livechat  text-center" title="1" style="display:none">
                <svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
                     preserveAspectRatio="xMidYMid" class="lds-cloudy" style="background: none;"><g transform="translate(0 18)"><path  d="M53.2,30.3c0.4-1.3,0.6-2.7,0.6-4.2c0-1.2-0.1-2.3-0.4-3.4c-1.5-6-7-10.5-13.5-10.5 c-5.3,0-9.9,3-12.3,7.4c-0.9-0.3-1.8-0.4-2.8-0.4c-5.1,0-9.3,4.1-9.3,9.3c0,0.6,0.1,1.3,0.2,1.9c-4.7,0.7-8.3,4.8-8.3,9.7 c0,5.4,4.4,9.8,9.8,9.8h34.2c3.8,0,7.1-2.2,8.8-5.4c0.7-1.3,1.1-2.9,1.1-4.5C61.4,35.2,57.8,31.1,53.2,30.3z" fill="#0055a5" transform="translate(-2.99771 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1"  repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="2"/></path><defs><path id="cpp" d="M0,0v100h100V0H0z M62.9,44.4c-1.7,3.4-5.3,5.8-9.4,5.8H17c-5.8,0-10.5-4.7-10.5-10.5 c0-5.2,3.8-9.6,8.9-10.4c-0.1-0.6-0.2-1.3-0.2-2c0-5.5,4.4-9.9,9.9-9.9c1,0,2,0.2,3,0.5c2.5-4.7,7.4-7.9,13.1-7.9 c6.9,0,12.8,4.8,14.4,11.2c0.3,1.2,0.4,2.4,0.4,3.6c0,1.6-0.2,3.1-0.7,4.5c5,0.8,8.7,5.2,8.7,10.3C64,41.3,63.6,43,62.9,44.4z" transform="translate(-2.99771 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="2"/></path>
                    <clipPath id="cp"><use href="#cpp"/></clipPath></defs><g clip-path="url(#cp)"><path  d="M84.9,28.9c0.4-1.1,0.6-2.3,0.6-3.5c0-1-0.1-1.9-0.4-2.8 c-1.3-5-6.1-8.7-11.8-8.7c-4.6,0-8.7,2.5-10.7,6.1c-0.8-0.2-1.6-0.4-2.4-0.4c-4.5,0-8.1,3.4-8.1,7.6c0,0.5,0.1,1,0.2,1.5 c-4.1,0.6-7.2,4-7.2,8c0,4.5,3.8,8.1,8.6,8.1h29.8c3.3,0,6.2-1.8,7.7-4.4c0.6-1.1,0.9-2.3,0.9-3.7C92,32.9,88.9,29.6,84.9,28.9z" fill="#45aee7" transform="translate(-2.98992 0)"><animateTransform attributeName="transform"  values="-3 0;3 0;-3 0" keyTimes="0;0.5;1" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="1.32"/></path></g></g></svg>
            </div>
		</div>
	</t>

    <t t-name="cloudoffix_livechat_frontend.transcript_email_body">
		<table style="line-height:100%!important;margin:0;padding:0;width:100%!important" align="center" cellspacing="0"
               cellpadding="0" border="0">
		    <tbody>
                <tr>
                    <td>
                        <table style="margin:auto;max-width:700px;min-width:320px;background:#f5f5f5;width:100%">
                            <tbody>
                                <tr>
                                    <td style="padding:0px 20px 20px 20px" valign="top">
                                        <table style="background-clip:padding-box;color:#545454;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;line-height:20px;margin:0 auto;width:100%"
                                               align="center" cellspacing="0" cellpadding="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td valign="top">
                                                        <table style="background-clip:padding-box;border-collapse:separate;width:100%;background:#fff;border-radius:3px;margin-top:20px;padding-bottom:20px"
                                                               cellspacing="0" cellpadding="0" border="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="background-clip:padding-box;color:#545454;font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:20px;overflow:hidden;padding:15px 20px"
                                                                        colspan="2">
                                                                        <p style="margin:10px 0;font-size:20px;text-align:center">
                                                                            Chat on <a
                                                                                t-att-href="window.location.protocol + '//' + window.location.host"
                                                                                target="_blank"><t t-esc="domain" /></a>
                                                                        </p>
                                                                        <div style="width:100%;height:1px;background:#e4e4e4;margin:20px 0"/>
                                                                        <p style="margin:5px 0;text-align:center">
                                                                            Conversation started on : <t
                                                                                t-esc="moment(messages[0].date).format('LLLL Z')"/>
                                                                        </p>
                                                                    </td>
                                                                </tr>
                                                                <tr t-foreach="messages" t-as="msg">
                                                                    <td style="padding:5px 5px 5px 20px;width:60px;text-align:right;vertical-align:top">
                                                                        [<span><span><t t-esc="moment(msg.date).format('hh-mm')" /></span></span>
                                                                        ]
                                                                    </td>
                                                                    <td style="overflow:hidden;padding:5px 20px 5px 5px"
                                                                        class="message_body">
                                                                            <t t-set="display_author_name"
                                                                               t-value="msg.displayed_author.split(',')"/>
                                                                        <t t-set="position" t-value="display_author_name.length -1"/>
                                                                        <t t-if="display_author_name[position]"
                                                                           t-esc="display_author_name[position]"/>
                                                                        :
                                                                        <t t-raw="msg.body"/>
                                                                        <t t-foreach="msg.attachment_ids" t-as="attachment_id">
                                                                                <a target="_blank"
                                                                                   t-att-href="window.location.protocol + '//' + window.location.host +''+ attachment_id.url"><t t-esc="attachment_id.filename" /></a>
                                                                            </t>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
		        </tr>
	        </tbody>
        </table>
	</t>


</templates>
