<!DOCTYPE html>
<html>
	<head>
		<title>Chat</title>
		<!-- solves favicon.ico not found error -->
		<link rel="shortcut icon" href="#">
		<!-- responsibe webpage on mobile screens -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- load synth-js -->
		<script src="{{ url_for('static', filename='js/shared/synth-js/synth.min.js') }}"></script>
		<!-- load resampler -->
		<script src="{{ url_for('static', filename='js/shared/resampler.js') }}"></script>
		<!-- load jquery -->
		<script src="{{ url_for('static', filename='js/shared/jquery.min.js') }}"></script>
		<!-- load Angular.js -->
		<script src="{{ url_for('static', filename='js/shared/angular.js') }}"></script>
		<!-- load bootstrap -->
		<link href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
		<!-- load font-awesome -->
		<link href="{{ url_for('static', filename='fa/css/all.min.css') }}" rel="stylesheet">
		<!-- load my css -->
        <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
	</head>
	<body ng-app="Application">
		<div class="card col-md-12 col-xl-12" ng-controller="MainController">
			<div class="msg_head">
				<div class="d-flex bd-highlight" ng-click="untoggle()">
					<div class="img_cont">
						<img src="{{ url_for('static', filename='img/user.png') }}" class="rounded-circle user_img">
						<span class="online_icon"></span>
					</div>
					<div class="user_info">
						<span id="user_headline">Chat with User</span>
						<p>{a conversation.length a} Messages</p>
					</div>
				</div>
				{% if show_menu %}
				<a id="action_menu_btn" ng-click="showMenu()"><i class="fas fa-ellipsis-v"></i></a>
				<div class="action_menu">
					<ul>
						{% if asr_enabled %}
						<li>
							<i class="fas fa-assistive-listening-systems"></i>
							<span>Enable ASR</span>
							<label class="switch">
								<input type="checkbox" ng-model="config.asr" ng-change="getMicPermission()">
								<span class="slider round"></span>
							</label>
						</li>
						{% endif %}
						{% if tts_enabled %}
						<li>
							<i class="fas fa-bullhorn"></i>
							<span>Enable TTS</span>
							<label class="switch">
								<input type="checkbox" ng-model="config.tts">
								<span class="slider round"></span>
							</label>
						</li>
						{% endif %}
					</ul>
				</div>
				{% endif %}
			</div>
			<div id="card_body" class="msg_card_body" ng-click="untoggle()" scroll-to-bottom="conversation">
				<div ng-repeat="msg in conversation">
					
					<div class="d-flex justify-content-end mb-4" ng-if=" msg.sender== 'user' ">
						<div id="msg#{a msg.id a}" class="msg_cotainer_send">
							<div ng-if=" msg.type== 'text' ">
								<span>{a msg.body a}</span>
							</div>
							<div ng-if=" msg.type== 'audio' ">
								<a ng-click="play( msg.id)"><i id="play-icon#{a msg.id a}" class="far fa-play-circle fa-lg"></i></a><span>{a msg.body.text a}</span>
							</div>
							<span class="msg_time_send">{a msg.time a}</span>
						</div>
						<div class="img_cont_msg">
							<img src="{{ url_for('static', filename='img/user.png') }}" class="rounded-circle user_img_msg">
						</div>
					</div>

					<div class="d-flex justify-content-start mb-4" ng-if=" msg.sender== 'bot' ">
						<div class="img_cont_msg">
							<img src="{{ url_for('static', filename='img/bot.png') }}" class="rounded-circle user_img_msg">
						</div>
						<div id="msg#{a msg.id a}" class="msg_cotainer">
							<div ng-if=" msg.type== 'text' ">
								<span>{a msg.body a}</span>
							</div>
							<div ng-if=" msg.type== 'image' ">
								<a href="{a msg.body a}" target="_blank">
									<img src="{a msg.body a}" style="width: 400px;">
								</a>
							</div>
							<span class="msg_time">{a msg.time a}</span>
						</div>
					</div>

				</div>
			</div>
			<div class="card-footer" ng-click="untoggle()">
				<div class="input-group">
					<form ng-submit="submitMessage()" class="form-control type_msg">
						<input class="form-control" style="height:100%" placeholder="Type your message..." ng-model="userMsg">
					</form>
					<div class="input-group-append">
						{% if asr_enabled %}
						<button class="input-group-text send_btn send_btn2" ng-disabled="!config.asr" title="{a micTitle a}" ng-mousedown="record()" ng-mouseout = "stop()" ng-mouseup="stop()">
							<i class="fas fa-microphone-alt"></i>
						</button>
						{% endif %}
						<button class="input-group-text send_btn send_btn1" ng-click="submitMessage()" title="Send button" ng-disabled="!enableSending">
							<i class="fas fa-location-arrow"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
        <!-- Angularjs Modules -->
        <script src="{{ url_for('static', filename='js/app.js') }}"></script>
        <!-- Angularjs Controllers -->
        <script src="{{ url_for('static', filename='js/controllers/MainController.js') }}"></script>
	</body>
</html>

