{% 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.header %}

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

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

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

                        <div class="changelog__change__user__details">
                            <a class="changelog__change__username" href="{{ url('user-profile', {'user': change_info.user.id}) }}">{{ change_info.user.username }}</a>
                            <a class="changelog__change__userrole" href="{{ url('user-list', {'role': change_info.user.displayRoleId}) }}">{{ change_info.user.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_diff }}
                    </time>
                </a>

                {% if change_info.tags|length > 0 %}
                    <ul class="changelog__change__tags">
                        {% for tag in change_info.tags %}
                            <li class="changelog__change__tag" title="{{ tag.description }}">
                                <a href="{{ url('changelog-tag', {'tag': 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.hasBody %}
                {{ change_info.parsedBody|raw }}
            {% else %}
                <p>This change has no additional notes.</p>
            {% endif %}
        </div>
    </div>

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