<div id="post-box" class="z-depth-5">
	<div id="post-bar" class="drag-bar"><span id="unreact">@@post-new@@</span><span id="addreact" class="hide">Reaction</span></div>
	<!--トゥートボックス-->
	<div id="left-side">
		<div class="row" style="margin-bottom: 0">
			<div class="" style="float: left">
				<a onclick="profShow()" style="vertical-align: -1.7rem" class="pointer mize">
					<img src="../../img/missing.svg" id="acct-sel-prof" title="@@showSelectProf@@(Ctrl+Shift+P)" data-trans-title="post_box_prof" style="width: 1.8rem" />
				</a>
			</div>
			<div class="input-field mize" style="float: left; width: calc(100% - 1.8rem); margin-top: 0">
				<select id="post-acct-sel" class="acct-sel" onchange="mdCheck()"></select>
			</div>
			<span class="cancel">
				<i class="material-icons waves-effect" onclick="hide()" title="@@closeThisBox@@(X)" data-trans-title="post_box_close">cancel</i>
			</span>
			<!--Markdown-->
			<div class="row" style="margin-bottom: 0">
				<div class="markdown mize hide">
					<div class="col s12">
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('b')" title="太字(Ctrl+B)テキストボックス内を選択してから押すと囲みます。">format_bold</i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('i')" title="斜字(Ctrl+I)テキストボックス内を選択してから押すと囲みます。">format_italic</i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('u')" title="下線(Ctrl+U)テキストボックス内を選択してから押すと囲みます。">format_underlined</i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('s')" title="取り消し(Ctrl+S)テキストボックス内を選択してから押すと囲みます。">strikethrough_s</i>
						<i class="material-icons pointer setting waves-effect" onclick="markdown('>','no','yes')" title="引用">format_quote</i>
						<i class="material-icons pointer setting waves-effect" onclick="markdown('#','no','yes')" title="見出し">short_text</i>
						<i class="material-icons pointer setting waves-effect" onclick="markdown('`','yes','no')" title="コード挿入 テキストボックス内を選択してから押すと囲みます。">code</i>
						<i class="material-icons pointer setting waves-effect" onclick="markdown('- ','yes','yes')" title="箇条書きリスト">format_list_bulleted</i>
						<i class="material-icons pointer setting waves-effect" onclick="markdown('1. ','yes','yes')" title="番号付きリスト">format_list_numbered</i>
						<i
							class="pointer setting fa fa-subscript waves-effect"
							onclick="markdown('__','yes','no','before')"
							title="下付き文字 テキストボックス内を選択してから押すと囲みます。"
							style="font-size: 1.5rem"
						></i>
						<i
							class="pointer setting fa fa-superscript waves-effect"
							onclick="markdown('_','yes','no','before')"
							title="上付き文字 テキストボックス内を選択してから押すと囲みます。"
							style="font-size: 1.5rem"
						></i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('spin')" title="回転 テキストボックス内を選択してから押すと囲みます。">autorenew</i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('pulse')" title="点滅 テキストボックス内を選択してから押すと囲みます。">flare</i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('flip=vertical')" title="上下反転 テキストボックス内を選択してから押すと囲みます。">swap_vert</i>
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('flip=horizontal')" title="左右反転 テキストボックス内を選択してから押すと囲みます。">swap_horiz</i>
						<span class="sml gray pointer waves-effect">
							<a onclick="mdToggle()">Markdownエディタを隠す</a>
						</span>
						<br />
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('size')" title="文字サイズ変更 テキストボックス内を選択してから押すと囲みます。">format_size</i>
						<input id="size" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem" value="12" />px
						<i class="material-icons pointer setting waves-effect" onclick="tagsel('colorhex')" title="文字色変更 テキストボックス内を選択してから押すと囲みます。">color_lens</i>
						<input id="colorhex" style="width: calc(50% - 3.8rem); margin: 0; height: 1.8rem" type="color" />
						<br />
						<i class="material-icons pointer setting waves-effect" onclick="markdownLink()" title="リンク挿入">link</i>
						<input id="linkt" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem" placeholder="リンクテキスト" />&nbsp;
						<input id="link2" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem" placeholder="リンクアドレス" />
						<br />
						<i class="material-icons pointer setting waves-effect" onclick="markdownImage()" title="インライン画像挿入">image</i>
						<input id="image" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem" placeholder="代替テキスト" />&nbsp;
						<input id="image2" style="width: calc(50% - 1.5rem); margin: 0; height: 1.8rem" placeholder="画像アドレス" />
					</div>
				</div>
				<div class="input-field col s12" id="preview-field" style="margin-top: 0">
					<div id="md-preview"></div>
					<span class="sml gray pointer">
						<a onclick="previewEdit()">Edit</a>
					</span>
				</div>
				<div class="input-field col s12" id="toot-field" style="margin-top: 0; margin-bottom: 0">
					<textarea id="textarea" class="materialize-textarea unmize" style="margin-bottom: 0" data-length="500"></textarea>

					<div id="suggest"></div>
					<label for="textarea" data-trans="toot">@@toot@@</label>
					<br />
					<span class="sml gray pointer markdown mize" id="preview-btn">
						<a onclick="preview()">Preview</a>
					</span>
					<span class="sml gray pointer anti-markdown mize">
						<a onclick="mdToggle()">Markdownエディタを表示</a>
					</span>
				</div>
				<div class="col s12 mize" style="margin-top: 0; display: flex; justify-content: space-between">
					<i class="waves-effect gray material-icons" id="nsfw" title="@@nsfwDes@@" onclick="nsfw()">visibility_off</i>
					<i class="waves-effect gray material-icons purple-text dropdown-trigger" data-target="dropdown1" id="vis-icon">public</i>
					<a class="waves-effect gray" id="cw" onclick="cw()" title="@@cwDes@@">CW</a>
					<span
						><span id="imgup"></span><span id="imgsel" class="pwa"><i class="waves-effect material-icons gray" onclick="fileselect()" title="@@selfile@@">photo_library</i></span></span
					>
					<i class="waves-effect gray material-icons" onclick="emojiToggle()" id="emojibtn" title="@@insertEmoji@@">tag_faces</i>
					<i class="waves-effect gray material-icons dropdown-trigger" data-target="dropdown2">more_vert</i>
					<i class="material-icons nex gray waves-effect" title="@@clearToot@@(Ctrl+Shit+C)" data-trans-title="post_box_clear" id="clear">clear</i>
				</div>
				<div class="col s12 mize" style="margin-bottom: 0.4rem; padding: 0">
					<div id="taglist"></div>
					<div id="preview" class="mize"></div>
					<span class="sml mize"
						><span>@@replyMode@@</span>: <span id="rec">@@no@@</span>/<span>@@temp@@</span>:
						<span id="mec">@@nothing@@</span>
						<a onclick="stamp()" class="pointer pwa" title="@@stampWarn@@">@@stamp@@: <span id="stamp">Off</span></a> /@@poll@@:
						<span id="pollsta">@@no@@</span>
						<span id="vis" class="hide">public</span>
					</span>
					<br />
					<input type="text" id="cw-text" placeholder="@@cwtext@@" class="mize" style="margin: 0" />
					<div id="sch-box">
						@@postat@@<br /><span class="sml">@@scheduleWarn@@</span><a onclick="expPostMode()">Expire mode(beta)</a><br />
						<input type="datetime-local" id="sch-date" placeholder="@@schedule@@" class="datepicker" style="margin: 0" />
					</div>
				</div>
			</div>
			<!-- 公開範囲 Dropdown Structure -->
			<ul id="dropdown1" class="dropdown-content">
				<li>
					<a onclick="vis('public')">@@publicJP@@(Public)</a>
				</li>
				<li>
					<a onclick="vis('unlisted')">@@unlistedJP@@(Unlisted)</a>
				</li>
				<li>
					<a onclick="vis('private')" id="private-button">@@privateJP@@(Private)</a>
				</li>
				<li id="limited-button" class="hide">
					<a onclick="vis('limited')">限定公開(Limited)</a>
				</li>
				<li id="local-button" class="hide">
					<a onclick="vis('local')">@@localJP@@(Local)</a>
				</li>
				<li>
					<a onclick="vis('direct')" class="disabled direct">@@directJP@@(Direct)</a>
				</li>
			</ul>
			<!-- その他 Dropdown Structure -->
			<ul id="dropdown2" class="dropdown-content">
				<li>
					<a onclick="nowplaying('spotify');">NowPlaying (Spotify)</a>
				</li>
				<li class="mac">
					<a onclick="nowplaying('itunes');">NowPlaying (iTunes macOS)</a>
				</li>
				<li>
					<a onclick="nowplaying('lastFm');">NowPlaying (Last.fm)</a>
				</li>
				<li>
					<a onclick="schedule();">@@schedule@@</a>
				</li>
				<li>
					<a onclick="pollToggle();">@@poll@@</a>
				</li>
				<li>
					<a onclick="draftToggle();">@@draft@@</a>
				</li>
			</ul>
			<!--hidden area-->
			<input type="hidden" id="reply" />
			<input type="hidden" id="ideKey" />
			<input type="hidden" id="quote" />
			<input type="hidden" id="media" />
			<!--END hidden area-->
		</div>
		<div id="toot-btn-field">
			<button class="btn waves-effect unmize toot-btn-group" onclick="post()" id="toot-post-btn">@@toot@@</button>
			<button class="btn waves-effect darken-3 unmize hide toot-btn-group" onclick="sec()" id="toot-sec-btn">
				<i class="material-icons" id="toot-sec-icon" title="@@sectoot@@">lock_open</i>
			</button>
		</div>
	</div>
	<div id="right-side">
		<div id="draft" class="hide right-side-content"></div>
		<!--絵文字ピッカー-->
		<div id="emoji" class="hide right-side-content">
			<span class="gray sml"
				>@@emojiWarn@@
				<a onclick="emojiGet('true')" class="pointer">@@refreshEmoji@@</a>
				<br />
			</span>
			<div id="emoji-list" class="" style=""></div>
			<div class="emoji-control center">
				<button class="btn waves-effect blue" style="width: 30%; padding: 0" onclick="emojiList('before')" id="emoji-before">
					<i class="material-icons">navigate_before</i>
				</button>
				<span id="emoji-count"></span>/
				<span id="emoji-sum"></span>
				<button class="btn waves-effect blue" style="width: 30%; padding: 0" onclick="emojiList('next')" id="emoji-next">
					<i class="material-icons">navigate_next</i>
				</button>
			</div>
			<div id="default-emoji">
				<span id="now-emoji"></span>@@showThisEmoji@@<br /><span class="gray sml">@@emojiInsertWarn@@</span>
				<br />
				<a onclick="customEmoji()" class="pointer waves-effect" title="@@customEmoji@@">
					<i class="material-icons">add</i>
				</a>
				<a onclick="defaultEmoji('people')" class="pointer waves-effect" title="@@peopleEmoji@@">
					<i class="material-icons">people</i>
				</a>
				<a onclick="defaultEmoji('nature')" class="pointer waves-effect" title="@@natureEmoji@@">
					<i class="material-icons">local_florist</i>
				</a>
				<a onclick="defaultEmoji('food')" class="pointer waves-effect" title="@@foodEmoji@@">
					<i class="material-icons">restaurant</i>
				</a>
				<a onclick="defaultEmoji('activity')" class="pointer waves-effect" title="@@activityEmoji@@">
					<i class="material-icons">directions_run</i>
				</a>
				<a onclick="defaultEmoji('place')" class="pointer waves-effect" title="@@placeEmoji@@">
					<i class="material-icons">directions_car</i>
				</a>
				<a onclick="defaultEmoji('object')" class="pointer waves-effect" title="@@thingsEmoji@@">
					<i class="material-icons">attach_file</i>
				</a>
				<a onclick="defaultEmoji('symbol')" class="pointer waves-effect" title="@@symbolEmoji@@">
					<i class="material-icons">gesture</i>
				</a>
				<a onclick="defaultEmoji('flag')" class="pointer waves-effect" title="@@flagsEmoji@@">
					<i class="material-icons">flag</i>
				</a>
				<a onclick="faicon()" class="pointer waves-effect" title="faicon" id="faicon-btn">
					<i class="fab fa-fort-awesome"></i>
				</a>
			</div>
		</div>
		<!--Poll UI-->
		<div id="poll" class="hide right-side-content">
			<div id="mastodon-poll" class="poll-provider">
				<input type="text" class="mastodon-choice" placeholder="@@choice@@1" />
				<input type="text" class="mastodon-choice" placeholder="@@choice@@2" />
				<input type="text" class="mastodon-choice" placeholder="@@choice@@3" />
				<input type="text" class="mastodon-choice" placeholder="@@choice@@4" />
				<label>
					<input type="checkbox" class="filled-in" id="poll-multiple" value="1" />
					<span>@@pollmulti@@</span>
				</label>
				<label>
					<input type="checkbox" class="filled-in" id="poll-until" value="1" />
					<span>@@polluntil@@</span>
				</label>
				<input type="number" style="width: 50px" id="days_poll" placeholder="d" value="0" />@@days@@
				<input type="number" style="width: 50px" id="hours_poll" placeholder="h" value="0" />@@hours@@
				<input type="number" style="width: 50px" id="mins_poll" placeholder="m" value="6" />@@mins@@
			</div>
		</div>
	</div>
</div>