<div class="card"> 
    <form 
        hx-encoding='multipart/form-data'  
        _='on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100'
        hx-on::after-request="this.reset()"
    >
    <div class="card-content">
        <div class="row">
            <span class="card-title">Создавай тред уже!</span>
        </div>
        <div class="row">
            <div class="input-field col s6">
                <input id="send_this_text" name="send_this_text" type="text" >
                <label for="send_this_text">Печатать сюда</label>
            </div>
        </div> 
        <div class="row">
            <div class="input-field col s6"> 
                <div class="file-field input-field">
                    <div class="btn">
                        <span>File</span>
                        <input id="file" name="file" type="file" multiple>
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Upload one or more files">
                        <progress id='progress' value='0' max='100'></progress>
                    </div>
                    <!-- <div class="file-progress">
                    </div> -->
                </div> 
            </div> 
        </div>
    </div>  
    <div class="card-action">  
        <a href="/{{board}}/create-thread/{{ target_post_id }}">
            <button class="btn waves-effect waves-light" 
                type="submit" name="action" hx-encoding='multipart/form-data'
                _='on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100'
                hx-post="/{{board}}/create-thread/{{ target_post_id }}" 
                hx-include="[name='send_this_text'], [name='file']"  
            >
                Отправить!!
                <i class="material-icons right">send</i>
            </button>
        </a>
    </div>  
    </form>
</div>