{% extends "whispermaphone/page.html" %}
{% load static %}

{% block title %}Thoughts{% endblock %}

{% block navigation %}
    <h1 class="text" aria-current="page">Thoughts</h1>
    <a href="/about" class="text">About</a>{% if authenticated %}
    <a href="/post" class="text" style="border: none">Post</a>
{% endif %}
{% endblock %}

{% block head %}
<link rel="alternate" href="/feed" type="application/rss+xml" title="RSS">

<link href="{% static 'main/codehighlight.css' %}" rel="stylesheet">
{% endblock %}

{% block main %}
    {% if not first_page %}
        <nav class="history-nav top" aria-label="History Navigation">
            <ul>
            {% for page in pages %}
                {% if page.slug == current_page %}
                    <li><span class="current-page">{{ page.formatted_name }}</span></li>
                {% else %}
                    <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
                {% endif %}
            {% endfor %}
            </ul>
        </nav>
    {% endif %}

    {% load tz %}

    {% for thought in thoughts %}
        <div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{ thought.uuid }}">
            <div class="main">
                <pre class="main-text text">{{ thought.text }}</pre>
            </div>

            {% with file_type=thought.get_media_type %}
                {% if file_type or thought.extended_text.strip %}
                    <div class="extended">
                        {% if thought.extended_text.strip %}
                            <pre class="extended-text text">{{ thought.extended_text }}</pre>
                        {% endif %}
                        {% if file_type == "png" or file_type == "jpeg" %}
                            <img src="{{ thought.media.url }}" class="extended-media" alt="{{ thought.media_alt }}">
                        {% elif file_type == "m4a" or file_type == "mp3" or file_type == "aac" %}
                            <audio controls src="{{ thought.media.url }}" class="extended-media"></audio>
                        {% elif file_type == "mov" or file_type == "mp4" %}
                            <video src="{{ thought.media.url }}" class="extended-media"></video>
                        {% endif %}
                    </div>
                {% endif %}
            {% endwith %}
            <div class="thought-end">
                <span class="timestamp">
                    {% timezone thought.get_timezone %}
                        {{ thought.posted|time:"g:i a" }}
                        {{ thought.posted|date:"M d, Y" }},

                        UTC{{ thought.get_offset_hours }}
                        {{ thought.get_season }}
                    {% endtimezone %}
                </span>
                <span class="permalink">
                    <a class="button" href="/?show={{thought.uuid}}">Permalink</a>
                </span>
            </div>
            <hr>
        </div>
    {% endfor %}
{% endblock %}

{% block footer %}
<nav class="history-nav bottom" aria-label="History Navigation">
    <ul>
    {% for page in pages %}
        {% if page.slug == current_page %}
            <li><span class="current-page">{{ page.formatted_name }}</span></li>
        {% else %}
            <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
        {% endif %}
    {% endfor %}
    </ul>
</nav>
{% endblock %}

{% block scripts %}
    <script>
        const els = document.querySelectorAll(".thought");

        for (let el of els) {
            const extended = el.querySelector(".extended");

            if (extended) {
                //Hide extended text
                extended.classList.add("hidden");
                //Add button to show extended text
                if (extended.childNodes.length) {
                    const main = el.querySelector(".main");
                    const showMoreButton = document.createElement("button");
                    showMoreButton.appendChild(document.createTextNode("Show More"));
                    showMoreButton.classList.add("show-more");
                    showMoreButton.addEventListener("click", evt => {
                        // Remove ourself
                        showMoreButton.parentNode.removeChild(showMoreButton);
                        // Show the extended text
                        extended.classList.remove("hidden");
                    })
                    main.appendChild(showMoreButton);
                }
            }
        }

        const highlighted = document.querySelector(".highlighted");
        if (highlighted) {
            highlighted.scrollIntoView();
            const showMoreButton = highlighted.querySelector(".show-more");
            if (showMoreButton) {
                showMoreButton.click();
            }
        }
    </script>
{% endblock %}