{% load widget_tweaks %} {% if reply %} <form method="post" id="post-form" action="{% url "reply" toot.id %}" enctype="multipart/form-data"> {% elif redraft %} <form method="post" id="post-form" action="{% url "redraft" toot.id %}" enctype="multipart/form-data"> {% else %} <form id="post-form" method="post" action="{% url "toot" %}" enctype="multipart/form-data"> {% endif %} {% csrf_token %} <div> {{ form.non_field_errors }} <br> </div> <div class="field"> <label class="label"> {{ form.spoiler_text.label }}</label> <div class="control"> {% render_field form.spoiler_text class+="input mousetrap" placeholder="Optional" %} </div> </div> <div class="field" > <label class="label" >{{ form.status.label }}</label> <div class="control"> {% render_field form.status class+="textarea mousetrap is-primary" rows="4" %} </div> </div> <div class="field"> <label class="label" > {{ form.visibility.label }}</label> <div class="control has-icons-left"> <div class="select"> {% render_field form.visibility class+="select"%} <span class="icon is-small is-left" > <i class="fa fa-address-card"></i> </span> </div> </div> </div> <div class="field has-addons"> <div class="file"> <label class="file-label"> {% render_field form.media_file_1 class+="file-input" %} <span class="file-cta"> <span class="file-icon"> <i class="fa fa-upload"></i> </span> <span class="file-label" id="media_filename_1"> {{ form.media_file_1.label }} </span> </span> </label> </div> <div class="control is-expanded"> {% render_field form.media_text_1 class+="input mousetrap" placeholder="Describe attachment" %} </div> </div> <div class="field has-addons"> <div class="file"> <label class="file-label"> {% render_field form.media_file_2 class+="file-input" %} <span class="file-cta"> <span class="file-icon"> <i class="fa fa-upload"></i> </span> <span class="file-label" id="media_filename_2"> {{ form.media_file_2.label }} </span> </span> </label> </div> <div class="control is-expanded"> {% render_field form.media_text_2 class+="input mousetrap" placeholder="Describe attachment" %} </div> </div> <div class="field has-addons"> <div class="file"> <label class="file-label"> {% render_field form.media_file_3 class+="file-input" %} <span class="file-cta"> <span class="file-icon"> <i class="fa fa-upload"></i> </span> <span class="file-label" id="media_filename_3"> {{ form.media_file_3.label }} </span> </span> </label> </div> <div class="control is-expanded"> {% render_field form.media_text_3 class+="input mousetrap" placeholder="Describe attachment" %} </div> </div> <div class="field has-addons"> <div class="file"> <label class="file-label"> {% render_field form.media_file_4 class+="file-input" %} <span class="file-cta"> <span class="file-icon"> <i class="fa fa-upload"></i> </span> <span class="file-label" id="media_filename_4"> {{ form.media_file_4.label }} </span> </span> </label> </div> <div class="control is-expanded"> {% render_field form.media_text_4 class+="input mousetrap" placeholder="Describe attachment" %} </div> </div> <div class="field has-addons"> <div class="control level is-mobile"> <img class="image avatar is-48x48 level-item" src="{{ own_acct.avatar_static }}" alt=""> <input type="submit" class="button is-primary level-item" name="toot" value="Toot"> <a href="{% url "emoji" %}" target="_blank" rel="noopener noreferrer" class="level-item emoji-link" title="custom emoji reference">😊</a> </div> </div> </form> {% if not preferences.theme.is_brutalist %} <script type="application/javascript"> var file1 = document.getElementById("id_media_file_1"); file1.onchange = function(){ if (file1.files.length > 0) { document.getElementById('media_filename_1').innerHTML = file1.files[0].name; } }; var file2 = document.getElementById("id_media_file_2"); file2.onchange = function(){ if (file2.files.length > 0) { document.getElementById('media_filename_2').innerHTML = file2.files[0].name; } }; var file3 = document.getElementById("id_media_file_3"); file3.onchange = function(){ if (file3.files.length > 0) { document.getElementById('media_filename_3').innerHTML = file3.files[0].name; } }; var file4 = document.getElementById("id_media_file_4"); file4.onchange = function(){ if (file4.files.length > 0) { document.getElementById('media_filename_4').innerHTML = file4.files[0].name; } }; </script> {% endif %}