{{*
  * Copyright (C) 2010-2026, the Friendica project
  * SPDX-FileCopyrightText: 2010-2026 the Friendica project
  *
  * SPDX-License-Identifier: AGPL-3.0-or-later
  *}}
<div class="generic-page-wrapper">
    <h2>{{$l10n.compose_title}}</h2>
    {{if $l10n.always_open_compose}}
    <p>{{$l10n.always_open_compose nofilter}}</p>
    {{/if}}
    <div id="profile-jot-wrapper">
        <form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="compose/{{$type}}" method="post">
            <input type="hidden" name="post_id_random" value="{{$rand_num}}" />
            <input type="hidden" name="post_type" value="{{$posttype}}" />
            <input type="hidden" name="wall" value="{{$wall}}" />

            <div id="jot-title-wrap">
                <input type="text" name="title" id="jot-title" class="jothidden jotforms form-control" placeholder="{{$l10n.placeholdertitle}}" title="{{$l10n.placeholdertitle}}" value="{{$title}}" tabindex="1" dir="auto" />
            </div>
			{{if $l10n.placeholdersummary}}
			<div id="jot-summary-wrap">
				<input type="text" name="summary" id="jot-summary" class="jothidden jotforms form-control" placeholder="{{$l10n.placeholdersummary}}" title="{{$l10n.placeholdersummary}}" value="{{$summary}}" tabindex="2" dir="auto" />
			</div>
			{{/if}}
            {{if $l10n.placeholdercategory}}
                <div id="jot-category-wrap">
                    <input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$l10n.placeholdercategory}}" title="{{$l10n.placeholdercategory}}" value="{{$category}}" tabindex="3" dir="auto" />
                </div>
            {{/if}}

            <div class="comment-edit-bb-{{$id}} btn-toolbar clearfix" role="toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-default bb-img" aria-label="{{$l10n.edimg}}" title="{{$l10n.edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}" tabindex="4">
                        <i class="ri ri-image-line"></i>
                    </button>
                    <button type="button" class="btn btn-default bb-attach" aria-label="{{$l10n.edattach}}" title="{{$l10n.edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$l10n.prompttext}}');" tabindex="5">
                        <i class="ri ri-attachment-2"></i>
                    </button>
                    <button type="button" id="button_emojipicker" class="btn btn-default emojis" aria-label="{{$l10n.edemojis}}" title="{{$l10n.edemojis}}" tabindex="6">
                      <i class="ri ri-emotion-line"></i>
                    </button>
                </div>

                <div class="pull-right">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default bb-url" aria-label="{{$l10n.edurl}}" title="{{$l10n.edurl}}" onclick="insertFormatting('url',{{$id}});" tabindex="7">
                            <i class="ri ri-link"></i>
                        </button>
                        <button type="button" class="btn btn-default underline" aria-label="{{$l10n.eduline}}" title="{{$l10n.eduline}}" onclick="insertFormatting('u',{{$id}});" tabindex="9">
                            <i class="ri ri-underline"></i>
                        </button>
                        <button type="button" class="btn btn-default italic" aria-label="{{$l10n.editalic}}" title="{{$l10n.editalic}}" onclick="insertFormatting('i',{{$id}});" tabindex="10">
                            <i class="ri ri-italic"></i>
                        </button>
                        <button type="button" class="btn btn-default bold" aria-label="{{$l10n.edbold}}" title="{{$l10n.edbold}}" onclick="insertFormatting('b',{{$id}});" tabindex="11">
                            <i class="ri ri-bold"></i>
                        </button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default quote" aria-label="{{$l10n.edquote}}" title="{{$l10n.edquote}}" onclick="insertFormatting('quote',{{$id}});" tabindex="12">
                            <i class="ri ri-double-quotes-l"></i>
                        </button>
                        <button type="button" class="btn btn-default bb-url" aria-label="{{$l10n.contentwarn}}" title="{{$l10n.contentwarn}}" onclick="insertFormatting('abstract',{{$id}});" tabindex="13">
                            <i class="ri ri-eye-line"></i>
                        </button>
                        <button type="button" class="btn btn-default code" aria-label="{{$l10n.edcode}}" title="{{$l10n.edcode}}" onclick="insertFormatting('code',{{$id}});" tabindex="14">
                            <i class="ri ri-code-line"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div id="dropzone-{{$id}}" class="dropzone">
                <p>
                    <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize expandable-textarea" name="body" placeholder="{{$l10n.default}}" rows="18" tabindex="3" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea>
                </p>
            </div>
            <div class="comment-edit-submit-wrapper clearfix">
                {{if $type == 'post'}}
                    <div id="compose-additional-settings-location">
                        <button type="button" name="permissions" class="btn btn-default" id="toggle-permissions" title="{{$l10n.toggle_permissions_tooltip}}" onclick="togglePermissions()" tabindex="5">
                            <i class="ri ri-more-line"></i> {{$l10n.toggle_permissions}}
                        </button>
                        <input type="text" name="location" class="form-control" id="jot-location" value="{{$location}}" placeholder="{{$l10n.location_set}}" tabindex="6" />
                        <button type="button" class="btn btn-default" id="profile-location"
                            data-title-set="{{$l10n.location_set}}"
                            data-title-disabled="{{$l10n.location_disabled}}"
                            data-title-unavailable="{{$l10n.location_unavailable}}"
                            data-title-clear="{{$l10n.location_clear}}"
                            title="{{$l10n.location_set}}"
                            tabindex="7">
                            <i class="ri ri-map-pin-line" aria-hidden="true"></i>
                        </button>
                    </div>
                {{/if}}
                <div>
                    <span role="presentation" id="profile-rotator-wrapper">
                        <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$l10n.wait}}" title="{{$l10n.wait}}" style="display: none;" />
                    </span>
                    <span role="presentation" id="character-counter" class="grey text-info"></span>
                    <button type="button" class="btn btn-default" onclick="preview_comment_toggle({{$id}}, '{{$l10n.preview}}');" id="comment-edit-preview-link-{{$id}}" tabindex="8">
                        <i class="ri ri-eye-line"></i> <span id="preview-btn-text-{{$id}}">{{$l10n.preview}}</span>
                    </button>
                    {{if $enableAdvancedComposer}}
                    <button type="button" class="btn btn-default" id="easy-compose-toggle" title="{{$l10n.btnAssistant}}" onclick="AdvancedComposerTogglePanel()">
                        <i class="ri ri-quill-pen-line"></i> <span class="ec-btn-text">{{$l10n.btnAssistant}}</span>
                    </button>
                    <button type="button" class="btn btn-default" id="easy-compose-distraction-toggle" title="{{$l10n.btnZen}}" onclick="AdvancedComposerToggleDistractionFree()">
                        <i class="ri ri-fullscreen-line"></i> <span class="ec-btn-text">{{$l10n.btnZen}}</span>
                    </button>
                    <button type="button" class="btn btn-default" id="easy-compose-focus-preview-toggle" title="{{$l10n.btnFocusPreview}}" onclick="AdvancedComposerOpenFocusPreview()">
                        <i class="ri ri-eye-line"></i> <span class="ec-btn-text">{{$l10n.btnFocusPreview}}</span>
                    </button>
                    <button type="button" class="btn btn-default ec-hidden" id="easy-compose-ep-zen-toggle" title="{{$l10n.btnEpZen}}" onclick="AdvancedComposerToggleEpZen()">
                        <i class="ri ri-image-line"></i> <span class="ec-btn-text">{{$l10n.btnEpZen}}</span>
                    </button>
                    {{/if}}
                    <button type="submit" class="btn btn-primary pull-right" id="comment-edit-submit-{{$id}}" name="submit" tabindex="9"><i class="ri ri-send-plane-line"></i> {{$l10n.submit}}</button>
                </div>
                <div class="jotplugins">
                    {{$jotplugins nofilter}}
                </div>
            </div>

            <div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>

            <div id="permissions-section" style="display: none;">
                {{if $type == 'post'}}
                    <h3>{{$l10n.visibility_title}}</h3>
                    {{$acl_selector nofilter}}

        			{{include file="field_checkbox.tpl" field=$sensitive}}
                    {{if $scheduled_at}}{{$scheduled_at nofilter}}{{/if}}
                    {{if $created_at}}{{$created_at nofilter}}{{/if}}
                {{else}}
                    <input type="hidden" name="circle_allow" value="{{$circle_allow}}"/>
                    <input type="hidden" name="contact_allow" value="{{$contact_allow}}"/>
                    <input type="hidden" name="circle_deny" value="{{$circle_deny}}"/>
                    <input type="hidden" name="contact_deny" value="{{$contact_deny}}"/>
                {{/if}}
            </div>
        </form>
    </div>
