{% extends 'blog/partials/base.html' %} {% block content %}
{% load static %}
{% load tz %}
{% load sha256 %}
<div id="post-actions-bar" class="mtsbitem" style="margin-top: 12px;">
    <a class="pa-btn" href="#">Home</a>
    <a class="pa-btn" href="#comments">Opinions</a>
    <a class="pa-btn" href="javascript:;" onclick="lightsOff()">Focus <img id="lightsStatus" data-status="off" src="{% static 'images/site/off.png' %}" alt="Off" style="height: 11px; position: relative; top: 2px;"></a>
    <a class="pa-btn" href="javascript:;" onclick="blindMode()">Spectacles <img id="blindStatus" data-status="off" src="{% static 'images/site/off.png' %}" alt="Off" style="height: 11px; position: relative; top: 2px;"></a>
    {% comment %} <a class="pa-btn" id="translate-jp" href="javascript:;">
        <img src="{% static 'images/icons/translate.png' %}" alt="Translate to Japanese" style="height: 11px; width: 11px; margin-right: 5px; position: relative; top: 1px;">
        {% if request.session.language == 'jp' %}
            Translate to English
        {% else %}
            Translate to Japanese
        {% endif %}
    </a> {% endcomment %}
</div>
<div id="article">
    <h1 style="text-align: left; color: #f4ebff;">
        {{ post.title }}
    </h1>
    <div class="author-info" style="margin-top: 0;">
        {% with post.author.userprofile_set.first as userprofile %}
            <span style="background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif');" class="post-profile-image"></span>
        {% endwith %}
        <span>
            <a href="" style="font-weight: bold;">
                {{ post.author.first_name }} {{ post.author.last_name }}
            </a>
        </span>
        <span>posted in</span>
        <span>
            <a href="#/{{ post.category.slug }}" style="">
                {{ post.category }}
            </a>
        </span>
        <span style="margin-left: 4px;"><b>|</b></span>
        <span style="margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
        <span style="margin-left: 4px;"><b>|</b></span>
        <span style="margin-left: 4px;">{{ post.views }} view{% if not post.views == 1%}s{% endif %}</span>

    </div>
    <p>
        {% for tag in post.tags.all %}
            <a class="tag" href="#">{{ tag.name }}</a>
        {% endfor %}
    </p>

    <div id="article-body">
        {{ post.first_paragraph | safe }}
        <img style="border-radius: 8px;" src="{% url 'ignis:post_image' '710' post.id %}.gif" alt="Post Image for {{ post.title }}" id="arpi_" class="block">
        <hr>
        {{ post.body | safe }}
    </div>
</div>

<div id="rss_subscribe" class="mtsbitem" style="
padding: 20px;
border: white 1px dashed;
border-radius: 4px;
background: #ffffff0d;
">
    <h1 style="margin-top: 0">Liked this post? Wanna stay updated?</h1>
    <p>Subscribe to my RSS feed to get the latest updates from this weblog. Copy and paste the following link into your favorite RSS reader:</p>
    <pre style="display: inline-block; margin-right: 20px;">https://shi.foo/rss/</pre><button onclick="copyToClipboard('https://shi.foo/rss/')" class="button button-special">Copy URL</button>
</div>

{% if read_next %}
<h2 class="mtsbitem" style="clear: both;">Read Next</h2>
<div id="read-next">
    <div class="post">
        <div class="post-header">
            <h1 style="margin: auto !important;"><a style="color: #f4ebff;" href="#">{{ read_next.title }}</a></h1>
            <div class="author-info">
                {% with read_next.author.userprofile_set.first as userprofile %}
                    <span style="background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif');" class="post-profile-image"></span>
                {% endwith %}
                <span>
                    <a href="#" style="font-weight: bold;">
                        {{ read_next.author.first_name }} {{ read_next.author.last_name }}
                    </a>
                </span>
                <span>posted in</span>
                <span>
                    <a href="#" style="">
                        {{ read_next.category }}
                    </a>
                </span>
                <span style="margin-left: 4px;"><b>|</b></span>
                <span style="margin-left: 4px;">{% localtime on %}{{ read_next.date | date:"M d, Y" }}{% endlocaltime %}</span>
            </div>
        </div>
        <div class="post-body">
            <img class="post-image post-image-l" src="{% url 'ignis:post_image' '350' read_next.id %}.gif">
            {{ read_next.excerpt | safe }}
        </div>
        <div class="post-actions" style="clear: both;">
            <a href="#">Continue Reading</a> | <a href="##comments">{{ read_next.num_comments }}
                Opinion{% if not read_next.num_comments == 1 %}s{% endif %}</a>
        </div>
    </div>
