<!-- Test -->
<div class="row m-1">
    <div class="col-md-10 float-left">
        <span class="ml-2">- {{f}}</span>
    </div>
    <div class="col-md-2 text-right">
        <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
            data-target="#deleteModal_{{ fileid }}">Delete</button>
    </div>
</div>

<!-- Modal for delete confirmation -->
<div class="modal fade" id="deleteModal_{{ fileid }}" tabindex="-1" role="dialog" aria-labelledby="deleteModal_{{ fileid }}Label"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModal_{{ fileid }}">Delete File</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure that you want to delete the file <code>{{f}}</code>? The data stored in Mortimer will be
                lost!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <form method="POST" action="{{url}}">
                    <input class="btn btn-danger" type="submit" value="Delete">
                </form>
            </div>
        </div>
    </div>
</div>