<html>
	<head>
		<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
		<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
		<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default-dark.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="vue-material.js"></script>
		<script src="tf-user.js"></script>
		<script src="tf-message.js"></script>
		<script src="tf.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.29.1/commonmark.min.js"></script>
	</head>
	<body style="color: #fff">
		<div id="app">
			<md-dialog :md-active.sync="show_connect_dialog">
				<md-dialog-title>Connect</md-dialog-title>
				<md-dialog-content>
					<md-field>
						<label>net:127.0.0.1:8008~shs:id</label>
						<md-input v-model="connect"></md-input>
					</md-field>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="md-primary" @click="ssb_connect(connect); connect = null; show_connect_dialog = false">Connect</md-button>
					<md-button @click="connect = null; show_connect_dialog = false">Cancel</md-button>
				</md-dialog-actions>
			</md-dialog>
			<md-app style="position: absolute; height: 100%; width: 100%">
				<md-app-toolbar class="md-primary">
					<md-button class="md-icon-button" @click="showUsers = !showUsers">
						<md-icon>menu</md-icon>
					</md-button>
					<span class="md-title">Tilde Friends Secure Scuttlebutt Test</span>
				</md-app-toolbar>
				<md-app-drawer :md-active.sync="showUsers" md-persistent="full">
					<md-list>
						<md-subheader>Network</md-subheader>
						<md-list-item v-for="broadcast in broadcasts" v-bind:key="JSON.stringify(broadcast)" @click="ssb_connect(broadcast)">{{broadcast.address}}:{{broadcast.port}} <tf-user :id="broadcast.pubkey"></tf-user></md-list-item>
						<md-subheader>Connections</md-subheader>
						<md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item>
						<md-list-item @click="show_connect_dialog = true">Connect</md-list-item>
					</md-list>
				</md-app-drawer>
				<md-app-content>
					<md-button @click="refresh()" class="md-icon-button md-dense md-raised md-primary">
						<md-icon>cached</md-icon>
					</md-button>
					Welcome, <tf-user :id="whoami"></tf-user>.
					<md-card class="md-elevation-8">
						<md-card-header>
							<div class="md-title">What's up?</div>
						</md-card-header>
						<md-card-content>
							<md-chip v-if="share_app" md-deletable @md-delete="share_app = null">
								{{share_app}}: {{apps[share_app]}}
							</md-chip>
							<md-field>
								<label>Post a message</label>
								<md-textarea id="post_text"></md-textarea>
							</md-field>
						</md-card-content>
						<md-card-actions>
							<md-menu>
								<md-button md-menu-trigger>Share App</md-button>
								<md-menu-content>
									<md-menu-item v-for="app in Object.keys(apps)" v-bind:key="app" @click="share_app = app">
										{{app}}
									</md-menu-item>
								</md-menu-content>
							</md-menu>
							<md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button>
						</md-card-actions>
					</md-card>
					<tf-message
						v-for="message in messages"
						v-if="!content_json(message).root || !messages.some(m => m.id == content_json(message).root)"
						v-bind:message="message"
						v-bind:messages="messages"
						v-bind:key="message.id"
						v-bind:votes="votes"></tf-message>
				</md-app-content>
			</md-app>
		</div>
	</body>
</html>