{% import "macros.jinja" as macros %}

{% if current_depth is not defined %}
    {% set current_depth = 1 %}
{% endif %}

{% if depth_limit is not defined %}
    {% set depth_limit = 10 %}
{% endif %}

{% if is_in_quote %}
    {% set show_replies_from = False %}
    {% set show_replies = False %}
{% endif %}

{% if show_replies_from == 'following' %}
    {% set show_replies = show_replies_from and molt.get_reply_from_following(current_user) and current_depth <= depth_limit %}
{% elif show_replies_from %}
    {% set show_replies = show_replies_from and molt.get_reply_from(show_replies_from) and current_depth <= depth_limit %}
{% endif %}

{% if show_replies %}
    {% set hide_border = true %}
    {% set is_parent = true %}
{% endif %}

{% set is_remolt = molt.is_remolt %}
{% if is_remolt %}
    {% set remolt_shell = molt %}
    {% set molt = molt.original_molt %}
{% endif %}

{% set is_quote = molt.is_quote %}

{# MOLT AUTHOR OPTIMIZATION #}
{% if not author or author.id != molt.author_id %}
    {% set author = molt.get_author() %}
{% endif %}

{% set is_deleted = molt.deleted %}
{% set is_unavailable = author.banned or author.deleted or molt.original_molt.deleted %}
{% if always_show %}
    {% set is_deleted = false %}
    {% set is_unavailable = false %}
{% endif %}

{# ORIGINAL MOLT AUTHOR OPTIMIZATION #}
{% if is_quote or molt.is_reply %}
    {% set original_author = molt.original_molt.get_author(('id', 'username', 'display_name')) %}
{% endif %}

{% if molt.is_reply and recurse_parents %}
    <div class="mt-2">
        {% with molt=molt.original_molt, thread=true, is_parent=true, hide_border=true %}
            {% include "molt.html" %}
        {% endwith %}
    </div>
{% endif %}

<div class="regular-molt mini-molt {{'is-remolt' if is_remolt}} {{'border-bottom' if not hide_border}} border-dark {{'px-3' if not is_in_quote}} py-2 {{'mb-2' if show_replies}} d-flex flex-row absolute-container">
    {% if is_deleted %}
        {% if is_parent %}
            <div class="border-bottom border-dark w-100">
                <p class="text-muted text-center">This Molt has been deleted.</p>
            </div>
        {% else %}
            <p class="text-muted text-center">This Molt has been deleted.</p>
        {% endif %}
    {% elif is_unavailable %}
        {% if is_parent %}
            <div class="border-bottom border-dark w-100">
                <p class="text-muted text-center">This Molt is no longer available.</p>
            </div>
        {% else %}
            <p class="text-muted text-center">This Molt is no longer available.</p>
        {% endif %}
    {% else %}
        <div class="mini-molt-profile-box {{"d-none" if is_in_quote}} {{"avatar-indent" if (is_remolt or (molt.is_reply and not thread))}} {{'mt-4' if is_pin}}">
        {% if static %}
        <a class="zindex-front">
        {% else %}
        <a href="/user/{{author.username}}" class="zindex-front">
        {% endif %}
            <img class="rounded-circle px43 profile-picture" src="{{author.avatar}}" />
        </a>
        {% if is_parent %}
            <div class="thread-connector">
                <div class="thread-line"></div>
            </div>
        {% endif %}
    </div>
    <div class="mini-molt-text-box w-100 h-100 px-2">
        <meta id="molt-content-{{molt.id}}" data-content="{{molt.content}}">
        {% if is_pin %}
            <!-- Pin indicator -->
            <p class="text-muted zindex-front mb-2">
                <svg class="mini-molt-action-icon remolt-icon" width="12" height="12" data-jam="pin-f">
                    <use href="{{sprite_url}}?version={{server_start}}#pin-f"></use>
                </svg>
                Pinned Molt
            </p>
        {% endif %}

        {% if not is_in_quote %}
            <!-- Remolt indicator -->
            {% if is_remolt %}
            <small class="mini-molt-remolt text-muted zindex-front">

                <svg class="mini-molt-action-icon remolt-icon" width="12" height="12" data-jam="repeat">
                    <use href="{{sprite_url}}?version={{server_start}}#repeat"></use>
                </svg>
                <a href="/user/{{remolt_shell.author.username}}">{{remolt_shell.author.display_name}}</a> Remolted</small>
            {% endif %}

            <!-- Reply indicator -->
            {% if molt.is_reply and not thread %}
            <small class="mini-molt-remolt text-muted zindex-front">

                <svg class="mini-molt-action-icon remolt-icon" width="12" height="12" data-jam="message">
                    <use href="{{sprite_url}}?version={{server_start}}#message"></use>
                </svg>
                replying to<a href="/user/{{original_author.username}}/status/{{molt.original_molt.id}}">
                    {{"you" if original_author.id == current_user.id else original_author.display_name}}</a></small>
            {% endif %}
        {% endif %}

        <div class="mini-molt-credentials {{'row mx-0' if is_in_quote}} {{"mt-1" if (is_remolt or molt.is_reply or is_pin) and not thread else ""}} absolute-container">
            {% if is_in_quote %}
                {% if static %}
                <a class="zindex-front col">
                {% else %}
                <a href="/user/{{author.username}}" class="zindex-front d-inline-block">
                {% endif %}
                    <div class="rounded-circle px20 profile-picture" style="background-image: url('{{author.avatar}}');"></div>
                </a>
            {% endif %}

            <div class="mini-molt-credentials-text {{'col pl-2' if is_in_quote}}">
                {% if not static %}
                    <a href="/user/{{author.username}}" class="mini-molt-display-name zindex-front">
                {% else %}
                    <a class="mini-molt-display-name zindex-front">
                {% endif %}
                    {{author.display_name}}
                </a>
                {% if author.verified %}
                <a title="This user is verified" class="zindex-front">{{macros.verified(17)}}</a>
                {% endif %}
                <span class="mini-molt-username zindex-front">@{{author.username}}</span>
                <span class="mini-molt-timestamp zindex-front">· {{molt.pretty_age}}</span>
                {% if molt.is_thread %}
                    {% include 'thread-badge.html' %}
                {% endif %}
                {% if molt.nsfw %}
                    {% include 'nsfw-badge.html' %}
                {% endif %}
            </div>
        </div>

        <!-- Molt content -->
        <div class="mini-molt-content">
            {% if molt.content %}
            <p class="mb-2"><span class="zindex-front {{'clickable' if not static}}"
                {% if not static %}
                    onclick="if (!window.getSelection().toString()) { location.href = '/user/{{author.username}}/status/{{molt.id}}'; }"
                {% endif %}
                >
                {{molt.rich_content()|safe}}
            </span>
            </p>
            {% endif %}

            {% if molt.image %}
                <div class="mini-molt-media-container mb-2 border border-dark rounded-media zindex-front" {{macros.expand_img()}}>
                <img class="mini-molt-media-img {{'nsfw-thumbnail' if molt.nsfw}}"
                     src="{{molt.image}}" alt="{{molt.image | alt_text}}"/>
                {% if molt.nsfw %}
                    <strong class="nsfw-thumbnail-warning">
                        NSFW
                    </strong>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Quoted Molt preview -->
        {% if is_quote and not is_in_quote %}
        <div class="quoted-molt rounded-media mb-2 zindex-front">
            {% with molt = molt.original_molt, hide_border = True, hide_buttons = True, is_in_quote=True %}
                {% include 'molt.html' %}
            {% endwith %}
        </div>
        {% endif %}

        {% if (current_user or static) and not hide_buttons %}
        <div class="mini-molt-actions d-flex flex-row justify-content-between mr-md-5">
            {% if current_user %}
                {% if author.id == current_user.id and molt.editable %}
                <!-- EDIT BUTTON -->
                    <form>
                        <input type="hidden" name="user_action" value="reply_molt">
                        <input type="hidden" name="molt_id" value="{{molt.id}}">
                        <div class="mini-molt-action edit rounded-circle zindex-front"
                            onclick="prepareEdit('{{molt.id}}');">
                            <svg class="mini-molt-action-icon" width="19" height="19" data-jam="pencil">
                                <use href="{{sprite_url}}?version={{server_start}}#pencil"></use>
                            </svg>
                        </div>
                    </form>
                {% endif %}
            {% endif %}
            <!-- REPLY BUTTON -->
            <form>
                <input type="hidden" name="user_action" value="reply_molt">
                <input type="hidden" name="molt_id" value="{{molt.id}}">
                <div class="mini-molt-action reply rounded-circle zindex-front"
                {% if not static %}
                    onclick="prepareReply('{{molt.id}}', '{{author.username}}', '{{author.display_name | string_escape}}');"
                {% endif %}
                >

                    <svg class="mini-molt-action-icon" width="19" height="19" data-jam="message">
                        <use href="{{sprite_url}}?version={{server_start}}#message"></use>
                    </svg>
                    <span class="mini-molt-action-counter ml-1">{{molt.reply_count}}</span>
                </div>
            </form>

            <!-- REMOLT DROPDOWN -->
            <div class="dropdown">
                {% if static %}
                    {% set has_remolted = false %}
                {% else %}
                    {% set has_remolted = current_user.has_remolted(molt) %}
                {% endif %}

                <!-- TOGGLE REMOLT DROPDOWN BUTTON -->
                <div class="zindex-front mini-molt-action remolt {{"active-remolt" if has_remolted else ""}}" href="#" role="button" id="dropdownMenuLink"
                     onclick="toggleDropdown(this);" aria-haspopup="true" aria-expanded="false">
                    <svg class="mini-molt-action-icon" width="19" height="19" data-jam="repeat">
                        <use href="{{sprite_url}}?version={{server_start}}#repeat"></use>
                    </svg>
                    <span class="mini-molt-action-counter ml-1">{{molt.remolt_count}}</span>
                </div>
                {% if current_user %}
                    <!-- REMOLT DROPDOWN CONTENT -->
                    <div class="neue-card molt-dropdown dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <!-- UNDO REMOLT BUTTON -->
                        <form id="dd-undo-remolt" class="dropdown-item clickable {{'hidden' if not has_remolted}}" method="POST">
                            <input type="hidden" name="user_action" value="undo_remolt">
                            <input type="hidden" name="molt_id" value="{{molt.id}}">
                            <div onClick="deleteRemolt(this)"
                                 class="text-danger">
                                <svg class="mini-molt-action-icon" width="19" height="19" data-jam="repeat">
                                    <use href="{{sprite_url}}?version={{server_start}}#repeat"></use>
                                </svg>
                                Undo Remolt
                            </div>
                        </form>

                        <!-- REMOLT BUTTON -->
                        <form id="dd-remolt" class="dropdown-item clickable {{'hidden' if has_remolted}}" method="POST">
                            <input type="hidden" name="user_action" value="remolt_molt">
                            <input type="hidden" name="molt_id" value="{{molt.id}}">
                            <div onClick="submitRemolt(this)">
                                <svg class="mini-molt-action-icon" width="19" height="19" data-jam="repeat">
                                    <use href="{{sprite_url}}?version={{server_start}}#repeat"></use>
                                </svg>
                                Remolt
                            </div>
                        </form>

                        <!-- QUOTE-MOLT BUTTON -->
                        <form class="dropdown-item clickable" method="POST">
                            <input type="hidden" name="user_action" value="quote_molt">
                            <input type="hidden" name="molt_id" value="{{has_remolted.id}}">
                            <div onclick="prepareQuote('{{molt.id}}', '{{author.username}}', '{{author.display_name | string_escape}}');">
                                <svg class="mini-molt-action-icon" width="19" height="19" data-jam="pencil">
                                    <use href="{{sprite_url}}?version={{server_start}}#pencil"></use>
                                </svg>
                                Quote Molt
                            </div>
                        </form>
                    </div>
                {% endif %}
            </div>

            <!-- LIKE BUTTON -->
            <form method="POST">
                <input type="hidden" name="user_action" value="like_molt">
                <input type="hidden" name="molt_id" value="{{molt.id}}">
                <div class="mini-molt-action like zindex-front"
                     {% if not static %}
                         onClick="SubForm(this.parentNode);toggleLike(this);"
                     {% endif %}
                     >

                     {% if static %}
                        <svg class="mini-molt-action-icon text-primary" width="19" height="19" data-jam="heart-f">
                            <use href="{{sprite_url}}?version={{server_start}}#heart-f"></use>
                        </svg>
                        <span class="mini-molt-action-counter ml-1 text-primary">{{molt.like_count}}</span>
                    {% else %}
                        <svg class="mini-molt-action-icon {{"d-none" if current_user.has_liked(molt) else ""}}" width="19" height="19" data-jam="heart">
                            <use href="{{sprite_url}}?version={{server_start}}#heart"></use>
                        </svg>

                        <svg class="mini-molt-action-icon text-primary {{"d-none" if not current_user.has_liked(molt) else ""}}" width="19" height="19" data-jam="heart-f">
                            <use href="{{sprite_url}}?version={{server_start}}#heart-f"></use>
                        </svg>
                        <span class="mini-molt-action-counter ml-1 {{"text-primary" if current_user.has_liked(molt) else ""}}">{{molt.like_count}}</span>
                    {% endif %}
                </div>
            </form>

            <!-- DROPDOWN BUTTON -->
            <div class="dropdown">
                <span class="zindex-front mini-molt-action reply" href="#" role="button" id="dropdownMenuLink"
                    onclick="toggleDropdown(this);" aria-haspopup="true" aria-expanded="false">

                    <svg class="mini-molt-action-icon" width="19" height="19" data-jam="more-horizontal">
                        <use href="{{sprite_url}}?version={{server_start}}#more-horizontal"></use>
                    </svg>
                </span>
                {% if current_user %}
                    <div class="neue-card molt-dropdown dropdown-menu" aria-labelledby="dropdownMenuLink">
                        {% if current_user.is_moderator %}
                            <form action="/moderation" target="_blank"
                                  class="dropdown-item clickable">
                                <input type="hidden" name="viewing" value="molt">
                                <input type="hidden" name="molt_id" value="{{molt.id}}">
                                <div onClick="this.parentNode.submit();">
                                    <svg width="19" height="19" data-jam="cog">
                                        <use href="{{sprite_url}}?version={{server_start}}#cog"></use>
                                    </svg>
                                    Open in mod panel
                                </div>
                            </form>
                        {% endif %}

                        {% if author.id == current_user.id and current_page == "own-profile" %}
                            <!-- PIN/UNPIN BUTTONS -->
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="molt_id" value="{{molt.id}}">
                                {% if current_user.pinned == molt %}
                                    <input type="hidden" name="user_action" value="unpin_molt">
                                    <div onClick="if (confirm('Are you sure you want to unpin this Molt?')) { this.parentNode.submit()}">
                                        <svg width="19" height="19" data-jam="pin">
                                            <use href="{{sprite_url}}?version={{server_start}}#pin"></use>
                                        </svg>
                                        Unpin
                                    </div>
                                {% else %}
                                    <input type="hidden" name="user_action" value="pin_molt">
                                    <div onClick="this.parentNode.submit();">
                                        <svg width="19" height="19" data-jam="pin">
                                            <use href="{{sprite_url}}?version={{server_start}}#pin"></use>
                                        </svg>
                                        Pin
                                    </div>
                                {% endif %}
                            </form>
                        {% endif %}
                        <!-- DELETE BUTTON -->
                        {% if is_remolt and remolt_shell.author.id == current_user.id %}
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="user_action" value="delete_molt">
                                <input type="hidden" name="molt_id" value="{{remolt_shell.id}}">
                                <div onClick="if (confirm('Are you sure you want to delete this Remolt?')) {
                                    SubForm(this.parentNode);$(this).parents('div.mini-molt').remove();}">

                                    <svg width="19" height="19" data-jam="trash">
                                        <use href="{{sprite_url}}?version={{server_start}}#trash"></use>
                                    </svg>
                                    Delete Remolt
                                </div>
                            </form>
                        {% elif author.id == current_user.id %}
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="user_action" value="delete_molt">
                                <input type="hidden" name="molt_id" value="{{molt.id}}">
                                <div onClick="if (confirm('Are you sure you want to delete this Molt?')) {
                                    SubForm(this.parentNode);$(this).parents('div.mini-molt').remove();}">

                                    <svg width="19" height="19" data-jam="trash">
                                        <use href="{{sprite_url}}?version={{server_start}}#trash"></use>
                                    </svg>
                                    Delete Molt
                                </div>
                            </form>
                        <!-- REMOLT DELETE BUTTON -->
                        {% endif %}

                        {% if author.id == current_user.id %}
                            <!-- EDIT ALT TEXT BUTTON -->
                            {% if molt.image %}
                            <form class="dropdown-item clickable">
                                <div onClick="editImageDescription('{{molt.image}}', '{{molt.image | alt_text('') | string_escape}}')">
                                    <svg width="19" height="19" data-jam="picture">
                                        <use href="{{sprite_url}}?version={{server_start}}#picture"></use>
                                    </svg>
                                    Edit image description
                                </div>
                            </form>
                            {% endif %}

                            <!-- MARK SFW BUTTON -->
                            {% if molt.nsfw %}
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="user_action" value="disable_nsfw_molt">
                                <input type="hidden" name="molt_id" value="{{molt.id}}">
                                <div onClick="if (confirm('Are you sure you want to remove the NSFW label?')) {this.parentNode.submit();}">

                                    <svg width="19" height="19" data-jam="eye">
                                        <use href="{{sprite_url}}?version={{server_start}}#eye"></use>
                                    </svg>
                                    Remove NSFW label
                                </div>
                            </form>
                            {% else %}
                            <!-- MARK NSFW BUTTON -->
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="user_action" value="enable_nsfw_molt">
                                <input type="hidden" name="molt_id" value="{{molt.id}}">
                                <div onClick="if (confirm('Are you sure you want to label this Molt NSFW?')) {this.parentNode.submit();}">

                                    <svg width="19" height="19" data-jam="eye-close">
                                        <use href="{{sprite_url}}?version={{server_start}}#eye-close"></use>
                                    </svg>
                                    Label NSFW
                                </div>
                            </form>
                            {% endif %}
                        {% endif %}

                        {% if current_user.has_bookmarked(molt) %}
                        <!-- UNBOOKMARK MOLT BUTTON -->
                        <form class="dropdown-item clickable" method="POST">
                            <input type="hidden" name="user_action" value="unbookmark_molt">
                            <input type="hidden" name="molt_id" value="{{molt.id}}">
                            <div onClick="SubForm(this.parentNode);changeContent(this, 'Bookmark has been removed.')">
                                <svg width="19" height="19" data-jam="bookmark-remove">
                                    <use href="{{sprite_url}}?version={{server_start}}#bookmark-remove"></use>
                                </svg>
                                Remove Molt from Bookmarks
                            </div>
                        </form>
                        {% else %}
                        <!-- BOOKMARK MOLT BUTTON -->
                        <form class="dropdown-item clickable" method="POST">
                            <input type="hidden" name="user_action" value="bookmark_molt">
                            <input type="hidden" name="molt_id" value="{{molt.id}}">
                            <div onClick="SubForm(this.parentNode);changeContent(this, 'Molt has been bookmarked.')">
                                <svg width="19" height="19" data-jam="bookmark">
                                    <use href="{{sprite_url}}?version={{server_start}}#bookmark"></use>
                                </svg>
                                Add Molt to Bookmarks
                            </div>
                        </form>
                        {% endif %}

                        {% if author.id != current_user.id %}
                            <!-- BLOCK USER BUTTON -->
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="user_action" value="block">
                                <input type="hidden" name="target_user" value="{{molt.author_id}}">
                                <div onClick="if (confirm('Are you sure you want to block this user?')) {
                                    SubForm(this.parentNode);replaceMolt(this, 'You have blocked this user.');}">

                                    <svg width="19" height="19" data-jam="ghost">
                                        <use href="{{sprite_url}}?version={{server_start}}#ghost"></use>
                                    </svg>
                                    Block User
                                </div>
                            </form>

                            <!-- REPORT MOLT BUTTON -->
                            <form class="dropdown-item clickable" method="POST">
                                <input type="hidden" name="user_action" value="report_molt">
                                <input type="hidden" name="molt_id" value="{{molt.id}}">
                                <div onClick="if (confirm('Are you sure you want to report this Molt?')) {
                                    SubForm(this.parentNode);replaceMolt(this, 'You have reported this Molt.');}">

                                    <svg width="19" height="19" data-jam="flag">
                                        <use href="{{sprite_url}}?version={{server_start}}#flag"></use>
                                    </svg>
                                    Report Molt
                                </div>
                            </form>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
    {% if not static %}
        <!-- Molt page link -->
        <a href="/user/{{author.username}}/status/{{molt.id}}" class="absolute-fill" draggable="false"></a>
    {% endif %}
    {% endif %}
</div>
{% if show_replies %}
    {% if show_replies_from == 'following' %}
        {% with molt=molt.get_reply_from_following(current_user) %}
            {% with thread=true, show_replies_from=author.id, hide_border=false,
            is_parent=false, current_depth=current_depth + 1 %}
                {% include "molt.html" %}
            {% endwith %}
        {% endwith %}
    {% else %}
        {% with molt=molt.get_reply_from(show_replies_from) %}
            {% with thread=true, show_replies_from=author.id, hide_border=false,
            is_parent=false, current_depth=current_depth + 1 %}
                {% include "molt.html" %}
            {% endwith %}
        {% endwith %}
    {% endif %}
{% endif %}