{% set canEdit =
    currentUser is not null
    and (
        (
            ctx.user.id == currentUser.id
            and currentUser.hasPermission(permission("EDIT_OWN_USER"))
        )
        or currentUser.hasPermission(permission("EDIT_OTHER_USER"))
    ) %}

{% set isOwnProfile =
    currentUser is not null
    and currentUser.id == ctx.user.id %}

{% set sUserPossessive = isOwnProfile ? "Your posts" : "%display_name%'s posts" %}

{% set emailPending = isOwnProfile and ctx.user.pendingEmail is not null %}

{% set title = ctx.user.displayName %}

{% extends "base.twig" %}

{% block content %}

<div class="clearfix page-header margin-top-0">
    <img class="pull-left margin-right" src="?_action=profilepicture&amp;user={{ ctx.user.id|url_encode }}" alt="{{ __("Profile picture") }}" width="64" height="64">
    <span class="h1">{{ ctx.user.displayName }}</span>
    {% if isOwnProfile %}
        <span class="label label-primary">{{ __("You") }}</span>
    {% endif %}<br>
    @{{ ctx.user.name }} &bull; <span class="text-muted">{{ __("Member since %join_date%", {
        "join_date": '<span class="_date">' ~ (ctx.dateJoined.format("c")|e("html")) ~ '</span>',
    }) }}</span>
</div>

{% if canEdit %}
<div class="row">
<div class="col-md-9">
{% endif %}

<h3>{{ __(sUserPossessive, {
    "display_name": ctx.user.displayName|e("html"),
}) }}</h3>

{% if ctx.posts|length > 0 %}

    <div class="post-container">
        <div class="post-container-posts">
            <div class="list-group margin-top">
                {% for post in ctx.posts %}
                    <a href="?_action=viewtopic&amp;topic={{ post.topicId|url_encode }}#post-{{ post.id|url_encode }}" class="list-group-item">
                        {% if hasAttachments %}
                            <span class="badge"><span class="fa fa-paperclip"></span></span>
                        {% endif %}
                        {{ renderPostSummary(post.content) }}<br>
                        <span class="text-muted">{{ __("posted on %post_date% in %topic%", {
                            "post_date": '<span class="_time">' ~ post.postDate.format("c")|e("html") ~ '</span>',
                            "topic": '<em>' ~
                                (ctx.topics[post.topicId] is not null and ctx.topics[post.topicId].isLocked ? '<span class="fa fa-lock text-muted" aria-hidden="true"></span> ' : '') ~
                                (ctx.topics[post.topicId] is not null ? ctx.topics[post.topicId].title : __("unknown"))|e("html") ~ '</em>',
                        }) }}</span>
                    </a>
                {% endfor %}
            </div>
        </div>
        <div class="post-container-controls">
            <button class="btn btn-default">{{ __("Show all posts") }}</button>
        </div>
    </div>
{% else %}
    <div class="well icon-well text-info margin-top margin-bottom">
        <span class="fa fa-info-circle text-info" aria-hidden="true"></span>
        <em>{{ __("This user has not posted anything yet") }}</em>
    </div>
{% endif %}

{% if canEdit %}
</div> <!-- .col-md-9 -->

