{% extends 'changelog/master.twig' %}
{% from '_layout/comments.twig' import comments_section %}

{% set is_valid = change|length > 0 %}
{% set title = 'Changelog » ' ~ (is_valid ? 'Change #' ~ change.change_id : 'Unknown Change') %}

{% if is_valid %}
    {% set canonical_url = '/changelog.php?c=' ~ change.change_id %}
    {% set manage_link = '/manage/changelog.php?v=change&c=' ~ change.change_id %}
    {% set description = change.change_log %}
{% endif %}

{% block content %}
    <div class="container">
        <div class="container__title">
            {{ title }}
        </div>
        <div class="changelog__content">
            {% if is_valid %}
                <div class="changelog__change" id="#c{{ change.change_id }}">
                    <div class="changelog__change__line"
                        style="{{ change.action_colour|html_colour('--accent-colour') }}">
                        <div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_get_css_contrast }}"
                            style="{{ change.action_colour|html_colour('--accent-colour') }}">
                            {{ change.action_name }}
                        </div>

                        <div class="changelog__change__log">
                            <div class="changelog__change__log__text">
                                {{ change.change_log }}
                            </div>
                        </div>
                    </div>

                    <div class="changelog__change__row">
                        <div class="changelog__change__column changelog__change__column--user-info">
                            <a class="changelog__change__user" href="/profile.php?u={{ change.user_id }}">
                                <div class="avatar changelog__change__user__avatar"
                                    style="background-image:url('/profile.php?u={{ change.user_id }}&amp;m=avatar')">
                                </div>

                                <div class="changelog__change__user__info">
                                    <div class="changelog__change__user__name" style="{{ change.user_colour|html_colour }}">
                                        {{ change.username }}
                                    </div>

                                    <div class="changelog__change__user__title">
                                        {{ change.user_title }}
                                    </div>
                                </div>
                            </a>

                            <a  class="changelog__change__date"
                                href="/changelog.php?d={{ change.change_date }}">
                                <time datetime="{{ change.change_created|date('c') }}"
                                     title="{{ change.change_created|date('r') }}">
                                    {{ change.change_created|time_diff }}
                                </time>
                            </a>
                        </div>

                        <div class="changelog__change__column changelog__change__column--change-info">
                            <div class="changelog__change__text">
                                {% if change.change_text|length >= 1 %}
                                    {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
                                {% else %}
                                    <p>This change has no additional notes.</p>
                                {% endif %}
                            </div>

                            <ul class="changelog__change__tags">
                                {% for tag in tags %}
                                    <li class="changelog__change__tag"
                                        title="{{ tag.tag_description }}">
                                        <a href="/changelog.php?t={{ tag.tag_id }}" class="changelog__change__tag__link">
                                            {{ tag.tag_name }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="changelog__none">
                    The requested change could not be found.
                </div>
            {% endif %}
        </div>
    </div>

    <script>
        window.addEventListener('load', () => {
            if (!CSS.supports('writing-mode', 'sideways-lr'))
                document.getElementsByClassName('changelog__change__action')[0].title = 'This is supposed to be sideways, but your browser doesn\'t support that.';
        });
    </script>

    {% if comments is defined %}
        <div class="container">
            <div class="container__title">
                Comments for {{ change.change_date }}
            </div>
            {{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
        </div>
    {% endif %}
{% endblock %}