{% block title %}
<title>Create a post - {{'SITE_NAME' | app_config}}</title>
{% endblock %}

{% extends "default.html" %}

{% block subHeader %}
	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
		<div class="relative col-span-full">
			<h1 class="font-bold text-xl font-heading leading-normal mb-0">
				Create post
			</h1>
			<small class="block text-gray-700">
				Share drama with the community.
			</small>
		</div>
	</div>
{% endblock %}

{% block content %}
<div class="col-span-full xl:col-span-9 sm:py-4 my-2.5 sm:my-0">

	<div class="flex items-center mb-4">
		<img src="{{ v.profile_url }}" class="w-8 h-8 object-cover rounded" alt="My avatar"/>
		<div class="text-lg text-pink-600 font-bold font-heading pl-2">{{ v.username }}</div>
	</div>

	<form id="submitform" action="/submit" method="post" enctype="multipart/form-data" class="flex flex-col space-y-6">

		<div class="container">

			<div class="row justify-content-center mb-5">

				<div class="col p-3 py-md-0">

					

					<div class="body">

						<input type="hidden" name="formkey" value="{{v.formkey}}">

						<!-- <label for="title">Post Title</label>


						<input class="form-control" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="Required" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">

						<label class="btn btn-secondary format d-inline-block m-0" for="emoji-reply-btn-2">
							<div id="emoji-reply-btn-2" onclick="loadEmojis('post-title')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
						</label> -->

						<!-- Post title field section -->
						<div class="flex flex-col">
							<label for="title" class="font-bold text-lg font-heading leading-normal mb-2">Title</label>
							<div>
								<!-- Input field -->
								<input class="form-input" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="rdrama.net is one of the most malevolent, cruel, coldhearted online communities you'll ever find" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">
								<!-- Add emoji button -->
								<button type="button" class="mt-1 text-sm text-gray-500 hover:text-gray-600" onclick="loadEmojis('post-title')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
									Add emoji
								</button>
							</div>
						</div>

						<div id="urlblock">
							<label for="URL" class="mt-3">URL</label>
							<input class="form-control" id="post-URL" aria-describedby="URLHelp" name="url" placeholder="Optional if you have text." value="{{request.values.get('url','')}}" required oninput="checkForRequired();autoSuggestTitle();hide_image()">
							<small class="form-text text-muted">To post an image, use a direct image link such as i.imgur.com</small>
						</div>
						<div id="image-upload-block">
							<div><label class="mt-3">Attachment Upload</label></div>

							<img loading="lazy" id="image-preview" class="w-100">
							<label class="btn btn-secondary m-0" for="file-upload">
								<div id="filename-show">Select File</div>
								<input id="file-upload" type="file" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*, video/*" hidden>
							</label>
							<small class="form-text text-muted">Optional if you have text.</small>
							<small class="form-text text-muted">You can upload images or videos up to 1 minute long.</small>
						</div>
					</div>

					<label for="body" class="mt-3">Text<i class="fas fa-info-circle text-gray-400 ml-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Uses markdown. Limited to 10000 characters."></i></label>

					<div>
						<textarea form="submitform" id="post-text" class="form-control rounded" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown();charLimit('post-text','character-count-submit-text-form');checkForRequired()" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" required></textarea>

						<div class="btn btn-secondary fl-r mt-3" onclick="document.getElementById('preview').classList.toggle('d-none');">
							Toggle preview
						</div>

						<div class="text-small font-weight-bold mt-1" id="character-count-submit-text-form" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>

						<div id="preview" class="my-3"></div>
					</div>

					<p></p>
					<small class="btn btn-secondary format d-inline-block m-0">
						<i class="fas fa-bold" aria-hidden="true" onclick="makeBold('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Bold"></i>
					</small>
					&nbsp; 
					<small class="btn btn-secondary format d-inline-block m-0">
						<i class="fas fa-italic" aria-hidden="true" onclick="makeItalics('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Italicize"></i>
					</small>
					&nbsp; 
					<small class="btn btn-secondary format d-inline-block m-0">
						<i class="fas fa-quote-right" aria-hidden="true" onclick="makeQuote('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Quote"></i>
					</small>
					&nbsp;
					<small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="getGif();commentForm('post-text')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-original-title="Add GIF">GIF</span></small>
					&nbsp;
					<label class="btn btn-secondary format d-inline-block m-0" for="emoji-reply-btn">
						<div id="emoji-reply-btn" onclick="loadEmojis('post-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
					</label>

					<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-submit">
						<div id="filename-show-submit"><i class="far fa-image"></i></div>
						<input id="file-upload-submit" type="file" name="file2" accept="image/*" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} onchange="document.getElementById('filename-show-submit').innerHTML='image';" hidden>
					</label>		

					<pre></pre>
					<div class="form-text text-small"><a href="/formatting" target="_blank">Formatting help</a></div>
					<pre></pre>

					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="nsfwCheck" name="over_18">
						<label class="custom-control-label" for="nsfwCheck">+18</label>
					</div>
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="privateCheck" name="private">
						<label class="custom-control-label" for="privateCheck">Draft</label>
					</div>

					{% if v.paid_dues %}
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="clubCheck" name="club">
						<label class="custom-control-label" for="clubCheck">{{cc}} thread</label>
					</div>
					{% endif %}
					<pre>






					</pre>
				</div>

			</div>

		</div>

		<div class="container">
			<div class="row fixed-bottom bg-white border-top p-3" id="" style="z-index: 100; bottom: 0px; transition: bottom 220ms cubic-bezier(0, 0, 0.2, 1) 0s;">
				<div class="col">
					<a href="/" class="btn btn-secondary">Cancel</a>
				</div>
				<div class="col text-right">
					{% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %}
					<button class="btn btn-outline-purple" id="create_button" type="submit" disabled>Post</button>
				</div>
			</div>
		</div>

	</form>

</div>
{% endblock %}

{% block modals %}

{% include "emoji_modal.html" %}
{% include "gif_modal.html" %}

{% endblock %}

{% block scripts %}

<script defer src="https://cdn.jsdelivr.net/npm/marked@3.0.8/lib/marked.min.js"></script>

<script defer src="/assets/js/submit.js?v=72"></script>

{% endblock %}