<div class="col-md-3">
    <h3>{{ __("Edit profile") }}</h3>
    {% set formId = "update_profile" %}
    {% set formError = getAndClearFormError(formId) %}
    {% if formError %}
        {% include "components/alert_error.twig" with { message: formError } %}
    {% endif %}
    <form action="{{ g.server.REQUEST_URI }}" method="post" enctype="multipart/form-data">
        <input type="hidden" name="form_id" value="{{ formId }}">
        <div class="form-group">
            <label for="i_display_name">{{ __("Display name:") }}</label>
            <input required class="form-control" type="text" name="display_name" id="i_display_name" value="{{ ctx.user.displayName }}">
        </div>
        <div class="form-group">
            <label for="i_name">{{ __("Username:") }}</label>
            {% if ctx.lastNameChangeTooRecent %}
                <input class="form-control" type="text" id="i_name" value="{{ ctx.user.name }}" disabled>
                <small class="text-danger"><strong>{{ __("You can only change your username every 30 days!") }}</strong></small>
            {% else %}
                <input required class="form-control" type="text" name="name" id="i_name" value="{{ ctx.user.name }}">
            {% endif %}
        </div>
        <div class="form-group">
            <label for="i_email">{{ __("Email address:") }}</label>
            {% if emailPending %}
                <input class="form-control" type="email" id="i_email" value="{{ ctx.user.email }}" disabled>
            {% else %}
                <input required class="form-control" type="email" id="i_email" name="email" value="{{ ctx.user.email }}">
            {% endif %}
        </div>
        <div class="form-group">
            <label>{{ __("Profile picture:") }}</label>
            <div class="radio margin-top-0 {{ ctx.user.profilePicture is empty ? " disabled text-muted" }}">
                <label>
                    <input type="radio" name="pfp_action" id="pfp_action_1" value="keep"{{ ctx.user.profilePicture is not empty ? ' checked' : ' disabled' }}>
                    {{ __("Keep current profile picture") }}
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="pfp_action" id="pfp_action_2" value="remove"{{ ctx.user.profilePicture is empty ? ' checked' : '' }}>
                    {% if ctx.user.profilePicture is empty %}
                        {{ __("No profile picture") }}
                    {% else %}
                        {{ __("Remove profile picture") }}
                    {% endif %}
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="pfp_action" value="replace" id="pfp_action_3">
                    {{ __("Upload new profile picture") }}
                </label>
            </div>
            <input type="file" name="pfp" id="i_pfp" accept="image/png,image/jpeg" class="margin-left-3x small">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success">{{ __("Save changes") }}</button>
        </div>
    </form>
    {% if isOwnProfile %}
        <h3>{{ __("Change password") }}</h3>
        {% set formId = "update_password" %}
        {% set formError = getAndClearFormError(formId) %}
        {% if formError %}
            {% include "components/alert_error.twig" with { message: formError } %}
        {% endif %}
        <form action="{{ g.server.REQUEST_URI }}" method="post">
            <input type="hidden" name="form_id" value="{{ formId }}">
            <div class="form-group">
                <label for="i_current_password">{{ __("Current password:") }}</label>
                <input autocomplete="current-password" required class="form-control" type="password" name="current_password" id="i_current_password" required>
            </div>
            <div class="form-group">
                <label for="i_new_password">{{ __("New password:") }}</label>
                <input autocomplete="new-password" required class="form-control" type="password" name="new_password" id="i_new_password" required>
            </div>
            <div class="form-group">
                <label for="i_retype_password">{{ __("Retype password:") }}</label>
                <input autocomplete="new-password" required class="form-control" type="password" name="retype_password" id="i_retype_password" required>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-success">{{ __("Change password") }}</button>
            </div>
        </form>
    {% endif %}
</div> <!-- .col-md-3 -->
</div> <!-- .row -->
{% endif %}

<script>
$(function() {
    $(".post-container").each(function(i, e) {
        if ($(e).height() > 900) { // more than 800 so it doesn't collapse just a few pixels
            $(e).addClass("collapsed");
        }
        $(e).find(".post-container-controls button").click(function() {
            $(e).removeClass("collapsed");
        });
    });
});
{% if canEdit %}
$(function() {
    function _hide() {
        $("#i_pfp").hide().prop("disabled", true).prop("required", false);
        $("#i_pfp + .file-input-group").hide().find("button").prop("disabled", true);
    }
    _hide();
    setTimeout(_hide, 10);
    $("[name='pfp_action']").on("change input check click", function() {
        if ($("#pfp_action_3").is(":checked")) {
            $("#i_pfp").show().prop("disabled", false).prop("required", true);
            $("#i_pfp + .file-input-group").show().find("button").prop("disabled", false);
        } else {
            _hide();
        }
    })
});
{% endif %}
</script>

{% endblock %}