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

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

{% set is_quote = molt.is_quote %}
{% set is_remolt = molt.is_remolt %}
{% if is_remolt %}
    {% set remolt_shell = molt %}
    {% set molt = molt.original_molt %}
{% 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 %}

<div class="large-molt mini-molt {{'is-remolt' if is_remolt}} border-bottom border-dark px-3 pt-3 pb-0 absolute-container">
    <div class="row mb-3">
        <div class="mini-molt-profile-box {{"mt-4" if (is_remolt or molt.is_reply) and not thread else ""}} pr-1 col-auto">
            <a href="/user/{{author.username}}" class="zindex-front">
                <div class="rounded-circle px43 profile-picture" style="background-image: url('{{author.avatar}}');"></div>
            </a>
        </div>
        <div class="mini-molt-text-box w-100 px-2 col">
            <meta id="molt-content-{{molt.id}}" data-content="{{molt.content}}">

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

                <svg class="mini-molt-action-icon remolt-icon" width="16" height="16" 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 %}
            {% if molt.is_reply and not thread %}
            <!-- Reply indicator -->
            <small class="mini-molt-remolt text-muted zindex-front">

                <svg class="mini-molt-action-icon remolt-icon" width="16" height="16" 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}}">
                    {{"your" if original_author.id == current_user.id else original_author.display_name + "'s"}}
                    molt</a></small>
            {% endif %}
            <div class="mini-molt-credentials zindex-front {{"mt-1" if (is_remolt or molt.is_reply) and not thread else ""}}"><a href="/user/{{author.username}}"
                    class="mini-molt-display-name">{{author.display_name}}</a>
                {% if author.verified %}
                <a title="This user is verified">{{macros.verified(17)}}</a>
                {% endif %}<br>
                <span class="mini-molt-username">@{{author.username}}</span>
            </div>
        </div>
    </div>
    <div>
        <!-- Molt content -->
        <div class="mini-molt-content large-molt-text">
            <!-- 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 :) -->
            {% if molt.content %}
            <p class="mb-2"><span class="zindex-front not-clickable">{{molt.rich_content(full_size_media=True)|safe}}</span></p>
            {% endif %}

            {% if molt.image %}
            <div class="large-molt-media-container mb-2 border border-dark rounded-media zindex-front" {{macros.expand_img()}}>
                <img class="w-100 rounded-media {{'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="w-100 pb-2 pt-1 text-muted border-bottom border-dark">
            <!-- 11:30 AM · Apr 9, 2020 -->
            {{localize(molt.timestamp).strftime("%#I:%M %p · %b %e, %Y") if IS_WINDOWS else localize(molt.timestamp).strftime("%-I:%M %p · %b %e, %Y")}}
            {% if molt.source %}
                · <abbr id="molt-source" title="This shows how this Molt was posted.">{{molt.source}}</abbr>
            {% endif %}
            {% if molt.edited %}
            &mdash; This molt has been edited
            {% endif %}
            {% if molt.is_thread %}
                {% include 'thread-badge.html' %}
            {% endif %}
            {% if molt.nsfw %}
                {% include 'nsfw-badge.html' %}
            {% endif %}
        </div>

        {% if molt.remolt_count or molt.like_count %}
        <div class="mini-molt-actions d-flex flex-row border-dark border-bottom justify-content-start w-100 py-2 mb-0">
            {% if molt.remolt_count %}
            <!-- Remolt count -->
            <a href="javascript:void(0);" class="text-muted mr-3" onclick="toggleModal('#molt_remolts_modal');">
                <span id="remolts-number" class="text-light font-weight-bold">{{molt.remolt_count}}</span>
                <span id="remolts-text">Remolt{{molt.remolt_count | pluralize}}</span>
            </a>
            {% endif %}
            {% if molt.quote_count %}
            <!-- Remolt count -->
            <a href="./quotes" class="text-muted mr-3">
                <span id="quotes-number" class="text-light font-weight-bold">{{molt.quote_count}}</span>
                <span id="quotes-text">Quote{{molt.quote_count | pluralize}}</span>
            </a>
            {% endif %}
            {% if molt.like_count %}
            <!-- Like count -->
            <a href="javascript:void(0);" class="text-muted mr-3" onclick="toggleModal('#molt_likes_modal');">
                <span id="likes-number" class="text-light font-weight-bold">{{molt.like_count}}</span>
                <span id="likes-text">Like{{molt.like_count | pluralize}}</span>
            </a>
            {% endif %}
        </div>
        {% endif %}

        {% if current_user %}
        <div class="mini-molt-actions d-flex flex-row border-dark justify-content-around w-100 py-2 px-4 mb-0">
            {% 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="16" height="16" data-jam="pencil">
                        <use href="{{sprite_url}}?version={{server_start}}#pencil"></use>
                    </svg>
                </div>
            </form>
            {% 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"
                    onclick="prepareReply('{{molt.id}}', '{{author.username}}', '{{author.display_name | string_escape }}');">

                    <svg class="mini-molt-action-icon" width="20" height="20" data-jam="message">
                        <use href="{{sprite_url}}?version={{server_start}}#message"></use>
                    </svg>
                </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="20" height="20" data-jam="repeat">
                        <use href="{{sprite_url}}?version={{server_start}}#repeat"></use>
                    </svg>
                </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="20" height="20" 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="20" height="20" data-jam="heart-f">
                        <use href="{{sprite_url}}?version={{server_start}}#heart-f"></use>
                    </svg>
                </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="20" height="20" 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 %}

                        <!-- DELETE BUTTON -->
                        {% if 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? (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>
                        <!-- 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 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 %}

                        <!-- 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 -->
                        {% if author.id != current_user.id %}
                            <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>
        {% endif %}
    </div>
</div>

<!-- Remolts modal -->
<div class="modal fade" id="molt_remolts_modal" tabindex="-1" role="dialog" aria-labelledby="moltRemoltsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-dark">
            <div class="modal-header py-2 border-dark modal-left-align">
                <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Remolted by</strong>
            </div>
            <div class="modal-body row m-1 w-100 d-block">
                {% for remolt in molt.remolts %}
                    {% with crab = remolt.author, hide_border=loop.last %}
                        {% include "mini_bio.html" %}
                    {% endwith %}
                {% else %}
                    <span class="text-muted">No one has remolted this</span>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Likes modal -->
<div class="modal fade" id="molt_likes_modal" tabindex="-1" role="dialog" aria-labelledby="moltLikesModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-dark">
            <div class="modal-header py-2 border-dark modal-left-align">
                <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Liked by</strong>
            </div>
            <div class="modal-body row m-1 w-100 d-block">
                {% for like in molt.likes %}
                    {% with crab = like.crab, hide_border=loop.last %}
                        {% include "mini_bio.html" %}
                    {% endwith %}
                {% else %}
                    <span class="text-muted">No one has liked this 💔</span>
                {% endfor %}
            </div>
        </div>
    </div>
</div>