{% extends "default.html" %}

{% block pagetitle %}Chat CSS{% endblock %}

{% block content %}
	<div class="settings my-5 mx-3">
		<section>
			<a href="/chat/{{chat.id}}">
				<i class="fas fa-long-arrow-left mr-2"></i>Go back to chat
			</a>
			<h2 class="mt-4">Chat Custom CSS</h2>
			<div class="settings-section rounded mb-0">
				<p class="text-small text-muted pt-2 pl-3">Edit your chat's custom CSS</p>
				<div class="body d-lg-flex border-bottom">
					<div class="w-lg-100">
						<form id="chat-custom-css" action="/chat/{{chat.id}}/custom_css" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHR(this)">
							<input hidden name="formkey" value="{{v|formkey}}" class="notranslate" translate="no">
							<textarea autocomplete="off" class="form-control rounded" id="css-textarea" placeholder="Custom CSS" rows="3" name="css" form="chat-custom-css" maxlength="{{CSS_LENGTH_LIMIT}}">{% if chat.css %}{{chat.css}}{% endif %}</textarea>
							<small>Limit of {{CSS_LENGTH_LIMIT}} characters</small>
							<div class="d-flex mt-2">
								<input autocomplete="off" id="submit-btn" class="btn btn-primary ml-auto" type="submit" value="Save">
							</div>
						</form>
					</div>
				</div>
			</div>
		</section>
	</div>
{% endblock %}