{% set canReply =
    not ctx.topic.isLocked
    and currentUser is not null
    and currentUser.hasPermission(permission("CREATE_OWN_POST")) %}

{% set canEdit =
    currentUser is not null and (
        (
            ctx.topicAuthor is not null
            and currentUser.id == ctx.topicAuthor.id
            and ctx.topicAuthor.hasPermission(permission("EDIT_OWN_TOPIC"))
        )
        or currentUser.hasPermission(permission("EDIT_OTHER_TOPIC"))
    ) %}

{% set couldEditPost =
    currentUser is not null
    and (
        currentUser.hasPermission(permission("EDIT_OWN_POST"))
        or currentUser.hasPermission(permission("EDIT_OTHER_POST"))
    ) %}

{% set canDelete =
    currentUser is not null and (
        (
            ctx.topicAuthor is not null
            and currentUser.id == ctx.topicAuthor.id
            and ctx.topicAuthor.hasPermission(permission("DELETE_OWN_TOPIC"))
        )
        or currentUser.hasPermission(permission("DELETE_OTHER_TOPIC"))
    ) %}

{% set title = ctx.topic.title %}
{% extends "base.twig" %}

{% block content %}

{% set formError = getAndClearFormError("updateTopic") %}
{% if formError %}
    {% include "components/alert_error.twig" with { message: formError } %}
{% endif %}
{% set formError = getAndClearFormError("lockTopic") %}
{% if formError %}
    {% include "components/alert_error.twig" with { message: formError } %}
{% endif %}
{% set formError = null %}

<hr color="silver" noshade>

