<html>
	<head>
		<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
		<link rel="stylesheet" href="roboto.css">
		<link rel="stylesheet" href="material-icons.css">
		<link rel="stylesheet" href="vue-material.min.css">
		<link rel="stylesheet" href="vue-material-theme-default-dark.css">
		<link rel="stylesheet" href="style.css">
		<script src="vue.js"></script>
		<script src="vue-material.js"></script>
		<script src="commonmark.min.js"></script>
		<script src="tf-shared.js" type="module"></script>
		<script src="tf-user.js" type="module"></script>
		<script src="tf-message.js" type="module"></script>
		<script src="tf.js" type="module"></script>
		<base target="_top">
	</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">
					<span class="md-title">Tilde Scuttlebutt</span>
				</md-app-toolbar>
				<md-app-content>
					<md-tabs>
						<md-tab md-label="News">
							<md-app-toolbar class="md-secondary" v-show="unread > 0">
								<md-button @click="refresh()" class="md-raised md-primary">Refresh</md-button>
								<span class="md-title">{{unread}} unread item{{unread == 1 ? '' : 's'}}</span>
							</md-app-toolbar>
							<md-app class="md-elevation-8">
								<md-app-toolbar>
									<div>Welcome, <tf-user :id="whoami"></tf-user></div>
									<div>
										<md-field>
											<md-select v-model="whoami" name="whoami" id="whoami">
												<md-option v-for="identity in identities" v-bind:key="identity" :value="identity">{{identity}}</md-option>
											</md-select>
										</md-field>
									</div>
									<div>
										<md-button @click="create_identity()">
											Create Identity
										</md-button>
									</div>
								</md-app-toolbar>
								<md-app-content>
									<span v-if="times?.total">
										Loaded in {{times.total}}.
										<md-tooltip v-if="Object.keys(times).length" style="height: auto">
											<div v-for="key in Object.keys(times)">{{key}}: {{times[key]}}</div>
										</md-tooltip>
									</span>
									<span v-else>
										Loading...
									</span>
								</md-app-content>
							</md-app>

							<md-card class="md-elevation-8" style="margin: 1em">
								<md-card-header>
									<div class="md-title">What's up?</div>
								</md-card-header>
								<md-card-content>
									<md-chip v-if="reply_root || reply_branch" md-deletable @md-delete="reply_root = null; reply_branch = null">Replying in thread {{reply_root}} to message {{reply_branch}}</md-chip>
									<md-chip v-for="link in Object.keys(mentions)" v-bind:key="link" md-deletable @md-delete="remove_from_mentions(link)">
										{{mentions[link].name}}: {{link}}
									</md-chip>
									<div class="md-layout">
										<md-field class="md-layout-item">
											<label>Post a message</label>
											<md-textarea id="post_text" v-model="post_text" v-on:paste="paste" md-autogrow></md-textarea>
										</md-field>
										<md-card class="md-layout-item" v-if="post_text && post_text.length">
											<md-card-content v-html="markdown(post_text)"></md-card-content>
											<md-card-content>
												<md-card-media v-for="link in Object.keys(mentions)" v-bind:key="link">
													<img v-if="(mentions[link].type || '').startsWith('image/')" :src="'/' + link + '/view'" class="md-elevation-4" style="margin: 4px; max-width: 320px; max-height: 240px">
												</md-card-media>
											</md-card-content>
										</md-card>
									</div>
								</md-card-content>
								<md-card-actions>
									<md-button class="md-icon-button" @click="attach">
										<md-icon>attach_file</md-icon>
									</md-button>
									<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="add_app_to_mentions(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>

							<md-button v-if="selected !== undefined" class="md-raised md-primary" style="margin: 1em" @click="selected = null">
								<md-icon>home</md-icon> Home
							</md-button>

							<md-card v-if="selected && selected.charAt(0) == '@'" class="md-raised md-elevation-8" style="margin: 1em">
								<md-card-header>
									<md-card-header-text>
										<div class="md-title">{{users[selected] &amp;&amp; users[selected].name ? users[selected].name : selected}}</div>
										<div class="md-subhead" v-if="users[selected] && users[selected].name">{{selected}}</div>
									</md-card-header-text>
									<md-card-media v-if="users[selected] && users[selected].image" class="md-medium">
										<div><img :src="'/' + (typeof(users[selected].image) == 'string' ? users[selected].image : users[selected].image.link) + '/view'"></div>
									</md-card-media>
								</md-card-header>
								<md-card-content>
									<div v-if="selected == whoami">
										<img v-if="edit_profile_image" :src="'/' + edit_profile_image + '/view'">
										<md-field>
											<label>Name</label>
											<md-input v-model="edit_profile_name"></md-input>
										</md-field>
										<md-field>
											<label>Description</label>
											<md-textarea v-model="edit_profile_description"></md-textarea>
										</md-field>
									</div>
									<template v-if="users[selected]">
										<div>Total Message Size: {{human_size(users[selected].size)}}</div>
										<div v-if="users[selected].name">{{selected}}</div>
										<div v-html="markdown(users[selected].description)"></div>
									</template>
									<md-card-actions>
										<md-button class="md-icon-button" @click="attach('profile')">
											<md-icon>attach_file</md-icon>
										</md-button>
										<md-menu md-size="small" v-if="users[selected] && users[selected].followers">
											<md-button md-menu-trigger>{{Object.keys(users[selected].followers).length}} followers</md-button>
											<md-menu-content>
												<md-menu-item v-for="id of Object.keys(users[selected].followers)" v-bind:key="id"><tf-user :id="id"></tf-user></md-menu-item>
											</md-menu-content>
										</md-menu>
										<md-menu md-size="small" v-if="users[selected] && users[selected].following">
											<md-button md-menu-trigger>{{Object.keys(users[selected].following).length}} following</md-button>
											<md-menu-content>
												<md-menu-item v-for="id of Object.keys(users[selected].following)" v-bind:key="id"><tf-user :id="id"></tf-user></md-menu-item>
											</md-menu-content>
										</md-menu>
										<template v-if="selected != whoami && users[whoami] && users[whoami].blocking">
											<md-button @click="block(selected)" v-if="!users[whoami].blocking[selected]" class="md-raised md-secondary">Block</md-button>
											<md-button @click="unblock(selected)" v-else class="md-raised md-secondary">Unblock</md-button>
										</template>
										<template v-if="selected != whoami && users[whoami] && users[whoami].following">
											<md-button @click="follow(selected)" v-if="!users[whoami].following[selected]" class="md-raised md-secondary">Follow</md-button>
											<md-button @click="unfollow(selected)" v-else class="md-raised md-secondary">Unfollow</md-button>
										</template>
										<md-button @click="save_profile" v-if="selected == whoami" class="md-primary md-raised">Save Profile</md-button>
									</md-card-actions>
								</md-card-content>
							</md-card>
							<template v-if="messages.length">
								<tf-message
											v-for="message in messages"
											v-bind:message="message"
											v-bind:messages="messages"
											v-bind:key="message.id"
											v-bind:votes="votes"></tf-message>
							</template>
							<md-empty-state v-else-if="loading" md-label="Loading...">
								<md-progress-spinner md-mode="indeterminate"></md-progress-spinner>
							</md-empty-state>
							<md-empty-state v-else md-label="Nothing to see here."></md-empty-state>
						</md-tab>
						<md-tab md-label="Network">
							<md-list>
								<md-subheader>Broadcasts</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-subheader>Local Accounts</md-subheader>
								<md-list-item v-for="identity in all_identities" v-bind:key="'connection-identity-' + identity"><tf-user :id="identity"></tf-user></md-list-item>
							</md-list>
						</md-tab>
					</md-tabs>
				</md-app-content>
			</md-app>
		</div>
	</body>
</html>