<!DOCTYPE html>
{% extends "base.html" %}
{% load humanize %}
{% block head %}{% endblock %}
{% block content %}
		<div style="width: 100%;">
			<div style="float:left; display: inline-block;">
				<a href="{% url 'forum_threads' %}"> << Go Back</a>
			</div>
			<div style="float:right;display:inline-block;">

				<div class="pagination">
						<span class="step-links">
								{% if posts.has_previous %}
										<a href="?page=1">&lt;&lt;</a>
										<a href="?page={{ posts.previous_page_number }}">&lt;</a>
								{% endif %}

								<span class="current">
										Page {{ posts.number }} of {{ posts.paginator.num_pages }}
								</span>

								{% if posts.has_next %}
										<a href="?page={{ posts.next_page_number }}">&gt;</a>
										<a href="?page={{ posts.paginator.num_pages }}">&gt;&gt;</a>
								{% endif %}
						</span>
				</div>
			</div>
		</div>

		<div style="clear:both;"></div>

		<h2>{{ thread_category }} > {{ thread_name }}</h2>
		<!-- STANDARD-TABLE -->

	<table class="row-spacing standard-table" style="width:100%; table-layout: fixed;">
		<colgroup>
			<col span="1" style="width: 15%;">
			<col span="1" style="width: 70%;">
		</colgroup>
		{% for post in posts %}
		<tr>
			<td style="border-right: 0px; text-align: center;">
				<small>
					<a href="{% url 'user' post.created_by.id %}"><b>{{ post.created_by }}</b></a> {% if post.created_by.flair %}({{ post.created_by.flair }}) {% endif %}<br>
					<img src="{{ post.created_by.avatar }}" alt="" class="avatar" style="margin-top: 5px;"><br>
					joined {{ post.created_by.date_joined|naturaltime }}
				</small>
			</td>
			<td style='vertical-align: top; border-left: 0px;'>
				<small style="color:grey;">{{ post.created_at|naturaltime }}</small>
				<hr>
				{{ post.content|safe }}
			</td>
		</tr>
		{% endfor %}
	</table>
		<!-- MOBILE-TABLE -->

			<table class="row-spacing mobile-table" style="width: 100%; min-width:100%;">
				{% for post in posts %}
				<tr>
					<td style='vertical-align: top; overflow-wrap: anywhere; width: 100%;'>
						<small style="color: grey;">
							<div class="clearfix">
								<div style="float:left; margin-right: 10px;">
									<img src="{{ post.created_by.avatar }}" alt="" class="avatar" style="margin-top: 2px; width: 40px; height:auto;">
								</div>
								<div>
									<a href="{% url 'user' post.created_by.id %}"><b>{{ post.created_by }}</b></a> {% if post.created_by.flair %}({{ post.created_by.flair }}) {% endif %} <br>
									{{ post.created_at|naturaltime }}
								</div>

							</div>
						</small>

						<hr style="margin-top: -7px;">
						{{ post.content|safe }}
					</td>
				</tr>
				{% endfor %}
			</table>
    <br>

		<div style="width: 100%;">
			<div style="float:left; display: inline-block;">
				<a href="{% url 'forum_threads' %}"> << Go Back</a>
			</div>
			<div style="float:right;display:inline-block;">

				<div class="pagination">
						<span class="step-links">
								{% if posts.has_previous %}
										<a href="?page=1">&lt;&lt;</a>
										<a href="?page={{ posts.previous_page_number }}">&lt;</a>
								{% endif %}

								<span class="current">
										Page {{ posts.number }} of {{ posts.paginator.num_pages }}
								</span>

								{% if posts.has_next %}
										<a href="?page={{ posts.next_page_number }}">&gt;</a>
										<a href="?page={{ posts.paginator.num_pages }}">&gt;&gt;</a>
								{% endif %}
						</span>
				</div>
			</div>
		</div>
		<div style="clear:both;"></div>
    <h3 style="margin-bottom:-7px;">Post Reply:</h3>
    <small>The text editor uses markdown. To learn how to use markdown <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">go here</a></small>
    <br>
    <a onclick="document.getElementById('id_content').value += ' ✝️'">✝️</a>
    <a onclick="document.getElementById('id_content').value += ' 📖'">📖</a>
    <a onclick="document.getElementById('id_content').value += ' 🙏'">🙏</a>
    <a onclick="document.getElementById('id_content').value += ' ⛪'">⛪</a>
    <a onclick="document.getElementById('id_content').value += ' 🕊️'">🕊️</a>
    <a onclick="document.getElementById('id_content').value += ' 😃'">😃</a>
    <a onclick="document.getElementById('id_content').value += ' 😁'">😁</a>
    <a onclick="document.getElementById('id_content').value += ' 😆'">😆</a>
    <a onclick="document.getElementById('id_content').value += ' 😅'">😅</a>
    <a onclick="document.getElementById('id_content').value += ' 😂'">😂</a>
    <a onclick="document.getElementById('id_content').value += ' 🥲'">🥲</a>
    <a onclick="document.getElementById('id_content').value += ' 🥹'">🥹</a>
    <a onclick="document.getElementById('id_content').value += ' 😃'">😃</a>
    <a onclick="document.getElementById('id_content').value += ' 😇'">😇</a>
    <a onclick="document.getElementById('id_content').value += ' 😉'">😉</a>
    <a onclick="document.getElementById('id_content').value += ' 😍'">😍</a>
    <a onclick="document.getElementById('id_content').value += ' 😛'">😛</a>
    <a onclick="document.getElementById('id_content').value += ' 🤨'">🤨</a>
    <a onclick="document.getElementById('id_content').value += ' 🧐'">🧐</a>
    <a onclick="document.getElementById('id_content').value += ' 😎'">😎</a>
    <a onclick="document.getElementById('id_content').value += ' 😏'">😏</a>
    <a onclick="document.getElementById('id_content').value += ' 😕'">😕</a>
    <a onclick="document.getElementById('id_content').value += ' 🙁'">🙁</a>
    <a onclick="document.getElementById('id_content').value += ' ☹️'">☹️</a>
    <a onclick="document.getElementById('id_content').value += ' 🥺'">🥺</a>
    <a onclick="document.getElementById('id_content').value += ' 😢'">😢</a>
    <a onclick="document.getElementById('id_content').value += ' 😭'">😭</a>
    <a onclick="document.getElementById('id_content').value += ' 😠'">😠</a>
    <a onclick="document.getElementById('id_content').value += ' 😡'">😡</a>
    <a onclick="document.getElementById('id_content').value += ' 🤬'">🤬</a>
    <a onclick="document.getElementById('id_content').value += ' 🤯'">🤯</a>
    <a onclick="document.getElementById('id_content').value += ' 😳'">😳</a>
    <a onclick="document.getElementById('id_content').value += ' 🥵'">🥵</a>
    <a onclick="document.getElementById('id_content').value += ' 🥶'">🥶</a>
    <a onclick="document.getElementById('id_content').value += ' 😱'">😱</a>
    <a onclick="document.getElementById('id_content').value += ' 😨'">😨</a>
    <a onclick="document.getElementById('id_content').value += ' 🫣'">🫣</a>
    <a onclick="document.getElementById('id_content').value += ' 🤢'">🤢</a>
    <a onclick="document.getElementById('id_content').value += ' 🤮'">🤮</a>
    <a onclick="document.getElementById('id_content').value += ' 😈'">😈</a>
    <a onclick="document.getElementById('id_content').value += ' 💀'">💀</a>
    <a onclick="document.getElementById('id_content').value += ' ☠️'">☠️</a>
    {{ form.media }}
    <form method="post">
        {% csrf_token %}
        <div class="markdownx">
            <textarea name="content" cols="40" rows="10" required id="id_content" class="markdownx-editor" data-markdownx-editor-resizable="True" data-markdownx-urls-path="/markdownx/markdownify/" data-markdownx-upload-urls-path="/markdownx/upload/" data-markdownx-latency="500" style="max-height:150px; width:100%;">
</textarea>
            {% if can_be_anon %}
                <input type="checkbox" name="anonymous">
                Submit Anonymously?
                <br>
            {% endif %}
                <input type="submit" value="Submit" />
                <button type="button" onclick="toggleDisplay('markdownx-preview')">Show/Hide Preview</button>
                <br>
                <br>
                <div id="markdownx-preview"
                     class="markdownx-preview"
                     style="display:none;
                            width:100%;
                            font-size: 12px;
                            margin-bottom:5px;
                            padding-top:0px"></div>
            </div>
        </form>
    {% endblock %}
