<!DOCTYPE html>
<html>
<head>
	<title>Account data export</title>

	<!--Import Google Icon Font-->
	<link href="assets/material-design-icons/material-icons.css" rel="stylesheet">
	<!--Import materialize.css-->
	<link type="text/css" rel="stylesheet" href="assets/materialize/css/materialize.min.css"  media="screen,projection"/>

	<link rel="stylesheet" href="assets/css/main.css" />

	<script>
			
		//Project configuration
		const SOURCE_URL = "./source.json";
		const STORAGE_URL = "./files/";

	</script>
</head>
<body>

	<header>

		<div class="container"><a href="#" data-target="nav-mobile" class="top-nav sidenav-trigger waves-effect waves-light circle hide-on-large-only"><i class="material-icons">menu</i></a></div>

		<ul id="nav-mobile" class="sidenav sidenav-fixed">
			<li class="bold"><a href="#home" class="waves-effect waves-teal">Comunic data export</a></li>
			<li class="bold"><a href="#user-info" class="waves-effect waves-teal">User Information</a></li>
			<li class="bold"><a href="#friends-list" class="waves-effect waves-teal">Friends List</a></li>
			<li class="bold"><a href="#posts" class="waves-effect waves-teal">Posts</a></li>
			<li class="bold"><a href="#comments" class="waves-effect waves-teal">Comments</a></li>
			<li class="bold"><a href="#likes" class="waves-effect waves-teal">Likes</a></li>
			<li class="bold"><a href="#survey-responses" class="waves-effect waves-teal">Responses to surveys</a></li>
			<li class="bold"><a href="#movies" class="waves-effect waves-teal">Movies</a></li>
			<li class="bold"><a href="#all-conversations-message" class="waves-effect waves-teal">Conversations Messages (ALL)</a></li>
			<li class="bold"><a href="#conversations" class="waves-effect waves-teal">Conversations</a></li>
		</ul>

	</header>

	<main>

		<div id="home" class="category container">

			<h1>Exported Comunic Account Data Viewer</h1>

			Please use the navigation bar located at the left of this page to access to the different categories of content.
		</div>

		<!-- User information -->
		<div id="user-info" class="category container">
			<h1>User information</h1>

			<table class="user-information-table">
				<tr><td>User ID</td><td id="u-uid"></td></tr>
				<tr><td>First name</td><td id="u-firstname"></td></tr>
				<tr><td>Last name</td><td id="u-lastname"></td></tr>
				<tr><td>Is page public</td><td id="u-pagepublic"></td></tr>
				<tr><td>Is page open</td><td id="u-pageopen"></td></tr>
				<tr><td>Virtual directory</td><td id="u-virtualdirectory"></td></tr>
				<tr><td>Account image</td><td><img id="u-accountimage"></td></tr>
				<tr><td>Is friend list public</td><td id="u-publicfriendslist"></td></tr>
				<tr><td>Personnal website</td><td id="u-personnalwebsite"></td></tr>
				<tr><td>Public note</td><td id="u-publicnote"></td></tr>
				<tr><td>Comments forbidden</td><td id="u-commentsforbidden"></td></tr>
				<tr><td>Allow posts from friends</td><td id="u-allowpostsfromfriends"></td></tr>
				<tr><td>Account creation time</td><td id="u-accountcreationtime"></td></tr>
				<tr><td>Background image</td><td><img id="u-bgimage" class="background-image" /></td></tr>
				<tr><td>Page likes</td><td id="u-pagelikes"></td></tr>
			</table>
		</div>

		<!-- User friends list -->
		<div id="friends-list" class="category container">

			<h1>Your friends list</h1>

			<table id="friends-list-table">
				<thead>
					<th>Name</th>
					<th>Accepted</th>
					<th>Last active</th>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>

		<!-- Posts list -->
		<div id="posts" class="category container">

			<h1>All your posts</h1>

			<div id="posts-target">
				<!-- Posts will go here -->
			</div>
		</div>

		<!-- Full comments list -->
		<div id="comments" class="category container">
			
			<h1>All your comments</h1>

			<table id="all-comments-table">

				<thead>
					<tr>
						<th>Number</th>
						<th>Post ID</th>
						<th>Date</th>
						<th>Content</th>
						<th>Image</th>
					</tr>
				</thead>


				<tbody>
					<!-- Comments will go here -->
				</tbody>

			</table>
		</div>
		
		<!-- All user likes -->
		<div id="likes" class="category container">
			<h1>All your likes</h1>

			<table id="all-likes-table">

				<thead>
					<tr>
						<th>Number</th>
						<th>Date</th>
						<th>Element type</th>
						<th>Element ID</th>
					</tr>
				</thead>

				<tbody>
					<!-- Likes will go here-->
				</tbody>

			</table>

		</div>

		<!-- All survey responses -->
		<div id="survey-responses" class="category container">
			
			<h1>All your responses to surveys</h1>

			<table id="all-survey-responses">

				<thead>
					<tr>
						<th>Response number</th>
						<th>Survey Number</th>
						<th>Choice number</th>
						<th>Date</th>
					</tr>
				</thead>

				<tbody>
					<!-- Survey responses will go here -->
				</tbody>

			</table>

		</div>
		
		<!-- Entire movies list -->
		<div id="movies" class="category container">
			
			<h1>Your movies</h1>


			<table id="full-movie-list-table">

				<thead>
					<tr>
						<th>Number</th>
						<th>Name</th>
						<th>File type</th>
						<th>File size</th>
						<th>Actions</th>
					</tr>
				</thead>


				<tbody>
					<!-- Movies will go here -->
				</tbody>

			</table>

		</div>

		<!-- Entire list of conversation messages -->
		<div id="all-conversations-message" class="category container">
			
			<h1>All your conversation messages</h1>

			<table id="all-conversation-messages-table">

				<thead>
					<tr>
						<th>Number</th>
						<th>Date</th>
						<th>Message</th>
						<th>Image</th>
					</tr>
				</thead>

				<tbody>
					<!-- Conversation messages will go here -->
				</tbody>

			</table>

		</div>

		<!-- All user conversations -->
		<div id="conversations" class="category container">
			
			<h1>Your conversations</h1>

			<div id="conversations-target">
				<!-- Conversations will go here -->
			</div>

		</div>

	</main>


	<!--JavaScript at end of body for optimized loading-->
	<script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script>
	<script src="assets/js/utils.js"></script>
	<script src="assets/js/categories/userInfo.js"></script>
	<script src="assets/js/categories/friends.js"></script>
	<script src="assets/js/categories/posts.js"></script>
	<script src="assets/js/categories/comments.js"></script>
	<script src="assets/js/categories/likes.js"></script>
	<script	src="assets/js/categories/survey.js"></script>
	<script src="assets/js/categories/movies.js"></script>
	<script src="assets/js/categories/allConversationMessages.js"></script>
	<script src="assets/js/categories/conversations.js"></script>
	<script src="assets/js/main.js"></script>
</body>
</html>