{% load static %}

<link rel="stylesheet" href="{% static 'django_chatapp/css/client.css' %}">

<section class="chatapp" id="chatapp">

    <span id="sound_sendmsg" class="d-none">{% static 'django_chatapp/song/send.mp3' %}</span>
    <span id="chat_locale" class="d-none"></span>

    <div class="chatapp__btn" @click="open_close_box">
        <div>
            <img src="{% static 'django_chatapp/img/chat-room.png' %}" alt="Django Chat Application!">
            <div id="alert_msg_ctx" :class="counter_new_msg > 0 ? '' : 'd-none'"></div>
        </div>
    </div>

    <div class="chatapp__msg d-none chatapp__hide">
        <div class="msg__header">
            <div class="msg__wrapper">
                <div class="header__info">
                    <img src="{% static 'django_chatapp/img/supporter.png' %}" alt="supporter image">
                    <div>
                        <span></span>
                        <span>[[ receiver_status == 'online' ? $t('online') : $t('last seen recently') ]]</span>
                    </div>
                </div>
                <div class="header__options">
                    <button class="close__msgbox" id="close__msgbox" @click="open_close_box"><img src="{% static 'django_chatapp/img/close.png' %}" alt="close chat application"></button>
                    <button class="close__msgbox d-none" id="loader_spinner"><div class="loader_spinner loader_spinner--white"></div></button>
                </div>
            </div>
        </div>

        <div class="msg__body">        
            <div class="body__wrapper">

                <!-- + messages wrapper -->
                <div class="all__msg__wrapper d-none">

                    <template v-if="message_list.length == 0">
                        <div class="one_msg_wrapper">

                            <div class="msg msg__left">
                                <p class="msg__content">
                                    [[ $t('Hello, the supporter will be online in a few moments. please await.') ]]
                                </p>
                                <div class="msg__info">
                                </div>
                            </div>
                        </div>
                    </template>

                    <template v-else v-for="msg_item in message_list" :key="msg_item.id">
                        <div v-if="!msg_item.is_deleted" class="one_msg_wrapper">

                            <ul :id="`msg-menu-bar-${msg_item.id}`" class="msg-menu-bar d-none" :class="msg_item.sender_type == 'client' ? 'msg-menu-bar--left' : 'msg-menu-bar--right'">
                                <li @click="reply_msg(`chatapp_msg_${msg_item.id}`, msg_item.id)"><img src="{% static 'django_chatapp/img/reply.png' %}" alt="reply"> [[ $t('Reply') ]]</li>
                                <li @click="copy_ready_msg(msg_item.text)"><img src="{% static 'django_chatapp/img/copy.png' %}" alt="copy"> [[ $t('Copy') ]]</li>
                                <li v-if="edit_user_msg && msg_item.sender_type == 'client' && !msg_item.is_edited" @click="edit_message(`chatapp_msg_${msg_item.id}`, msg_item.id)"><img src="{% static 'django_chatapp/img/edit.png' %}" alt="edit"> [[ $t('Edit') ]]</li>
                                <li v-if="delete_user_msg && msg_item.sender_type == 'client'" @click="delete_message(msg_item.id)"><img src="{% static 'django_chatapp/img/delete.png' %}" alt="remove"> [[ $t('Remove') ]]</li>
                            </ul>

                            <div class="msg" :class="msg_item.sender_type == 'client' ? 'msg__right' : 'msg__left'" :id="'chatapp_msg_' + msg_item.id">
                                <p v-if="msg_item.reply_title" class="msg__replied" :class="msg_item.sender_type == 'client' ? 'msg__replied--right' : 'msg__replied--left'" @click="msg_replied(`chatapp_msg_${msg_item.reply_id}`)">
                                    <span>[[ msg_item.reply_title == 'client' ? $('You') : $t('Supporter') ]]</span>
                                    <span v-if="!msg_item.reply_is_deleted">[[ msg_item.reply_msg ]]</span>
                                    <span v-else>[[ $t('This message has been deleted.') ]]</span>
                                </p>
                                <p class="msg__content">
                                    [[ msg_item.text ]]
                                </p>
                                <div class="msg__info">
                                    <div class="msg__info__status" v-if="msg_item.sender_type == 'client'">
                                        <img v-if="msg_item.is_seen" src="{% static 'django_chatapp/img/double-check.png' %}" alt="double check status">
                                        <img v-else src="{% static 'django_chatapp/img/single-check.png' %}" alt="single check status">
                                    </div>
                                    <div class="msg__info__clock">[[ msg_item.created ]]</div>
                                    <div class="msg__info__edited" v-if="msg_item.is_edited">[[ $t('edited') ]]</div>
                                </div>
                            </div>
                            <div class="reply_one_msg" :class="msg_item.sender_type == 'client' ? 'reply_one_msg--right' : 'reply_one_msg--left'">
                                <span @click="reply_msg(`chatapp_msg_${msg_item.id}`, msg_item.id)">[[ $t('reply') ]]</span>
                                <br><br>
                                <span class="toggle_mneubar" @click="show_menu_bar(`msg-menu-bar-${msg_item.id}`)">[[ $t('more') ]]</span>
                            </div>
                        </div>
                        <div v-if="msg_item.is_deleted && show_deleted_msg">
                            <div class="msg__content deleted_msg"  :class="msg_item.sender_type == 'client' ? 'msgdel__right' : 'msgdel__left'">
                                <img src="{% static 'django_chatapp/img/delete.png' %}" alt="delete"> [[ $t('This message has been deleted.') ]]
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </template>

                </div>
                <!-- - messages wrapper -->

                <!-- + tictoctoe game -->
                <div class="tictoctoe__game d-none">
                    
                    <button id="restart__game">[[ $t('Play again') ]]</button>
                    <div id="score__game">
                        <div><span>[[ $t('You') ]]:</span><span>0</span></div>
                        <div><span>[[ $t('Computer') ]]:</span><span>0</span></div>
                    </div>
                    <p id="game_alert_msg" class="d-none"></p>
                                    
                    <div class="btns__wrapper">

                        <div id="bg__glass" class="d-none"></div>
                        <img src="{% static 'django_chatapp/img/o.png' %}" id="oimage_game" class="d-none" alt="this image is dnone because js handle image src">
                        <img src="{% static 'django_chatapp/img/x.png' %}" id="ximage_game" class="d-none" alt="this image is dnone because js handle image src">

                        <div class="btns__wrapper__btn">
                            <div class="btn_game m2px_b m2px_l" id="btn11"></div>
                            <div class="btn_game m2px_b m2px_l" id="btn12"></div>
                            <div class="btn_game m2px_b" id="btn13"></div>
                        </div>
                        <div class="btns__wrapper__btn">
                            <div class="btn_game m2px_b m2px_l" id="btn21"></div>
                            <div class="btn_game m2px_b m2px_l" id="btn22"></div>
                            <div class="btn_game m2px_b" id="btn23"></div>
                        </div>
                        <div class="btns__wrapper__btn">
                            <div class="btn_game m2px_l" id="btn31"></div>
                            <div class="btn_game m2px_l" id="btn32"></div>
                            <div class="btn_game" id="btn33"></div>
                        </div>
                    </div>
                </div>
                <!-- - tictoctoe game -->

                <!-- + login form -->
                <div class="chatapp__form d-none">
                    <div class="chatform__header">
                        <p>[[ $t('For better support and guidance, please enter your details correctly.') ]]</p>
                    </div>

                    <form novalidate @submit.prevent="chatapp_submitform">
                        <div class="chatapp_formcontrol">
                            <input type="text" id="chatapp__fname" autocomplete="off">
                            <label for="chatapp__fname">[[ $t('First Name') ]]</label>
                            <p class="form_error" v-if="form_errors.fname != ''">[[ form_errors.fname ]]</p>
                        </div>
                        <div class="chatapp_formcontrol">
                            <input type="text" id="chatapp__lname" autocomplete="off">
                            <label for="chatapp__lname">[[ $t('Last Name') ]]</label>
                            <p class="form_error" v-if="form_errors.lname != ''">[[ form_errors.lname ]]</p>
                        </div>
                        <div class="chatapp_formcontrol chatapp_control_email d-none">
                            <input type="email" id="chatapp__email" autocomplete="off">
                            <label for="chatapp__email">[[ $t('E-mail') ]]</label>
                            <p class="form_error" v-if="form_errors.phone_email != ''">[[ form_errors.phone_email ]]</p>
                        </div>
                        <div class="chatapp_formcontrol chatapp_control_phone mbnone__chat-app d-none">
                            <input type="number" id="chatapp__phone" autocomplete="off">
                            <label for="chatapp__phone">[[ $t('Phone') ]]</label>
                            <p class="form_error" v-if="form_errors.phone_email != ''">[[ form_errors.phone_email ]]</p>
                        </div>

                        <div class="chatapp_button">
                            <button id="chatapp_submitform" type="submit">[[ $t('Send') ]]</button>
                        </div>
                    </form>
                </div>
                <!-- - login form -->

                <div class="btn_last_msg d-none">
                    <button @click="go_to_bottom_of_box">
                        <img src="{% static 'django_chatapp/img/gotodown.png' %}" alt="go to last msg img">
                        <div class="unreadmsg_counter"></div>
                    </button>
                </div>

            </div>
        </div>

        <div class="body__inputs">
            <form novalidate class="d-none" @submit.prevent="sned_msg_socket">
                <div class="forminput_wrapper">
                    
                    <input type="text" v-model="msg_input" id="text-chatinput" autocomplete="off" :placeholder="$t('Enter your message:')">
                    <button class="show_emoji" type="button" @click="show_emojibar">
                        <img src="{% static 'django_chatapp/img/emoji.png' %}" alt="toggle emojis">
                    </button>
                    <button class="show_game" type="button" @click="show_game_btn">
                        <img src="{% static 'django_chatapp/img/game.png' %}" alt="let's go to game">
                    </button>

                    <div class="reply_msg_wrapper d-none">
                        <button class="close_replybar" type="button" @click="close_replybar">&times;</button>
                        <div>
                            <p class="reply__writer"></p>
                            <p class="reply__content"></p>
                            <p class="reply__reply_id d-none"></p>
                        </div>
                    </div>

                    <div class="emoji_wrapper d-none">
                        <div class="emoji_box">
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F600;')">&#x1F600;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F601;')">&#x1F601;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F602;')">&#x1F602;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F603;')">&#x1F603;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F604;')">&#x1F604;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F605;')">&#x1F605;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F607;')">&#x1F607;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F60B;')">&#x1F60B;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F60C;')">&#x1F60C;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F60D;')">&#x1F60D;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F60E;')">&#x1F60E;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F60F;')">&#x1F60F;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F610;')">&#x1F610;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F611;')">&#x1F611;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F612;')">&#x1F612;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F613;')">&#x1F613;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F618;')">&#x1F618;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F61C;')">&#x1F61C;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F621;')">&#x1F621;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F622;')">&#x1F622;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F624;')">&#x1F624;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F625;')">&#x1F625;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F627;')">&#x1F627;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F628;')">&#x1F628;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F629;')">&#x1F629;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F62A;')">&#x1F62A;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F62C;')">&#x1F62C;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F62D;')">&#x1F62D;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F62E;')">&#x1F62E;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F630;')">&#x1F630;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F631;')">&#x1F631;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F632;')">&#x1F632;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F633;')">&#x1F633;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F634;')">&#x1F634;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F636;')">&#x1F636;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F637;')">&#x1F637;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F641;')">&#x1F641;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F642;')">&#x1F642;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F643;')">&#x1F643;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F644;')">&#x1F644;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F910;')">&#x1F910;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F911;')">&#x1F911;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F912;')">&#x1F912;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F913;')">&#x1F913;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F914;')">&#x1F914;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F915;')">&#x1F915;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F917;')">&#x1F917;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F91A;')">&#x1F91A;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F91D;')">&#x1F91D;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F91E;')">&#x1F91E;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F91F;')">&#x1F91F;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F923;')">&#x1F923;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F926;')">&#x1F926;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F928;')">&#x1F928;</div>
                            <div class="emoji_item" @click="add_emoji_toinput('&#x1F929;')">&#x1F929;</div>
                        </div>
                    </div>

                    <button type="submit">
                        <img src="{% static 'django_chatapp/img/send.png' %}" alt="send image">
                    </button>
                </div>
            </form>
            <div class="goback_chat_btn d-none" @click="goback_chat_btn">

                <div>[[ $t('Return to Chat') ]]</div>

                <div v-if="counter_new_msg > 0">
                    <div class="new_msg_shower">
                        <div><img src="{% static 'django_chatapp/img/chat-room' %}.png" alt="chat room image"></div>
                        <div>[[ counter_new_msg ]]</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<script type="text/javascript" src="{% static 'django_chatapp/js/vue3.js' %}"></script>
<script type="text/javascript" src="{% static 'django_chatapp/js/vue-i18n.js' %}"></script>
<script type="text/javascript" src="{% static 'django_chatapp/js/client.js' %}"></script>