<div class="page-header margin-top-0 clearfix">
    <div id="displayHeading">
        <h1>
            {% if ctx.topic.isLocked %}
                <span class="fa fa-lock text-muted" aria-hidden="true"></span>
            {% endif %}
            {{ ctx.topic.title }}
            <div class="pull-right text-normal">
                {%- if canEdit and not ctx.topic.isLocked -%}
                    <button id="btn-edit-title" class="seamless js-only m-r"><img src="/ui/theme-files/old/pencil.gif" width="16" height="16" draggable="false" alt="{{ __("Edit title") }}"></button>
                {%- endif -%}
                {%- if canReply -%}
                    <button id="btn-reply" class="seamless js-only m-r"><img src="/ui/theme-files/old/undo.gif" width="16" height="16" draggable="false" alt="{{ __("Reply") }}"></button>
                {%- endif -%}
                {%- if canEdit -%}
                    {%- if ctx.topic.isLocked -%}
                        <form action="?_action=locktopic" method="post" class="inline">{#
                            #}<input type="hidden" name="topic" value="{{ ctx.topic.id }}">{#
                            #}<input type="hidden" name="locked" value="false">{#
                            #}<button type="submit" class="seamless m-r"><img src="/ui/theme-files/old/lock_open.gif" width="16" height="16" draggable="false" alt="{{ __("Unlock topic") }}"></button>{#
                        #}</form>
                    {%- else -%}
                        <form action="?_action=locktopic" method="post" class="inline">{#
                            #}<input type="hidden" name="topic" value="{{ ctx.topic.id }}">{#
                            #}<input type="hidden" name="locked" value="true">{#
                            #}<button type="submit" class="seamless m-r"><img src="/ui/theme-files/old/lock.gif" width="16" height="16" draggable="false" alt="{{ __("Lock topic") }}"></button>{#
                        #}</form>
                    {%- endif -%}
                {%- endif -%}
                {%- if canDelete -%}
                    <form action="?_action=deletetopic" method="post" class="inline">{#
                        #}<input type="hidden" name="topic" value="{{ ctx.topic.id }}">{#
                        #}<button type="submit" class="seamless m-r"><img src="/ui/theme-files/old/garbage.gif" width="16" height="16" draggable="false" alt="{{ __("Delete topic") }}"></button>{#
                    #}</form>
                {%- endif -%}
            </div>
        </h1>
        {{ __("Started by %user% on %date%", {
            "user": (ctx.topicAuthor is not null) ? ('<a href="?_action=viewuser&amp;user=' ~ ctx.topicAuthor.id|url_encode|e("html") ~ '">' ~ ctx.topicAuthor.displayName|e("html") ~ '</a>') : __("(deleted)"),
            "date": '<span class="_time">' ~ ctx.topic.creationDate.format("c")|e("html") ~ '</span>',
        }) }}
    </div>
    {% if canEdit %}
        <form action="?_action=updatetopic" method="post" id="editHeading" style="display: none;" class="inline">
            <input type="hidden" name="topic" value="{{ ctx.topic.id }}">
            <table width="100%" cellspacing="0">
            <tr>
                <td width="100%">
                    <input type="text" class="fw h1" name="title" id="i_edit_title" data-original-value="{{ ctx.topic.title }}" value="{{ ctx.topic.title }}">
                </td>
                <td align="right">
                    <nobr>
                        <button type="submit" class="btn btn-success">{{ __("Save changes") }}</button>
                        <button type="button" id="topicTitleEditCancel">{{ __("Cancel") }}</button>
                    </nobr>
                </td>
            </tr>
            </table>
        </form>
    {% endif %}
</div>
<script>
{% if canEdit %}
$(function() {
    $("#btn-edit-title").click(function() {
        $("#displayHeading").hide();
        $("#editHeading").show();
        $("#i_edit_title").val($("#i_edit_title").attr("data-original-value")).focus();
    });
    $("#topicTitleEditCancel").click(function() {
        $("#displayHeading").show();
        $("#editHeading").hide();
    });
});
{% endif %}
</script>
{% if couldEditPost %}
<script>
$(function() {
    $("._edit-post").click(function() {
        var $post = $("#post-" + $(this).attr("data-post-id"));
        var $postContent = $post.find(".post-content");
        $("#i_edit_message").css("height", "").val($post.attr("data-text"));
        $("#i_edit_post").val($(this).attr("data-post-id"));
        $("#diag-edit-post").modal();
    });
    $("#diag-edit-post").on("shown.bs.modal", function() {
        $("#i_edit_message").focus();
    });
});
{% endif %}
{% if canReply %}
$(function() {
    function focusReplyBox() {
        var msgInput = $("#i_message");
        msgInput[0].scrollIntoView();
        msgInput.focus();
    }
    $("#btn-reply").click(function() {
        focusReplyBox();
    });
    $("._reply-post").click(function() {
        var text = $("#post-" + $(this).attr("data-post-id")).attr("data-text");
        var val = $("#i_message").val();
        var lines = text.split("\n");
        for (var i = 0; i < lines.length; ++i)
            val += "\n> " + lines[i];
        val += "\n\n";
        $("#i_message").val(val.replace(/^\n+/, ""));
        focusReplyBox();
    });
});
{% endif %}
</script>

<table border="1" cellspacing="0" cellpadding="4" bordercolor="silver" width="100%" bgcolor="white">
{% for item in ctx.allItems %}
    {% if item.type == "post" %}
        {% include "components/post.twig" with {
            post: item.post,
            postAuthor: item.postAuthor,
            topicAuthor: item.topicAuthor,
            topic: item.topic,
            attachments: item.attachments,
            hide_actions: false,
            hide_pfp: false,
        } %}
    {% elseif item.type == "logMessage" %}
        {% include "components/topic_log.twig" with {
            type: item.type,
            logMessage: item.logMessage,
            postAuthor: item.postAuthor,
            topicAuthor: item.topicAuthor,
            topic: item.topic,
            hide_actions: false,
            hide_pfp: false,
        } %}
    {% endif %}
{% endfor %}
</table>

{% if ctx.topic.isLocked %}
    <br>
    <table cellspacing="0" cellpadding="8" bgcolor="#FFCC99" border="1" bordercolor="#996633" width="100%">
    <tr><td align="center">
        <img src="/ui/theme-files/old/lock_large.gif" border="0" alt="" width="32" height="32" draggable="false"><br>
        <i>{{ __("This topic has been locked") }}</i>
    </td></tr>
    </table>
    <br>
{% elseif currentUser is not null %}
    {% set formId = "addpost" %}
    <h3 id="form">{{ __("Reply to this topic") }}</h3>
    {% set formError = getAndClearFormError(formId) %}
    {% if formError %}
        {% include "components/alert_error.twig" with { message: formError } %}
    {% endif %}
    <form action="{{ g.server.REQUEST_URI }}#form" method="post" enctype="multipart/form-data">
        <input type="hidden" name="form_id" value="{{ formId }}">
        
        <label for="i_message">{{ __("Message:") }}</label><br>
        {% include "components/post_editor.twig" with { value: "", name: "message", id: "i_message" } %}
        <br>
        <label for="i_files">{{ __("Attachments: <small>(max. %max_attachment_count% files, max. %max_attachment_size% MiB each)</small>", {
            "max_attachment_count": constant("MAX_ATTACHMENT_COUNT"),
            "max_attachment_size": constant("MAX_ATTACHMENT_SIZE") // (2**20),
        }) }}</label><br>
        <input type="file" name="files[]" id="i_files" multiple accept="*/*"><br>
        <br>
        <button type="submit">{{ __("Post reply") }}</button>
    </form>
{% else %}
    <br>
    <table cellspacing="0" cellpadding="8" bgcolor="lightskyblue" border="1" bordercolor="skyblue" width="100%">
    <tr><td align="center">
        <h3>{{ __("Log in to reply to this topic") }}</h3>
        <form action="." method="get" class="inline">
            <input type="hidden" name="_action" value="auth">
            <input type="hidden" name="next" value="{{ g.server.REQUEST_URI }}">
            <button type="submit">{{ __("Log in") }}</button>
        </form>
    </td></tr>
    </table>
    <br>
{% endif %}


{% endblock %}