{% extends "settings.html" %}
{% block pagetitle %}Profile Settings - {{SITE_TITLE}}{% 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 autocomplete="off" id='frontsize' class="form-control" form="profile-settings" name="frontsize" onchange="postToastSimple(this,'/settings/profile?frontsize='+document.getElementById('frontsize').value)">
							{% for entry in [15, 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 autocomplete="off" id='defaultsortingcomments' class="form-control" form="profile-settings" name="defaultsortingcomments" onchange="postToastSimple(this,'/settings/profile?defaultsortingcomments='+document.getElementById('defaultsortingcomments').value)">
								{% for entry in SORTS_COMMENTS %}
									<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 autocomplete="off" id='defaultsorting' class="form-control" form="profile-settings" name="defaultsorting" onchange="postToastSimple(this,'/settings/profile?defaultsorting='+document.getElementById('defaultsorting').value)">
								{% for entry in SORTS_POSTS %}
								<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 autocomplete="off" id='defaulttime' class="form-control" form="profile-settings" name="defaulttime" onchange="postToastSimple(this,'/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 Internal Links In New Tabs</label>
					</div>
					<div class="body w-lg-100">
						<div class="custom-control custom-switch">
							<input autocomplete="off" type="checkbox" class="custom-control-input" id="newtab" name="newtab"{% if v.newtab %} checked{% endif %} onchange="postToastSimple(this,'/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 links to other pages in the site 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 autocomplete="off" type="checkbox" class="custom-control-input" id="newtabexternal" name="newtabexternal"{% if v.newtabexternal %} checked{% endif %} onchange="postToastSimple(this,'/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 links to other sites 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 autocomplete="off" type="checkbox" class="custom-control-input" id="nitter" name="nitter"{% if v.nitter %} checked{% endif %} onchange="postToastSimple(this,'/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="reddit">Reddit Domain</label>
					</div>
					<div class="body w-lg-100">
						<p>Change the domain you would like to view reddit posts in.</p>
						<div class="input-group mb2">
							<select autocomplete="off" id='reddit' class="form-control" form="profile-settings" name="reddit" onchange="postToastSimple(this,'/settings/profile?reddit='+document.getElementById('reddit').value)">
							{% for entry in ['old.reddit.com', 'reddit.com', 'i.reddit.com', 'unddit.com', 'teddit.net', 'libredd.it'] %}
								<option value="{{entry}}"{{' selected' if v.reddit==entry}}>{{entry}}</option>
							{% endfor %}
						</select>
						</div>
					</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 autocomplete="off" type="checkbox" class="custom-control-input" id="controversial" name="controversial"{% if v.controversial %} checked{% endif %} onchange="postToastSimple(this,'/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="over18">Disable +18 Warnings</label>
						</div>

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

							<div class="custom-control custom-switch">
								<input autocomplete="off" type="checkbox" class="custom-control-input" id="over18" name="over18"{% if v.over_18 %} checked{% endif %} onchange="postToastSimple(this,'/settings/profile?over18='+document.getElementById('over18').checked);">
								<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="hidevotedon">Hide Posts Voted On</label>
						</div>

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

							<div class="custom-control custom-switch">
								<input autocomplete="off" type="checkbox" class="custom-control-input" id="hidevotedon" name="hidevotedon"{% if v.hidevotedon %} checked{% endif %} onchange="postToastSimple(this,'/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">
								{{forms.formkey(v)}}
									<small>Hides matching posts from the frontpage and collapses matching comments.</small>
								<div class="input-group mb-2">
									<textarea autocomplete="off" 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">{% if v.custom_filter_list %}{{v.custom_filter_list}}{% endif %}</textarea>
								</div>
								<div class="d-flex">
									<small>Use a new line for each filter entry. Limit of 1000 characters.</small>
									<input autocomplete="off" class="btn btn-primary ml-auto" id="bioSave" type="submit" value="Save Changes">
								</div>
							</form>


						</div>

					</div>


				</div>

		</div>

</div>

</div>

</div>

</div>

{% endblock %}
