{% load widget_tweaks %}

{% if reply %}
    <form method="post" action="{% url "reply" toot.id %}" enctype="multipart/form-data">
{% else %}
        <form method="post" action="{% url "toot" %}" enctype="multipart/form-data">
{% endif %}
    {% csrf_token %}

    <div class="field">
        <label class="label"> {{ form.spoiler_text.label }}</label>
        <div class="control">
            {% render_field form.spoiler_text class+="input" placeholder="Optional" %}
        </div>
    </div>

    <div class="field" >
        <label class="label" >{{ form.status.label }}</label>
        <div class="control">
            {% render_field form.status class+="textarea 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 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" 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" 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" 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" placeholder="Describe attachment" %}
        </div>
    </div>


    <div>
        {{ form.errors }}
    </div>

    <div class="field">
        <div class="control">
            <input type="submit" class="button is-primary"
                   name="toot" value="Toot">
        </div>
    </div>
        </form>

        {% if not fullbrutalism %}
<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 %}