{% extends 'admin/base.html' %}
{% block _title %}{{ _('Crosspost') }}{% endblock %}
{% set crosspost_link = 'active' %}
{% block _content %}
	<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
		<h2 id="general" class="mb-2 fw-normal">{{ _('Crosspost') }}</h2>
		<p class="fs-5 h3 text-body-secondary mb-3">{{ _('Automatically crosspost answers to social media') }}</p>
		<h3 class="fw-light mb-2 d-flex align-items-center gap-2">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 64 64">
				<path fill="currentColor" d="M12.088 23.868a6.734 6.732 0 0 1-2.88 2.866L25.02 42.602l3.812-1.93Zm20.857 20.93-3.812 1.932 8.012 8.04a6.734 6.732 0 0 1 2.88-2.866z"></path>
				<path fill="currentColor" d="m51.24 30.147-8.952 4.535.66 4.22 10.128-5.131a6.734 6.732 0 0 1-1.837-3.624Zm-14.15 7.168L15.926 48.038a6.734 6.732 0 0 1 1.837 3.624l19.989-10.127z"></path>
				<path fill="currentColor" d="M30.284 10.9 20.071 30.833l3.016 3.027L33.9 12.755a6.734 6.732 0 0 1-3.616-1.854zm-12.87 25.117-5.172 10.095a6.734 6.732 0 0 1 3.615 1.855l4.573-8.925z"></path>
				<path fill="currentColor" d="M9.12 26.778a6.734 6.732 0 0 1-3.364.703 6.734 6.732 0 0 1-.65-.068l3.02 19.316a6.734 6.732 0 0 1 3.365-.703 6.734 6.732 0 0 1 .65.068z"></path>
				<path fill="currentColor" d="M17.779 51.758a6.734 6.732 0 0 1 .07 1.356 6.734 6.732 0 0 1-.71 2.656l19.318 3.099a6.734 6.732 0 0 1-.07-1.356 6.734 6.732 0 0 1 .71-2.656Z"></path>
				<path fill="currentColor" d="m53.144 33.841-8.917 17.402a6.734 6.732 0 0 1 3.617 1.855l8.916-17.402a6.734 6.732 0 0 1-3.616-1.855z"></path>
				<path fill="currentColor" d="M40.983 9.229a6.734 6.732 0 0 1-2.88 2.866L51.91 25.953a6.734 6.732 0 0 1 2.88-2.867z"></path>
				<path fill="currentColor" d="M28.38 7.206 10.922 16.05a6.734 6.732 0 0 1 1.837 3.624l17.456-8.844a6.734 6.732 0 0 1-1.837-3.624Z"></path>
				<path fill="currentColor" d="M38.07 12.111a6.734 6.732 0 0 1-3.42.731 6.734 6.732 0 0 1-.589-.062l1.546 9.898 4.22.677zm-1.564 16.322 3.656 23.402a6.734 6.732 0 0 1 3.315-.678 6.734 6.732 0 0 1 .705.077L40.726 29.11Z"></path>
				<path fill="currentColor" d="M12.772 19.748a6.734 6.732 0 0 1 .075 1.377 6.734 6.732 0 0 1-.7 2.637l9.909 1.59 1.947-3.801zm16.984 2.726-1.948 3.803 23.413 3.759a6.734 6.732 0 0 1-.068-1.341 6.734 6.732 0 0 1 .718-2.67z"></path>
				<circle fill="currentColor" cx="35.017" cy="6.12" r="6.12"></circle>
				<circle fill="currentColor" cx="57.878" cy="29.062" r="6.12"></circle>
				<circle fill="currentColor" cx="43.111" cy="57.88" r="6.12"></circle>
				<circle fill="currentColor" cx="11.124" cy="52.749" r="6.12"></circle>
				<circle fill="currentColor" cx="6.122" cy="20.759" r="6.12"></circle>
			</svg>
			{{ _('Fediverse') }}
		</h3>
		<div class="form-check form-switch mb-3">
			<input
			class="form-check-input"
			type="checkbox"
			name="_crosspost.fediverse.enabled"
			id="_crosspost.fediverse.enabled"
			value="{{ cfg.crosspost.fediverse.enabled }}"
			role="switch"
			{% if cfg.crosspost.fediverse.enabled %}checked{% endif %}>
			<input type="hidden" id="crosspost.fediverse.enabled" name="crosspost.fediverse.enabled" value="{{ cfg.crosspost.fediverse.enabled }}">
			<label for="_crosspost.fediverse.enabled" class="form-check-label">{{ _('Enabled') }}</label>
		</div>
		<a href="{{ const.docsUrl }}/integrations/fediverse/setup" class="btn btn-secondary mb-3">{{ _("Setup guide") }} <i class="bi bi-box-arrow-up-right ms-1"></i></a>
		<div class="form-group mb-3">
			<label class="form-label" for="crosspost.fediverse.instance">{{ _('Instance domain') }}</label>
			<input type="text" id="crosspost.fediverse.instance" name="crosspost.fediverse.instance" value="{{ cfg.crosspost.fediverse.instance }}" class="form-control" required>
			<p class="form-text">{{ _('Your instance domain') }}</p>
		</div>
		<div class="form-group mb-3">
			<label class="form-label" for="crosspost.fediverse.visibility">{{ _('Visibility') }}</label>
			<select id="crosspost.fediverse.visibility" name="crosspost.fediverse.visibility" class="form-select">
				<option value="public"{% if cfg.crosspost.fediverse.visibility == 'public' %} selected{% endif %}>{{ _('Public') }}</option>
				<option value="unlisted"{% if cfg.crosspost.fediverse.visibility == 'unlisted' %} selected{% endif %}>{{ _('Unlisted') }}</option>
				<option value="private"{% if cfg.crosspost.fediverse.visibility == 'private' %} selected{% endif %}>{{ _('Followers-only') }}</option>
				<option value="direct"{% if cfg.crosspost.fediverse.visibility == 'direct' %} selected{% endif %}>{{ _('Mentioned-only') }}</option>
			</select>
			<p class="form-text">{{ _('What visibility to use for automatic posts') }}
		</div>
		<div class="form-group mb-4">
			<label class="form-label" for="crosspost.fediverse.cw">{{ _('Content warning') }}</label>
			<input type="text" id="crosspost.fediverse.cw" name="crosspost.fediverse.cw" value="{{ cfg.crosspost.fediverse.cw }}" class="form-control">
			<p class="form-text">{{ _('What content warning to use for automatic posts; leave blank for no content warning') }}</p>
		</div>
		<h4 class="fw-light">{{ _("Credentials") }}</h4>
		<p class="text-body-secondary mb-2">{{ _("These are generated by the setup script and usually don't need to be changed manually") }}</p>
		<button type="button" class="btn btn-secondary mb-3" onclick="resetCredentials()"><i class="bi bi-eraser me-1"></i> {{ _('Reset') }}</button>
		<div class="form-group mb-3">
			<label class="form-label" for="crosspost.fediverse.client.id">{{ _('Client ID') }}</label>
			<input autocomplete="off" type="password" id="crosspost.fediverse.client.id" name="crosspost.fediverse.client.id" value="{{ cfg.crosspost.fediverse.client.id }}" class="form-control credential">
		</div>
		<div class="form-group mb-3">
			<label class="form-label" for="crosspost.fediverse.client.secret">{{ _('Client secret') }}</label>
			<input autocomplete="off" type="password" id="crosspost.fediverse.client.secret" name="crosspost.fediverse.client.secret" value="{{ cfg.crosspost.fediverse.client.secret }}" class="form-control credential">
		</div>
		<div class="form-group mb-3">
			<label class="form-label" for="crosspost.fediverse.token">{{ _('Access token') }}</label>
			<input autocomplete="off" type="password" id="crosspost.fediverse.token" name="crosspost.fediverse.token" value="{{ cfg.crosspost.fediverse.token }}" class="form-control credential">
		</div>
		{% include 'snippets/admin/saveBtn.html' %}
	</form>
{% endblock %}
{% block _scripts %}
<script>
	function resetCredentials() {
		elems = document.querySelectorAll(".credential");
		elems.forEach(el => {
			el.value = "";
		})
		saveConfig();
		showToast("{{ _('Credentials reset') }}", "success");
	}
	// fix handling checkboxes
	document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
		checkbox.addEventListener('change', function() {
			checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
		});
	});
</script>
{% endblock %}