{% extends "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">

			<h2 class="h5" name="referral">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' class="form-control" 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" 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' class="form-control" 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' class="form-control" 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">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' class="form-control" 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 for="newtab">Open Threads In New Tabs</label>
					</div>

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

						<div class="custom-control custom-switch">
							<input type="checkbox" class="custom-control-input" id="newtab" name="newtab"{% if v.newtab %} checked{% endif %} onchange="post_toast('/settings/profile?newtab='+document.getElementById('newtab').checked);">
							<label class="custom-control-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 class="custom-control custom-switch">
							<input type="checkbox" class="custom-control-input" id="newtabexternal" name="newtabexternal"{% if v.newtabexternal %} checked{% endif %} onchange="post_toast('/settings/profile?newtabexternal='+document.getElementById('newtabexternal').checked);">
							<label class="custom-control-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 for="nitter">Use Nitter</label>
					</div>

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

						<div class="custom-control custom-switch">
							<input type="checkbox" class="custom-control-input" id="nitter" name="nitter"{% if v.nitter %} checked{% endif %} onchange="post_toast('/settings/profile?nitter='+document.getElementById('nitter').checked);">
							<label class="custom-control-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 Old Reddit</label>
					</div>

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

						<div class="custom-control custom-switch">
							<input type="checkbox" class="custom-control-input" id="oldreddit" name="oldreddit"{% if v.oldreddit %} checked{% endif %} onchange="post_toast('/settings/profile?oldreddit='+document.getElementById('oldreddit').checked);">
							<label class="custom-control-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 class="custom-control custom-switch">
							<input type="checkbox" class="custom-control-input" id="controversial" name="controversial"{% if v.controversial %} checked{% endif %} onchange="post_toast('/settings/profile?controversial='+document.getElementById('controversial').checked);">
							<label class="custom-control-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="slurreplacer">Disable +18 Warnings</label>
						</div>

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

							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="over18" name="over18"{% if v.over_18 %} checked{% endif %} onchange="post_toast('/settings/profile?over18='+document.getElementById('over18').checked);document.getElementById('filter-nsfw-option').classList.toggle('d-none')">
								<label class="custom-control-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 class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="slurreplacer" name="slurreplacer"{% if v.slurreplacer %} checked{% endif %} onchange="post_toast('/settings/profile?slurreplacer='+document.getElementById('slurreplacer').checked);">
								<label class="custom-control-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 class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="hidevotedon" name="hidevotedon"{% if v.hidevotedon %} checked{% endif %} onchange="post_toast('/settings/profile?hidevotedon='+document.getElementById('hidevotedon').checked);">
								<label class="custom-control-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-control rounded" id="filters-text" aria-label="With textarea"
									placeholder="Add your own custom content filters."
									rows="3" name="filters" form="custom-filter" maxlength="1000">{{v.custom_filter_list}}</textarea>
								</div>
								<div class="d-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>

</div>

</div>

{% endblock %}