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

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

{# MOLT AUTHOR OPTIMIZATION #}
{% set author = molt.get_author() %}

<div class="tiny-molt mini-molt {{'is-remolt' if is_remolt}} border border-dark tiny-rounded px-2 py-2 absolute-container">
    {% if molt.deleted %}
        <span class="text-muted w-100 d-inline-block text-center">This Molt has been deleted</span>
    {% else %}
        {% if is_reply %}
            {% with molt = molt.original_molt, author = molt.original_molt.get_author() %}
            {% if molt.deleted %}
                <p class="text-muted text-center">This Molt has been deleted.</p>
            {% elif author.deleted or author.banned %}
                <p class="text-muted text-center">This Molt is no longer available.</p>
            {% else %}
            <div class="tiny-reply-context">
                <div class="mini-molt-credentials"><a href="/user/{{author.username}}" class="mini-molt-display-name zindex-front">{{author.display_name}}</a>
                    {% if author.verified %}
                    {{macros.verified(17)}}
                    {% endif %}
                    <span class="mini-molt-username">@{{author.username}}</span>
                    <span class="mini-molt-timestamp">· <a href="javascript:void(0)"
                            title="{{molt.pretty_date}}">{{molt.pretty_age}}</a></span>
                    {% if molt.nsfw %}
                        {% include 'nsfw-badge.html' %}
                    {% endif %}
                </div>
                <div class="mini-molt-content">
                    <!-- Don't worry, I already sanitized the text, this is just to preserve line breaks and other styling -->
                    <!-- End-users won't have any idea what this comment is referring to :) -->
                    <p class="mb-2">{{molt.rich_content()|safe}}</p>
                </div>
            </div>
            {% endif %}
            {% endwith %}

            <!-- Vertical line -->
            <div class="absolute-container my-2 text-muted reply-indicator">

                <svg class="absolute-center mini-molt-action-icon " width="17" height="17" data-jam="arrow-up">
                    <use href="{{sprite_url}}?version={{server_start}}#arrow-up"></use>
                </svg>
            </div>
        {% endif %}


        <div class="mini-molt-text-box w-100 h-100 d-inline">
            <meta id="molt-content-{{molt.id}}" data-content="{{molt.content}}">
            <div class="mini-molt-credentials"><a href="/user/{{author.username}}"
                    class="mini-molt-display-name zindex-front">{{author.display_name}}</a>
                {% if author.verified %}
                <a title="This user is verified">{{macros.verified(17)}}</a>
                {% endif %}
                <span class="mini-molt-username">@{{author.username}}</span>
                <span class="mini-molt-timestamp">· <a href="javascript:void(0)"
                        title="{{molt.pretty_date}}">{{molt.pretty_age}}</a></span>
                {% if molt.nsfw %}
                    {% include 'nsfw-badge.html' %}
                {% endif %}
            </div>

            <!-- Molt content -->
            <div class="mini-molt-content">
                <!-- Don't worry, I already sanitized the text, this is just to preserve line breaks and other styling -->
                <!-- End-users won't have any idea what this comment is referring to :) -->
                <p class="mb-2">{{molt.rich_content()|safe}}</p>

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

            <div class="mini-molt-actions d-flex flex-row justify-content-between w-75">
                <input type="hidden" name="user_action" value="reply_molt">
                <input type="hidden" name="molt_id" value="{{molt.id}}">

                <!-- REPLY BUTTON -->
                <div class="mini-molt-action reply rounded-circle zindex-front"
                    onclick="prepareReply('{{molt.id}}', '{{author.username}}', '{{author.display_name | string_escape}}');">

                    <svg class="mini-molt-action-icon" width="16" height="16" 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>

                <!-- 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="16" height="16" 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="16" height="16" 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="16" height="16" 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="16" height="16" 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" onClick="SubForm(this.parentNode);toggleLike(this);">

                        <svg class="mini-molt-action-icon {{"d-none" if current_user.has_liked(molt) else ""}}" width="16" height="16" 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="16" height="16" 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>
                    </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="16" height="16" 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 %}
                                <!-- DELETE BUTTON -->
                                <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? (Cannot be undone)')) {
                                        this.parentNode.submit();$(this).parents('div.mini-molt').remove();}">

                                        <svg width="16" height="16" data-jam="trash">
                                            <use href="{{sprite_url}}?version={{server_start}}#trash"></use>
                                        </svg>
                                        Delete Molt
                                    </div>
                                </form>

                                <!-- 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 %}

                            <!-- REMOLT DELETE BUTTON -->
                            {% elif 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 Molt? (Cannot be undone)')) {
                                        this.parentNode.submit();$(this).parents('div.mini-molt').remove();}">

                                        <svg width="16" height="16" data-jam="trash">
                                            <use href="{{sprite_url}}?version={{server_start}}#trash"></use>
                                        </svg>
                                        Delete Re-Molt
                                    </div>
                                </form>
                            {% 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="flag">
                                        <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="16" height="16" data-jam="flag">
                                            <use href="{{sprite_url}}?version={{server_start}}#flag"></use>
                                        </svg>
                                        Report Molt
                                    </div>
                                </form>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Tweet page link -->
        <a href="/user/{{author.username}}/status/{{molt.id}}" class="absolute-fill"></a>
    {% endif %}
</div>