</div>
{% endif %}
<h2 class="mtsbitem" style="clear: both;">Comments
    <a href="#header" class="pa-btn" style="float: right; margin-top: 0px; text-transform: capitalize; font-weight: normal;">
        Back to Top
    </a>
</h2>
{% if comments %}
<div id="comments" style="clear: both;">
    {% for comment in comments %}
        <div id="comment-{{ comment.id }}">
            <table>
                <tr>
                    <td style="width: 60px; vertical-align: top;">
                        <img src="{% static 'images/avatars/' %}{{ comment.avatar_url }}.gif" alt="Profile Picture" style="width: 50px; border-radius: 50%;">
                        {% if not comment.user %}
                        <img src="{% static 'images/site/unknown.png' %}" alt="Anonymous User" class="little-staus">
                        {% else %}
                        <img src="{% static 'images/site/check.png' %}" alt="Registered User" class="little-staus" style="">
                        {% endif %}
                    </td>
                    <td style="vertical-align: top; width: 668px;">
                        <div style="margin-bottom: 13px; border-bottom: dashed 1px white; padding-bottom: 13px;">
                            <a class="notranslate" {% if comment.user%}href="#"{% endif %}>{% if comment.user %}{{ comment.user.username }}{% else %}{{ comment.anonymous_user.name }}{% endif %}</a> on <em>{{ comment.created_at | date:"M d, Y" }}</em>
                            {% if comment.edited %}
                                <em>(Edited)</em>
                            {% endif %}
                            {% if comment.user == user %}
                                &nbsp;&nbsp;
                                <a href="javascript:;" onclick="editComment({{ comment.id }})">Edit</a>
                                &nbsp;&nbsp;
                                <a href="#" onclick="return confirm('Are you sure you want to delete this comment?')">Delete</a>
                            {% endif %}
                            {% if comment.anonymous_user.name and comment.anonymous_user.email and comment.anonymous_user.token and comment.anonymous_user.token == request.COOKIES.anonymous_token|sha256 %}
                                &nbsp;&nbsp;
                                <a href="javascript:;" onclick="editComment({{ comment.id }})">Edit</a>
                                &nbsp;&nbsp;
                                <a href="#" onclick="return confirm('Are you sure you want to delete this comment?')">Delete</a>
                            {% endif %}
                        </div>
                        <div id="comment-body-{{ comment.id }}" class="comment notranslate">
                            {{ comment.processed_body|safe }}
                        </div>
                        {% if comment.user == user %}
                        <div id="edit-form-{{ comment.id }}" style="display: none; margin-bottom: 20px;">
                            <form action="#" method="POST">
                                {% csrf_token %}
                                <input type = "hidden" name="comment_id" value="{{ comment.id }}">
                                <textarea class="notranslate" name="body" id="body" cols="78" rows="10" style="width: 640px; display: block; margin-bottom: 10px;">{{ comment.body }}</textarea>
                                <input type="submit" value="Update" class="button button-special">
                                <input type="button" value="Cancel" onclick="cancelEdit({{ comment.id }})" class="button">
                            </form>
                        </div>
                        {% endif %}
                        {% if comment.anonymous_user.name and comment.anonymous_user.email and comment.anonymous_user.token and comment.anonymous_user.token == request.COOKIES.anonymous_token|sha256 %}
                        <div id="edit-form-{{ comment.id }}" style="display: none; margin-bottom: 20px;">
                            <form action="#" method="POST">
                                {% csrf_token %}
                                <input type = "hidden" name="comment_id" value="{{ comment.id }}">
                                <textarea class="notranslate" name="body" id="body" cols="78" rows="10" style="width: 640px; display: block; margin-bottom: 10px;">{{ comment.body }}</textarea>
                                <input type="submit" value="Update" class="button button-special">
                                <input type="button" value="Cancel" onclick="cancelEdit({{ comment.id }})" class="button">
                            </form>
                        </div>
                        {% endif %}
                    </td>
                </tr>
            </table>
        </div>
    {% endfor %}
