<?php
	requireLib('bootstrap5');
	?>

<?php echoUOJPageHeader(UOJLocale::get('html to markdown')) ?>

<h1 class="h2">
	<?= UOJLocale::get('html to markdown') ?>
</h1>

<style>
#html, #markdown {
	font-family: Cascadia Mono, Ubuntu Mono, Roboto Mono, Jetbrains Mono, Fira Code, Consolas, '思源黑体 Regular', '思源宋体 Light', '宋体', 'Courier New', monospace;
	width: 100%;
	min-height: 300px;
}
</style>

<div class="card">
	<div class="card-body">
		<div class="row row-cols-1 row-cols-md-2">
			<div class="col">
				<textarea class="form-control" id="html" placeholder="input html here"></textarea>
			</div>
			<div class="col">
				<textarea data-no-autosize readonly class="form-control" id="markdown" placeholder="output markdown here" style="height: 100%"></textarea>
			</div>
		</div>
	</div>
	<div class="card-footer bg-transparent text-end">
		<a href="https://s2oj.github.io/#/user/apps/html2markdown" target="_blank">使用教程</a>
	</div>
</div>

<?= HTML::js_src('/js/h2m.js') ?>

<script>
$(document).ready(function() {
	$('#html').on('input', function() {
		$('#markdown').val(h2m($('#html').val(), { converter: 'Gfm' }));
	});
});
</script>

<?php echoUOJPageFooter() ?>