{% extends 'changelog/master.twig' %}
{% from 'macros.twig' import container_title, avatar %}
{% from '_layout/comments.twig' import comments_section %}

{% set title = 'Changelog » Change #' ~ change_info.id %}
{% set canonical_url = url('changelog-change', {'change': change_info.id}) %}
{% set manage_link = url('manage-changelog-change', {'change': change_info.id}) %}
{% set description = change_info.summary %}

{% block content %}
    <div class="container changelog__log changelog__action--{{ change_info.action }}">
        <div class="changelog__log__action">
            {{ change_info.actionText }}
        </div>

        <div class="changelog__log__text">
            {{ change_info.summary }}
        </div>
    </div>

    <div class="container changelog__change"{% if change_user_colour is not null %} style="--accent-colour: {{ change_user_colour }}"{% endif %}>
        <div class="changelog__change__info">
            <div class="changelog__change__info__background"></div>
            <div class="changelog__change__info__content">
                {% if change_user_info.id|default(null) is not null %}
                    <div class="changelog__change__user">
                        <a class="changelog__change__avatar" href="{{ url('user-profile', {'user': change_user_info.id}) }}">
                            {{ avatar(change_user_info.id, 60, change_user_info.name) }}
                        </a>

                        <div class="changelog__change__user__details">
                            <a class="changelog__change__username" href="{{ url('user-profile', {'user': change_user_info.id}) }}">{{ change_user_info.name }}</a>
                            <a class="changelog__change__userrole" href="{{ url('user-list', {'role': change_user_info.displayRoleId}) }}">{{ change_user_info.title }}</a>
                        </div>
                    </div>
                {% endif %}

                <a class="changelog__change__date" href="{{ url('changelog-index', {'date': change_info.date}) }}">
                    Created
                    <time datetime="{{ change_info.createdTime|date('c') }}" title="{{ change_info.createdTime|date('r') }}">
                        {{ change_info.createdTime|time_format }}
                    </time>
                </a>

                {% if change_tags|length > 0 %}
                    <ul class="changelog__change__tags">
                        {% for tag in change_tags %}
                            <li class="changelog__change__tag" title="{{ tag.description }}">
                                <a href="{{ url('changelog-index', {'tags': tag.id}) }}" class="changelog__change__tag__link">
                                    {{ tag.name }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>
        </div>

        <div class="changelog__change__text markdown">
            <h1>{{ title }}</h1>

            {% if change_info.body is not empty %}
                {{ change_info.body|escape|parse_text(2)|raw }}
            {% else %}
                <p>This change has no additional notes.</p>
            {% endif %}
        </div>
    </div>

    <div class="container">
        {{ container_title('<i class="fas fa-comments fa-fw"></i> Comments for ' ~ change_info.date) }}
        {{ comments_section(comments_info, canonical_url) }}
    </div>
{% endblock %}