</div>
{% else %}
<div id="comments" style="clear: both;">
    <p><em>Sadly, there are no comments yet. Be the first to leave one!</em></p>
</div>
{% endif %}

{% if user.is_authenticated %}
<div id="new-comment"  class="mtsbitem">
    <h2>Leave a Comment</h2>
    {% if messages %}
    {% for message in messages %}
    {% if 'spam' in message.tags %}
        <p style="color: #ffb6b6;">Your comment was not allowed as it was marked as possible spam. If you think this is a mistake, please contact me at <a href="mailto:webmaster@thatcomputerscientist.com">webmaster@thatcomputerscientist.com</a>.</p>
    {% endif %}
    {% endfor %}
    {% endif %}
    <form action="#" method="POST">
        {% csrf_token %}
        <textarea required name="comment" id="comment" cols="88" rows="10" style="width: 710px; display: block; margin-bottom: 15px;" placeholder="Your comment here..."></textarea>
        <div id="comment-tips" style="    /* background-color: #2d1d3d; */
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 6px;
        margin-top: -10px;
        border: solid 1px white; width: calc(100% - 20px);">
            <p onclick="toggleTips()" style="cursor: pointer; margin: 0;"><span style="border-bottom: dotted 1px white;" class="noselect">Text Markup Tips &gt;</span></p>
            <div id="tips" style="display: none;">
                <p>
                    This site uses a custom built markup format for comments. It's very similar to Markdown. Only certain types of markup are allowed. Here's a list of what you can do:
                </p>

                <ul style="list-style-type: disc; margin: 0;padding: 0; margin: 5px 0px 0px 30px;">
                    <li>Wrap text in double underscores (__) to make it <i>italic</i>.
                        <br>
                        e.g. <code>__italic__</code>
                        <br><br>
                    </li>
                    <li>Wrap text in double asterisks (**) to make it <b>bold</b>.
                        <br>
                        e.g. <code>**bold**</code>
                        <br><br>
                    </li>
                    <li>Wrap text in double tildes (~~) to <s>strikethrough</s> it.
                        <br>
                        e.g. <code>~~strikethrough~~</code>
                        <br><br>
                    </li>
                    <li>Wrap text in triple backticks (<code>```</code>) to make it a code block:
                        <br>
                        e.g. 
<pre>
    ```
    code block
    ```
</pre>
                or define with language as:
<pre>
    ```lang-&lt;language&gt;
    code block
    ```
</pre> 
                        e.g. lang-python, lang-java, lang-javascript, etc.
                        <br><br><b>PS:</b> Tags for code block (<code>```</code>) must be contained on their respective individual lines. Only the language definition tag can be on the same line as the opening tag.
                        <br><br>
                    </li>
                    <li>Wrap text in double dollar sign ($$) to make it a math block and single dollar sign ($) to make it inline math. You can use LaTeX syntax.
                        <br>
                        e.g. <code>$$\frac{1}{2}$$</code> or <code>$\frac{1}{2}$</code>
                        <br><br>
                    </li>
                </ul>
                <p style="margin-top: -7px;">Any links if deemed safe by <a href="https://developers.google.com/safe-browsing" target="_blank">Google Safe Browsing</a> will be highlighted automatically. Rest of the content will remain in plain text. Also, free speech is good and all, but please keep it civil.</p>
            </div>
        </div>
        <input type="submit" value="Submit" class="button button-special">
    </form>
    
