{% extends "settings.html" %}

{% block pagetitle %}Profile Settings - {{'SITE_NAME' | app_config}}{% endblock %}

{% block content %}
		<div class="flex flex-col space-y-4 sm:py-4 my-2.5 sm:my-0">

			<!-- Avatar section -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Avatar</h2>
					<div class="flex flex-col md:flex-row gap-3">
						<!-- Avatar -->
						<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-14 h-14 rounded object-cover">
						<!-- Form -->
						<div>
							<div class="flex space-x-3">
								<!-- Buttons -->
								<form action="/settings/images/profile" method="post" enctype="multipart/form-data">
									<input type="hidden" name="formkey" value="{{v.formkey}}">
									<label class="btn btn-gray">
										Change avatar
										<input {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} type="file" accept="image/*" hidden name="profile" onchange="form.submit()">
									</label>
								</form>
								{% if v.profileurl %}
								<div>
									<form action="/settings/delete/profile" method="post">
										<input type="hidden" name="formkey" value="{{v.formkey}}">
										<button type="submit" value="Delete" class="btn btn-red">
											<i class="fas fa-trash-alt fa-fw mr-1"></i>
											Delete
										</button>
									</form>
								</div>
								{% endif %}
							</div>
							<!-- Help text -->
							<p class="mt-2 text-xs text-gray-400 mt-3">
								JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.
							</p>
						</div>
					</div>
				</div>
				<!-- Banner section -->
				<div class="px-4 py-4 shadow-inset-t-white-10">
					<h2 class="label text-black">Banner</h2>
					<div class="flex flex-col md:flex-row gap-3">
						<!-- Avatar -->
						<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-48 h-20 rounded object-cover">
						<!-- Form -->
						<div>
							<div class="flex space-x-3">
								<!-- Buttons -->
								<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
									<input type="hidden" name="formkey" value="{{v.formkey}}">
									<label class="btn btn-gray">
										Change banner
										<input {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} type="file" accept="image/*" hidden name="banner" onchange="form.submit()">
									</label>
								</form>
								{% if v.bannerurl %}
								<div>
									<form action="/settings/delete/banner" method="post">
										<input type="hidden" name="formkey" value="{{v.formkey}}">
										<button type="submit" value="Delete" class="btn btn-red">
											<i class="fas fa-trash-alt fa-fw mr-1"></i>
											Delete
										</button>
									</form>
								</div>
								{% endif %}
							</div>
							<!-- Help text -->
							<p class="mt-2 text-xs text-gray-400 mt-3">
								JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.
							</p>
						</div>
					</div>
				</div>
			</div>