</div>
<script>
    dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');

    function preview_comment_toggle(id, originalText) {
        var previewPane = document.getElementById('comment-edit-preview-' + id);
        var btnTextSpan = document.getElementById('preview-btn-text-' + id);
        if (previewPane.style.display === 'block') {
            previewPane.style.display = 'none';
            btnTextSpan.textContent = originalText;
        } else {
            preview_comment(id);
            btnTextSpan.textContent = "Close preview";
            previewPane.style.display = 'block';
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        var textareas = document.querySelectorAll(".expandable-textarea");

        textareas.forEach(function(textarea) {
            textarea.addEventListener("input", function() {
                this.style.height = "auto";
                this.style.height = (this.scrollHeight) + "px";
            });

            // Set initial height
            textarea.style.height = "auto";
            textarea.style.height = (textarea.scrollHeight) + "px";
        });
    });

    function togglePermissions() {
        var permissionsSection = document.getElementById('permissions-section');
        if (permissionsSection.style.display === 'none' || permissionsSection.style.display === '') {
            permissionsSection.style.display = 'block';
        } else {
            permissionsSection.style.display = 'none';
        }
    }

    var formSubmitting = false;

    function setFormSubmitting() {
        formSubmitting = true;
    }

    document.addEventListener("DOMContentLoaded", function() {
        var textareas = document.querySelectorAll(".expandable-textarea");

        textareas.forEach(function(textarea) {
            textarea.style.height = "auto";
            textarea.style.height = (textarea.scrollHeight) + "px";

            const savedContent = localStorage.getItem(`comment-edit-text-${textarea.id}`);
            const lastSaved = localStorage.getItem(`last-saved-${textarea.id}`);

            if (savedContent && lastSaved) {
                const currentTime = new Date().getTime();
                const timeElapsed = currentTime - parseInt(lastSaved, 10);

                if (timeElapsed <= 600000) {
                    textarea.value = savedContent;
                    textarea.style.height = "auto";
                    textarea.style.height = (textarea.scrollHeight) + "px";
                } else {
                    localStorage.removeItem(`comment-edit-text-${textarea.id}`);
                    localStorage.removeItem(`last-saved-${textarea.id}`);
                }
            }
        });
    });

    setInterval(() => {
        var textareas = document.querySelectorAll(".expandable-textarea");
        textareas.forEach(function(textarea) {
            if (textarea.value.trim() !== "") {
                localStorage.setItem(`comment-edit-text-${textarea.id}`, textarea.value);
                const currentTime = new Date().getTime();
                localStorage.setItem(`last-saved-${textarea.id}`, currentTime.toString());
            }
        });
    }, 5000);

    function setFormSubmitting() {
        formSubmitting = true;
        var textareas = document.querySelectorAll(".expandable-textarea");
        textareas.forEach(function(textarea) {
            localStorage.removeItem(`comment-edit-text-${textarea.id}`);
            localStorage.removeItem(`last-saved-${textarea.id}`);
        });
    }

    window.addEventListener("beforeunload", function (event) {
        if (!formSubmitting) {
            var textField = document.getElementById('comment-edit-text-{{$id}}').value.trim();
            if (textField.length > 0) {
                var confirmationMessage = 'Are you sure you want to reload the page? All unsaved changes will be lost.';
                event.returnValue = confirmationMessage;
                return confirmationMessage;
            }
        }
    });

    document.getElementById('comment-edit-form-{{$id}}').addEventListener('submit', setFormSubmitting);
</script>
