{% extends "CHRISTMAS/settings.html" %}

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

{% block content %}

<div class="row">

	<div class="col col-lg-8">

		<div class="settings">

			{% if v.grinch %}

			<h2 class="label text-black">Grinch Mode</h2>

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

				<div>
					<input type="checkbox" id="grincheffect" name="grincheffect"{% if v.grincheffect %} checked{% endif %} onchange="post_toast('/settings/profile?grincheffect='+document.getElementById('grincheffect').checked);">
					<label class="inline-block pl-2 text-gray-400" for="grincheffect">
						Disable holigay music.
					</label>
				</div>

			</div>

			{% endif %}

			<h2 class="label text-black">Highlight New Comments</h2>

			<div class="body w-lg-100 mb-4">

				<div>
					<input type="checkbox" id="highlightcomments" name="highlightcomments"{% if v.highlightcomments %} checked{% endif %} onchange="post_toast('/settings/profile?highlightcomments='+document.getElementById('highlightcomments').checked);">
					<label class="inline-block pl-2 text-gray-400" for="highlightcomments">
						Highlight new comments with a red dot since your last visit to a thread.
					</label>
				</div>

			</div>

			<h2 class="label text-black">
				Compact mode
				<span class="badge badge-yellow">New!</span>
			</h2>

			<div class="mb-4">
				<input type="checkbox" id="compactMode" name="compact" {% if v.compact %}checked{% endif %} onchange="post_toast('/settings/profile?compact='+this.checked)">
				<label class="inline-block pl-2 text-gray-400" for="compactMode">View posts in a comapct format.</label>
			</div>

			<h2 class="label text-black">Card view</h2>

			<div>
				<input type="checkbox" id="cardview" name="cardview"{% if v.cardview %} checked{% endif %} onchange="post_toast('/settings/profile?cardview='+document.getElementById('cardview').checked);">
				<label class="inline-block pl-2 text-gray-400" for="cardview">View posts in a larger, card format.</label>
			</div>

			<h2 class="h5">Frontpage Size</h2>

			<div class="settings-section rounded">
				<div class="d-lg-flex border-bottom">
					<div class="title w-lg-25">
						<label for="frontsize">Frontpage Size</label>
					</div>

					<div class="body w-lg-100">
						<p>Change how many posts appear on every page.</p>
						<div class="input-group mb2">
							<select id='frontsize' form="profile-settings" name="frontsize" onchange="post_toast('/settings/profile?frontsize='+document.getElementById('frontsize').value)">
							{% for entry in [25, 50, 100] %}
								<option value="{{entry}}"{{' selected' if v.frontsize==entry}}>{{entry}}</option>
							{% endfor %}
						</select>
						</div>

					</div>

				</div>
			</div>


			<h2 class="h5 text-black" name="referral">Default Sorting and Time Filter</h2>

			<div class="settings-section rounded">

					<div class="d-lg-flex border-bottom">
						<div class="title w-lg-25">
							<label for="defaultsortingcomments">Default Sorting for Comments</label>
						</div>

						<div class="body w-lg-100">
							<p>Change the default sorting for comments.</p>
							<div class="input-group mb2">
								<select id='defaultsortingcomments' form="profile-settings" name="defaultsortingcomments" onchange="post_toast('/settings/profile?defaultsortingcomments='+document.getElementById('defaultsortingcomments').value)">
								{% for entry in ["new", "old", "top", "bottom", "controversial"] %}
									<option value="{{entry}}"{{' selected' if v.defaultsortingcomments==entry}}>{{entry}}</option>
								{% endfor %}
							</select>
							</div>

						</div>

					</div>

					<div class="d-lg-flex border-bottom">
						<div class="title w-lg-25">
							<label for="defaultsorting">Default Sorting for Posts</label>
						</div>

						<div class="body w-lg-100">
							<p>Change the default sorting for posts.</p>
							<div class="input-group mb2">
								<select id='defaultsorting' form="profile-settings" name="defaultsorting" onchange="post_toast('/settings/profile?defaultsorting='+document.getElementById('defaultsorting').value)">
								{% for entry in ["hot", "new", "old", "top", "bottom", "controversial", "comments"] %}
								<option value="{{entry}}"{{' selected' if v.defaultsorting==entry}}>{{entry}}</option>
								{% endfor %}
							</select>
							</div>

						</div>

				</div>

					<div class="d-lg-flex border-bottom">
						<div class="title w-lg-25">
							<label for="defaulttime" class="label">Default Time Filter for Posts</label>
						</div>

						<div class="body w-lg-100">
							<p>Change the default time filter for posts.</p>
							<div class="input-group mb2">
								<select id='defaulttime' form="profile-settings" name="defaulttime" onchange="post_toast('/settings/profile?defaulttime='+document.getElementById('defaulttime').value)">
								{% for entry in ["hour", "day", "week", "month", "year", "all"] %}
									<option value="{{entry}}"{{' selected' if v.defaulttime==entry}}>{{entry}}</option>
								{% endfor %}
							</select>
							</div>

						</div>

				</div>

			</div>

			<h2 class="h5">Tab Behaviour</h2>

			<div class="settings-section rounded">

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

					<div class="title w-lg-25">
						<label class="label" for="newtab">Open Threads In New Tabs</label>
					</div>

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

						<div>
							<input type="checkbox" id="newtab" name="newtab"{% if v.newtab %} checked{% endif %} onchange="post_toast('/settings/profile?newtab='+document.getElementById('newtab').checked);">
							<label class="label" for="newtab"></label>
						</div>

						<span class="text-small-extra text-muted">Enable if you would like to automatically open threads in new tabs.</span>

					</div>

				</div>


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

					<div class="title w-lg-25">
						<label for="newtabexternal">Open External Links In New Tabs</label>
					</div>

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

						<div>
							<input type="checkbox" id="newtabexternal" name="newtabexternal"{% if v.newtabexternal %} checked{% endif %} onchange="post_toast('/settings/profile?newtabexternal='+document.getElementById('newtabexternal').checked);">
							<label class="label" for="newtabexternal"></label>
						</div>

						<span class="text-small-extra text-muted">Enable if you would like to automatically open external links in new tabs.</span>

					</div>

				</div>



			</div>


			<h2 class="h5">Twitter Links</h2>

			<div class="settings-section rounded">

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

					<div class="title w-lg-25">
						<label class="label" for="nitter">Use Nitter</label>
					</div>

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

						<div>
							<input type="checkbox" id="nitter" name="nitter"{% if v.nitter %} checked{% endif %} onchange="post_toast('/settings/profile?nitter='+document.getElementById('nitter').checked);">
							<label class="label" for="nitter"></label>
						</div>

						<span class="text-small-extra text-muted">Enable if you would like to automatically convert twitter.com links to nitter.net links.</span>

					</div>

				</div>

			</div>


			<h2 class="h5">Reddit Links</h2>

			<div class="settings-section rounded">

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

					<div class="title w-lg-25">
						<label for="oldreddit">Use Teddit.net</label>
					</div>

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

						<div>
							<input type="checkbox" id="teddit" name="teddit"{% if v.teddit %} checked{% endif %} onchange="post_toast('/settings/profile?teddit='+document.getElementById('teddit').checked);">
							<label class="label" for="teddit"></label>
						</div>

						<span class="text-small-extra text-muted">Enable if you would like to automatically convert reddit.com links to teddit.net links.</span>

					</div>

				</div>

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

					<div class="title w-lg-25">
						<label for="oldreddit">Use Old Reddit</label>
					</div>

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

						<div>
							<input type="checkbox" id="oldreddit" name="oldreddit"{% if v.oldreddit %} checked{% endif %} onchange="post_toast('/settings/profile?oldreddit='+document.getElementById('oldreddit').checked);">
							<label class="label" for="oldreddit"></label>
						</div>

						<span class="text-small-extra text-muted">Enable if you would like to automatically convert reddit.com links to old.reddit.com links.</span>

					</div>

				</div>

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

					<div class="title w-lg-25">
						<label for="controversial">Sort by Controversial</label>
					</div>

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

						<div>
							<input type="checkbox" id="controversial" name="controversial"{% if v.controversial %} checked{% endif %} onchange="post_toast('/settings/profile?controversial='+document.getElementById('controversial').checked);">
							<label class="label" for="controversial"></label>
						</div>

						<span class="text-small-extra text-muted">Enable if you would like to automatically sort reddit.com links by controversial.</span>

					</div>

				</div>
			</div>

			<h2 class="h5">Content Filters</h2>

				<div class="settings-section rounded">


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

						<div class="title w-lg-25">
							<label for="sigs_disabled">Disable signatures</label>
						</div>

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

							<div>
								<input type="checkbox" id="sigs_disabled" name="sigs_disabled"{% if v.sigs_disabled %} checked{% endif %} onchange="post_toast('/settings/profile?sigs_disabled='+document.getElementById('sigs_disabled').checked);">
								<label class="label" for="sigs_disabled"></label>
							</div>

							<span class="text-small-extra text-muted">Hide user signatures.</span>

						</div>

					</div>



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

						<div class="title w-lg-25">
							<label for="slurreplacer">Disable +18 Warnings</label>
						</div>

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

							<div>
								<input type="checkbox" id="over18" name="over18"{% if v.over_18 %} checked{% endif %} onchange="post_toast('/settings/profile?over18='+document.getElementById('over18').checked);">
								<label class="label" for="over18"></label>
							</div>

							<span class="text-small-extra text-muted">Enable if you would like to not get a warning before viewing +18 content.</span>

						</div>

					</div>



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

						<div class="title w-lg-25">
							<label for="slurreplacer">Slur Replacer</label>
						</div>

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

							<div>
								<input type="checkbox" id="slurreplacer" name="slurreplacer"{% if v.slurreplacer %} checked{% endif %} onchange="post_toast('/settings/profile?slurreplacer='+document.getElementById('slurreplacer').checked);">
								<label class="label" for="slurreplacer"></label>
							</div>

							<span class="text-small-extra text-muted">Enable if you would like to automatically replace slurs.</span>

						</div>

					</div>


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

						<div class="title w-lg-25">
							<label for="hidevotedon">Hide Posts Voted On</label>
						</div>

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

							<div>
								<input type="checkbox" id="hidevotedon" name="hidevotedon"{% if v.hidevotedon %} checked{% endif %} onchange="post_toast('/settings/profile?hidevotedon='+document.getElementById('hidevotedon').checked);">
								<label class="label" for="hidevotedon"></label>
							</div>

							<span class="text-small-extra text-muted">Enable if you would like to automatically hide posts you have voted on from your frontpage.</span>

						</div>

					</div>

					<div class="d-lg-flex">

						<div class="title w-lg-25">
							<label for="filters-text">Custom Filters</label>
						</div>

						<div class="body w-lg-100">
							<form id="custom-filter" action="/settings/filters" method="post">
								<input type="hidden" name="formkey" value="{{v.formkey}}">
									<small>Hides matching posts from the frontpage and collapses matching comments.</small>
								<div class="input-group mb-2">
									<textarea class="form-input rounded" id="filters-text" aria-label="With textarea"
									placeholder="Add your own custom content filters."
									rows="3" name="filters" form="custom-filter" maxlength="1000">{% if v.custom_filter_list %}{{v.custom_filter_list}}{% endif %}</textarea>
								</div>
								<div class="flex">
									<small>Use a new line for each filter entry. Limit of 1000 characters.</small>
									<input class="btn btn-primary ml-auto" id="bioSave" type="submit" value="Save Changes">
								</div>
							</form>


						</div>

					</div>


				</div>

		</div>

</div>

</div>

{% endblock %}