</div>
{% else %}
<div id="new-comment" class="mtsbitem">
    <h2>Leave a Comment</h2>
    {% if messages %}
    {% for message in messages %}
    {% if 'spam' in message.tags %}
        <p style="color: #ffb6b6;">Your comment was not allowed as it was marked as possible spam. If you think this is a mistake, please contact me at <a href="mailto:webmaster@thatcomputerscientist.com">webmaster@thatcomputerscientist.com</a>.</p>
    {% endif %}
    {% endfor %}
    {% endif %}
    <p id="ancmClick">You must be <em>logged in</em> to leave a comment. Or, you can <a href="javascript:;" onclick="toggleAnon()">leave an anonymous comment</a>.</p>
    <div  id="anonymous-comment-form" style="display: none;">
    <form action="#" method="POST">
        {% csrf_token %}
        <div id="anonymous-comment-area">
            <div id="anonymous-profile-info">
                <div>
                    <label for="anonymous-name"><b>Name </b> <i>{% if request.COOKIES.anonymous_name and request.COOKIES.anonymous_email and request.COOKIES.anonymous_token %}(Pre-Filled){% else %}(Required){% endif %}</i>:</label>
                    <input required type="text" name="anonymous-name" id="anonymous-name" value="{{ request.COOKIES.anonymous_name }}" placeholder="Display name" style="margin-right: 15px;">
                    {% if request.COOKIES.anonymous_name and request.COOKIES.anonymous_email and request.COOKIES.anonymous_token %}
                        <a href="javascript:;" onclick="toggleCreds()">Change Credentials</a>
                    {% endif %}
                </div>
                <div id="creds" {% if request.COOKIES.anonymous_name and request.COOKIES.anonymous_email and request.COOKIES.anonymous_token %} style="display: none;" {% endif %}>
                    <div>
                        <label for="anonymous-email"><b>Email</b> <i>{% if request.COOKIES.anonymous_email %}(Pre-Filled){% else %}(Optional){% endif %}</i>:</label>
                        <input type="text" name="anonymous-email" id="anonymous-email" value="{{ request.COOKIES.anonymous_email }}" placeholder="Your email address">   
                    </div>
                    <div>
                        <input type="hidden" name="anonymous-token" id="anonymous-token" value="{{ request.COOKIES.anonymous_token }}">
                        <label for="new-anonymous-token"><b>New Secret Token</b> <i>{% if request.COOKIES.anonymous_token %}(Pre-Filled){% else %}(Optional){% endif %}</i>:</label>
                        <input type="text" name="new-anonymous-token" id="new-anonymous-token" value="" placeholder="New Secret Token">
                        <p><small>You do not fill your secret token everytime you comment. Set it only once and change when needed.</small></p>
                    </div>
                </div>
            </div>
        </div>
        <textarea required name="anonymous-comment" id="anonymous-comment" cols="88" rows="10" style="width: 710px; display: block; margin: 15px 0;" placeholder="Your comment here..."></textarea>
        <div id="comment-tips" style="    /* background-color: #2d1d3d; */
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 6px;
        margin-top: -10px;
        border: solid 1px white; width: calc(100% - 20px);">
            <p onclick="toggleTips()" style="cursor: pointer; margin: 0;"><span style="border-bottom: dotted 1px white;" class="noselect">Text Markup Tips &gt;</span></p>
            <div id="tips" style="display: none;">
                <p>
                    This site uses a custom built markup format for comments. It's very similar to Markdown. Only certain types of markup are allowed. Here's a list of what you can do:
                </p>

                <ul style="list-style-type: disc; margin: 0;padding: 0; margin: 5px 0px 0px 30px;">
                    <li>Wrap text in double underscores (__) to make it <i>italic</i>.
                        <br>
                        e.g. <code>__italic__</code>
                        <br><br>
                    </li>
                    <li>Wrap text in double asterisks (**) to make it <b>bold</b>.
                        <br>
                        e.g. <code>**bold**</code>
                        <br><br>
                    </li>
                    <li>Wrap text in double tildes (~~) to <s>strikethrough</s> it.
                        <br>
                        e.g. <code>~~strikethrough~~</code>
                        <br><br>
                    </li>
                    <li>Wrap text in triple backticks (<code>```</code>) to make it a code block:
                        <br>
                        e.g. 
<pre>
    ```
    code block
    ```
</pre>
                or define with language as:
<pre>
    ```lang-&lt;language&gt;
    code block
    ```
</pre> 
                        e.g. lang-python, lang-java, lang-javascript, etc.
                        <br><br><b>PS:</b> Tags for code block (<code>```</code>) must be contained on their respective individual lines. Only the language definition tag can be on the same line as the opening tag.
                        <br><br>
                    </li>
                    <li>Wrap text in double dollar sign ($$) to make it a math block and single dollar sign ($) to make it inline math. You can use LaTeX syntax.
                        <br>
                        e.g. <code>$$\frac{1}{2}$$</code> or <code>$\frac{1}{2}$</code>
                        <br><br>
                    </li>
                </ul>
                <p style="margin-top: -7px;">Any links if deemed safe by <a href="https://developers.google.com/safe-browsing" target="_blank">Google Safe Browsing</a> will be highlighted automatically. Rest of the content will remain in plain text. Also, free speech is good and all, but please keep it civil.</p>
            </div>
        </div>
        <div id="comment-gotchas" style="    /* background-color: #2d1d3d; */
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 6px;
        margin-top: -10px;
        border: solid 1px white; width: calc(100% - 20px);">
            <p onclick="toggleGotchas()" style="cursor: pointer; margin: 0;"><span style="border-bottom: dotted 1px white;" class="noselect">Anonymous Commenting Gotchas &gt;</span></p>
            <div id="gotchas" style="display: none;">
                <p>Athough its cool to be anonymous, there are a few things which will not work if you choose to comment anonymously:</p>
                <ul>
                    <li>Custom Email and Token allow you to edit / delete your comments from other devices. This information will be stored locally and the site will remember your information, so you don't have to enter it again.</li>
                    <li>If you do not fill the email and secret token fields, a random (non-existent) email and secret token will be generated for you. As long as you do not clear your browser data, you will be able to edit your comment later.</li>
                    <li>Anytime, you wish to update your name, just change it in the name field. This will update your name for all your previous comments as well.</li>
                    <li>Anytime, you wish to change your secret token, this can be done by entering a new secret token in the 'Credentials' area. It will be stored locally and the site will remember your information, so you don't have to enter it again.</li>
                    <li>If you lose your secret token, that's basically permanent damage. You can always set a new secret token for the same email, but you will not be able to edit your previous comments.</li>
                    <li>You will not be able to customize your avatar. You will be assigned a random site specific avatar.</li>
                    <li>If anytime, you wish to <a href="#">register</a> for a full account, you can do so with the same email address. However, your previous comments will not be migrated to your new account.</li>
                </ul>
            </div>
        </div>
        <input type="submit" value="Submit" class="button button-special">
        <input type="button" value="Close" class="button" onclick="toggleAnon()">
    </form>
    {% comment %} <br>
        <button class="button" onclick="cd()">Clear Form Data</button> {% endcomment %}
    </div>
</div>

{% endif %}
{% endblock %}
{% block scripts %}
<script type="text/javascript">
    var onImage = "{% static 'images/site/on.png' %}";
    var offImage = "{% static 'images/site/off.png' %}";
    {% if request.COOKIES.anonymous_name and request.COOKIES.anonymous_email and request.COOKIES.anonymous_token %}
        $('#ancmClick').toggle();
        $('#anonymous-comment-form').toggle();
    {% endif %}
</script>
<script type="text/javascript" src="{% static 'js/postHandler.js' %}"></script>
{% include 'blog/partials/mathjax.html' %}
{% endblock %}