<!-- Powered by kleeja -->
<div id="content_index">

	<!-- welcome -->
	<UNLESS NAME="is_embedded">
	<div class="jumbotron">
		<h5><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>  {lang.WELCOME} <IF NAME="user_is">[ {username} ]</IF></h5>
		<p>{welcome_msg}</p>
	</div>
	</UNLESS>

	<!-- messages: error or info -->
		<div class="card mb-5">
			<ul class="list-group list-group-flush" id="messages">
				<LOOP NAME="info">
					<IF LOOP="message_type == info">
						<li class="list-group-item">
							{{message_content}}
						</li>
					<ELSE>
						<!-- error -->
						<li class="list-group-item  list-group-item-danger">
							<strong>{lang.INFORMATION}</strong> : {{message_content}}
						</li>
					</IF>
				</LOOP>
			</ul>
		</div>



	<!-- box loading -->



	<div id="zone" class="fd-zone">
		<div id="loadbox" class="card">
			<div class="card-block">
				{lang.WAIT_LOADING} <span id="progress_data"></span>
				<br>
				<img src="{STYLE_PATH}images/loading.gif" alt="{lang.LOADING}" />
			</div>
		</div>

		<p class="img"></p>
		<p><h3><span>{lang.DRAG_AND_DROP}</span></h3></p>
		<p><span>{lang.OR_MANUAL_SELECT}</span></p>

	</div>

	<div class="fallabackZone">
		<input type="file" name="file" class="fd-file" id="fallbackFile" />
	</div>


	<IF NAME="show_online">
		<!-- who's onLine -->
		<div class="card who-online">
			<div class="card-header">
				{lang.NUMBER_ONLINE}: <b>{current_online_users}</b>
			</div>

			<IF NAME="show_names">
				<div class="card-block">
				<LOOP NAME="show_names">
					<span class="badge badge-pill badge-default">{{name}}</span>
				</LOOP>
				</div>
			</IF>
		</div>
	</IF>



</div>