<!-- 			<div class="settings-section rounded">

				<div class="flex">

					<div class="title w-lg-75 text-md-center">
						<img loading="lazy" src="{{v.banner_url}}" class="banner-pic-135">
					</div>

					<div class="body w-lg-100 my-auto">

						<div class="flex">

							<div>
								<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
									<input type="hidden" name="formkey" value="{{v.formkey}}">
									<label class="btn btn-secondary text-capitalize mr-2 mb-0">
										Update<input type="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*" hidden name="banner" onchange="form.submit()">
									</label>
								</form>

							</div>

							<div>

								{% if v.bannerurl %}
								<form action="/settings/delete/banner" method="post">
									<input type="hidden" name="formkey" value="{{v.formkey}}">
									<button type="submit" value="Delete" class="btn btn-link fa-lg"><i class="far fa-trash-alt text-danger"></i></button>
								</form>{% endif %}

							</div>

						</div>

						<div class="text-small-extra text-muted mt-3">JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.</div>

					</div>

				</div>

			</div> -->

			<div class="rounded-lg bg-gray-100 border border-gray-300 shadow-inset-t-white-10 p-4">
				<h2 class="label text-black">Linked accounts</h2>
				<div class="flex flex-col space-y-2 divide-y divide-y-800">
					<div>
						{% if v.discord_id %}
						<form action="/settings/remove_discord" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<input type="submit" class="btn btn-red" value="Disconnect Discord">
						</form>
						<p class="mt-2 text-xs text-gray-400 mt-3">
							Disconnecting your Discord account will remove you from the {{'SITE_NAME' | app_config}} Discord server.
						</p>
						{% else %}
						<div class="w-[148px]">
							<a href="/discord" class="btn btn-gray">
								<i class="fab fa-discord fa-fw mr-1"></i>
								Link Discord
							</a>
						</div>
						<p class="mt-2 text-xs text-gray-400 mt-3">
							Link your Discord account to join the {{'SITE_NAME' | app_config}} Discord server.
						</p>
						{% endif %}
					</div>
				</div>
			</div>

			<!-- Referral & RSS -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Referral code</h2>
					<input type="text" onclick="this.select()" value="{{request.host_url}}signup?ref={{v.username}}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-80">
					<small class="block mt-1 text-gray-400">
						You have referred <strong>{{v.referral_count}}</strong> members.
						<a href="/badges" class="text-red-500">Learn more</a>.
					</small>
				</div>
				<div class="px-4 py-4">
					<h2 class="label text-black">RSS Feed</h2>
					<input type="text" onclick="this.select()" value="{{('/rss/hot/all') | full_link}}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-80">
					<small class="block mt-1 text-gray-400">
						You can change the feed by replacing <strong>hot</strong> with whatever sorting you want and <strong>all</strong> with whatever time filter you want.
					</small>
				</div>
			</div>

			<!-- Profile Username -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Username</h2>
					<form action="/settings/name_change" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="w-full md:w-80">
							<input type="text" name="name" class="form-input" value="{{v.username}}">
						</div>
						<small class="block mt-2 text-gray-400">3-25 characters, including letters, numbers, _ , and -</small>
						<small class="block mt-1 text-gray-400">
							Your original username will always stay reserved for you: <strong>{{v.original_username}}</strong>
						</small>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Change display name">
						</div>
					</form>
				</div>
			</div>

			<!-- Profile Anthem -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Profile Anthem</h2>
					<form action="/settings/song_change" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="w-full md:w-80">
							<input type="text" name="song" class="form-input" value="{% if v.song %}https://youtu.be/{{v.song}}{% endif %}" placeholder='Enter a youtube video link here'>
						</div>
						<small class="block mt-2 text-gray-400">Must be a youtube video link</small>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Change profile anthem">
						</div>
					</form>
				</div>
			</div>

			<!-- Username Color -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Username Color</h2>
					<form action="/settings/namecolor" id="color-code-form" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="w-full md:w-44">
							<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.namecolor %}{{v.namecolor}}{% endif %}">
						</div>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Change username color">
						</div>
					</form>
				</div>
			</div>

			{% if not v.flairchanged %}
			<!-- Flair -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Flair</h2>
					<form id="profile-settings" action="/settings/title_change" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="inline-block w-full md:w-80">
							<input id="customtitlebody" type="text" name="title" class="form-input" placeholder='Enter a flair here' value="{% if v.customtitleplain %}{{v.customtitleplain}}{% endif %}">
						</div>
						<button type="button" class="inline-block ml-2 text-gray-500 hover:text-gray-600" onclick="loadEmojis('customtitlebody')" 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">
								<i class="fas fa-smile-beam"></i>
						</button>
						<small class="block mt-2 text-gray-400">Limit of 100 characters</small>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Change flair">
						</div>
					</form>
				</div>
			</div>
			{% endif %}

			<!-- Title Color -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Flair Color</h2>
					<form action="/settings/titlecolor" id="color-code-form" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="w-full md:w-44">
							<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
						</div>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Change flair color">
						</div>
					</form>
				</div>
			</div>

			{% if v.verified %}
			<!-- Bluecheck Color -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Bluecheck Color</h2>
					<form action="/settings/titlecolor" id="color-code-form" method="post">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="w-full md:w-44">
							<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
						</div>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Change flair color">
						</div>
					</form>
				</div>
			</div>
			{% endif %}

			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Bio</h2>
					<form id="profile-bio" action="/settings/profile" method="post" enctype="multipart/form-data">
						<input type="hidden" name="formkey" value="{{v.formkey}}">
						<div class="input-group mb-2">
							<textarea  id="bio-text" class="form-input rounded" aria-label="With textarea" placeholder="Tell the community a bit about yourself." rows="3" name="bio" form="profile-bio" maxlength="1500">{% if v.bio %}{{v.bio}}{% endif %}</textarea>
						</div>
						<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
							<li>
								<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold">
									<i class="fas fa-bold fa-fw fa-sm"></i>
								</button>
							</li>
							<li>
								<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeItalics('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Italicize">
									<i class="fas fa-italic fa-fw fa-sm"></i>
								</button>
							</li>
							<li>
								<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeQuote('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Quote">
									<i class="fas fa-quote-right fa-fw fa-sm"></i>
								</button>
							</li>
							<li>
								<button type="button" class="text-gray-500 hover:text-gray-400" onclick="commentForm('bio-text');getGif()">
									<span class="font-bold text-sm text-uppercase" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</span>
								</button>
							</li>
							<li>
								<button type="button" class="text-gray-500 hover:text-gray-400" onclick="loadEmojis('bio-text')" 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">
									<i class="fas fa-smile-beam fa-fw fa-sm"></i>
								</button>
							</li>
						</ul>
						<!-- <div class="hidden">
							<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-bold" aria-hidden="true" onclick="makeBold('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold"></pre>
							&nbsp;
							<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-italic" aria-hidden="true" onclick="makeItalics('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize"></pre>
							&nbsp;
							<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-quote-right" aria-hidden="true" onclick="makeQuote('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote"></pre>
							&nbsp;
							<pre style="padding-top:0.7rem;line-height:1;" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="commentForm('bio-text');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</pre>
							&nbsp;
							<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('bio-text')" 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"></pre>
							&nbsp;
							<label class="inline-block ml-2 text-gray-500 hover:text-gray-200">
								<div id="filename-show"><i class="far fa-image"></i></div>
								<input id="file-upload" type="file" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*" onchange="document.getElementById('filename-show').innerHTML='image';" hidden>
							</label>
						</div> -->
						<small class="block mt-2 text-gray-400">Limit of 1500 characters</small>
						<div class="mt-4">
							<input class="ml-auto btn btn-gray" type="submit" value="Save bio">
						</div>
					</form>
				</div>
			</div>

			<!-- Privacy -->
			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
				<div class="px-4 py-4">
					<h2 class="label text-black">Privacy</h2>
					<div class="mb-4">
						<input type="checkbox" id="privateswitch" name="private"{% if v.is_private%} checked{% endif %} onchange="post_toast('/settings/profile?private='+document.getElementById('privateswitch').checked)">
						<label for="privateswitch" class="inline-block pl-2 text-gray-400">Hide my posts and comments from others and search engines.</label>
					</div>
					<div>
						<input type="checkbox" id="nofollowswitch" name="nofollow"{% if v.is_nofollow%} checked{% endif %} onchange="post_toast('/settings/profile?nofollow='+document.getElementById('nofollowswitch').checked)">
						<label for="nofollowswitch" class="inline-block pl-2 text-gray-400">Prevent other users from following you.</label>
					</div>
				</div>
			</div>


						<div class="settings-section rounded mb-0">

							<!-- <div class="body d-lg-flex border-bottom">

								<label class="text-black w-lg-25">Friends</label>
							
								<div class="w-lg-100">						
									<form id="profile-friends" action="/settings/profile" method="post" enctype="multipart/form-data">
										<input type="hidden" name="formkey" value="{{v.formkey}}">
										<div class="input-group mb-2">
											<textarea  id="friends-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter your friends on the site..." rows="3" name="friends" form="profile-friends" maxlength="1500">{% if v.friends %}{{v.friends}}{% endif %}</textarea>
										</div>
										<pre></pre>
										<div class="flex">
											<small>Limit of 500 characters</small>
											<input class="btn btn-primary ml-auto" id="friendsSave" type="submit" value="Save Changes">
										</div>
									</form>
								</div>
							
							</div> -->
							

							<!-- <div class="body d-lg-flex border-bottom">

								<label class="text-black w-lg-25">Enemies</label>
							
								<div class="w-lg-100">						
									<form id="profile-enemies" action="/settings/profile" method="post" enctype="multipart/form-data">
										<input type="hidden" name="formkey" value="{{v.formkey}}">
										<div class="input-group mb-2">
											<textarea  id="enemies-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter your enemies on the site..." rows="3" name="enemies" form="profile-enemies" maxlength="1500">{% if v.enemies %}{{v.enemies}}{% endif %}</textarea>
										</div>
										<pre></pre>
										<div class="flex">
											<small>Limit of 500 characters</small>
											<input class="btn btn-primary ml-auto" id="enemiesSave" type="submit" value="Save Changes">
										</div>
									</form>
								</div>
							
							</div> -->


							{% if v.patron or v.id == 1904 %}
							<div class="body d-lg-flex border-bottom">
								<label class="text-black w-lg-25">Signature</label>

								<div class="w-lg-100">						
									<form id="profile-sig" action="/settings/profile" method="post" enctype="multipart/form-data">
										<input type="hidden" name="formkey" value="{{v.formkey}}">
										<div class="input-group mb-2">
											<textarea  id="sig-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter a signature..." rows="3" name="sig" form="profile-sig" maxlength="200">{% if v.sig %}{{v.sig}}{% endif %}</textarea>
										</div>
										<div class="flex">
											<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-bold" aria-hidden="true" onclick="makeBold('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold"></pre>
											&nbsp;
											<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-italic" aria-hidden="true" onclick="makeItalics('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize"></pre>
											&nbsp;
											<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-quote-right" aria-hidden="true" onclick="makeQuote('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote"></pre>
											&nbsp;
											<pre style="padding-top:0.7rem;line-height:1;" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="commentForm('sig-text');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</pre>
											&nbsp;
											<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('sig-text')" 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"></pre>
										</div>
										<pre></pre>
										<div class="flex">
											<small>Limit of 200 characters</small>
											<input class="btn btn-primary ml-auto" id="sigSave" type="submit" value="Save Changes">
										</div>
									</form>
								</div>
								
							</div>
							{% endif %}

					</div>
					</div>
{% endblock %}

{% block modals %}
{% include "emoji_modal.html" %}
{% include "gif_modal.html" %}
{% endblock %}


{% block scripts %}
<script src="/assets/js/settings_profile.js?v=57"></script>

<script>
	document.onpaste = function(event) {
		var focused = document.activeElement;
		if (focused.id == 'bio-text') {
			f=document.getElementById('file-upload');
			files = event.clipboardData.files
			filename = files[0].name.toLowerCase()
			if (filename.endsWith(".jpg") || filename.endsWith(".jpeg") || filename.endsWith(".png") || filename.endsWith(".webp") || filename.endsWith(".gif"))
			{
				f.files = files;
				document.getElementById('filename-show').textContent = filename;
			}
		}
	}
</script>
{% endblock %}