<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="{{ url_for('static', filename='tachyons.min.css') }}">
	<script src="{{ url_for('static', filename='htmx.js') }}"></script>
	<script src="{{ url_for('static', filename='sweetalert2.js') }}"></script>
	
	{% if visjs_enabled %}
	
	<script src="{{ url_for('visjs.static', filename='vis-timeline-graph2d.min.js') }}"></script>
	<link href="{{ url_for('visjs.static', filename='vis-timeline-graph2d.min.css') }}" rel="stylesheet" type="text/css" />
	
	{% endif %}
	
	{% block head %}
	<title>{{ title | default('No Title') }}</title>
	{% endblock %}
	
	<link rel="stylesheet" href="{{ url_for('static', filename='theme/base.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='theme/user-14520320.css') }}">
	
	{% if opengraph_info %}
	{% for prop, content in opengraph_info.items() %}
	<meta property="og:{{prop}}" content="{{content}}" />
	{% endfor %}
	{% endif %}
	
<script>
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
})
</script>

</head>
<body>

<!--
Flexbox makes logical sense but we'll go with a table-based display

-->

<div class="nav" style="position: fixed; width: 25%; padding: 4px">
<ul>
	{% if nav_items %}
		{% for nav_item in nav_items|sort(attribute='order') %}
		<li><a href="{{ nav_item.href }}">{{ nav_item.label }}</a></li>
		{% endfor %}
	{% endif %}
	
	<!--
	<li><a href="javascript:document.body.classList.toggle('theme-dark')">Toggle Dark Mode</a></li>
	<li><a href="javascript:document.location.reload()">Refresh</a></li>
	-->
</ul>

{% if twitter_user or mastodon_user %}

{% include "partial/compose-form.html" %}


{% endif %}

{% if False %}
<!--
{% include "partial/media-upload-form.html" %}
-->
{% endif %}

<h2>Accounts</h2>

{% include "partial/user-picker.html" %}

{% if add_account_enabled %}
<a href="{{ url_for('get_login_html') }}">Add account</a>
{% endif %}

</div>

<div style="width: 75%; left:25%; position: absolute">

{% block content %}{% endblock %}

</div>
<footer style="position: absolute; bottom: -800px; right: 0; width: 100px;">
<p>
Powered by <a href="https://glitch.com/~hogumathi">Hogumathi</a>. Give a gift to the author with <a href="https://venmo.com/harlanji">Venmo</a> or become a <a href="https://patreon.com/harlanji">patron</a> for gifts
like early access and coupon codes for software on <a href="https://harlanji.gumroad.com">Gumroad</a>.
</p>
</footer>
</body>
</html>
