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

{% set placeholder = "How are you feeling?"%}
<div class="mini-compose-box border-bottom border-dark px-3 py-2 d-flex flex-row">
    <div class="mini-molt-profile-box">
        <a href="/user/{{current_user.username}}">
            <div class="rounded-circle px43 profile-picture" style="background-image: url('{{current_user.avatar}}');"
            src="{{current_user.avatar}}"></div>
        </a>
    </div>
    <div class="mini-molt-text-box w-100 h-100 px-2">
        <form action={{location}} method="POST" enctype="multipart/form-data" onsubmit="return subMolt(this);">
            <div class="mini-compose-textarea">
                <textarea  onfocusout="currentForm = null;" name="molt_content" rows="5" class="my-2 w-100"
                    placeholder="{{placeholder}}" onfocus="expandMoltBox(this);currentForm = this.form;"></textarea>
                <div class="compose-image-preview large-molt-media-container d-none mb-2 border border-dark rounded-media zindex-front" {{macros.expand_img()}}>
                    <input type="text" name="img_description" placeholder="image description"
                           onkeydown="return blockSubmit(event);"
                           class="bg-dark text-light form-control compose-image-description" onclick="event.stopPropagation();">
                    <img class="img-preview w-100">
                </div>
            </div>
            <div class="mini-molt-actions d-flex flex-row justify-content-end w-100 compose-button-row">

                <!-- NSFW toggle -->
                <div class="molt-nsfw-toggle">
                    <div class="custom-control custom-switch">
                        <input onchange="checkboxToggle(this)" type="checkbox"
                               class="custom-control-input" id="toggle-nsfw-mini-compose"
                               name="nsfw" {{'checked' if current_user.nsfw}}
                               value="{{'true' if current_user.nsfw else 'false'}}"
                        >
                               <label class="custom-control-label text-muted" for="toggle-nsfw-mini-compose">NSFW</label>
                    </div>
                </div>

                <!-- Image picker -->
                <div class="attach-image file-input inline-block file-btn clickable">
                    <input type="file" class="custom-file-input" id="mini-compose-molt-image-picker" name="molt-media"
                        onchange="updateImgPreview(this);" accept="image/x-png,image/jpeg,image/png">
                    <label id="molt-image-picker-btn" class="custom-file-label open-file-btn" for="mini-compose-molt-image-picker">
                        <svg class="file-btn" width="28" height="28" data-jam="picture">
                            <use href="{{sprite_url}}?version={{server_start}}#picture"></use>
                        </svg>
                    </label>
                </div>


                <div class="file-btn clickable close-file-btn d-none" onclick="removeImg(this);">

                    <svg width="28" height="28" data-jam="close-rectangle">
                        <use href="{{sprite_url}}?version={{server_start}}#close-rectangle"></use>
                    </svg>
                </div>

                <span class="mini-character-counter text-muted my-auto mr-3 d-none">{{MOLT_CHAR_LIMIT}}</span>
                <input type="hidden" name="user_action" value="submit_molt">
                <button type="submit" class="btn btn-primary rounded-pill"><strong>Molt</strong></button>
            </div>
        </form>
    </div>
</div>

<script async>
    attachCharacterCounters();

    updateCounter.call($('.mini-compose-box textarea'));

    closeBox = function(event) {
        if (!$(event.target).closest('.mini-compose-box').length) {
            collapseMoltBox();
        }
    }
    $(document).on('click', closeBox);
</script>