@model HeuristicLab.Clients.Hive.WebJobManager.ViewModels.UploadedJobViewModel


<div class="panel panel-default"
     style="border-width:2px!important;padding:17px;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">


    <form method="post"
          asp-action="Uploader"
          asp-controller="Job" enctype="multipart/form-data">
        <input onchange="printFiles()"
               type="file"
               id="files"
               name="files"
               multiple accept=".hl"
               style="display:none" />

        <div onclick="firefilebutton()"
             class="btn btn-info btn-lg btn-block"
             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:1px 1px black;">
            <i class="fa fa-folder-open-o"></i> Choose file(s) to upload to the server
        </div>

        <div class="row" style="margin:10px">

            <div id="selectedfiles">
                <h3>Files</h3>
                <p>No files selected: press the above button to choose files</p>
            </div>

            <button style="margin-bottom:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:2px 2px black;"
                    type="button"
                    disabled
                    id="del"
                    class='btn btn-danger'
                    onclick='deletefiles()'>
                <span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
                Remove files
            </button>

            <div style="margin-top:20px;margin-bottom:20px">

                <label for="basic-url">Directory name</label>
                <div class="input-group">
                    <span class="input-group-addon"
                          id="basic-addon3">
                        .../uploads/@(Model.User.currentUser.UserName != null ?  Model.User.currentUser.UserName : Model.User.currentUser.FullName)/
                    </span>
                    <input type="text"
                           disabled
                           class="form-control"
                           id="directory"
                           name="directory"
                           aria-describedby="basic-addon3"
                           
                           list="dirnames"/>
                    <datalist id="dirnames">
                        @if (!Model.DisplayDatePaths.Contains(DateTime.Now.ToString("yyyy.MM.dd")))
                        {
                            <option value="@(DateTime.Now.ToString("yyyy.MM.dd"))">Creates new map for today</option>
                        }    
                        @foreach(var d in Model.DisplayDatePaths)
                        {
                            <option value="@d"></option>
                        }
                    </datalist>
                </div>
            </div>
            <button style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                 text-shadow:2px 2px black;"
                    disabled
                    id="upl"
                    class="btn btn-lg btn-block btn-success"
                    type="submit">
                <i class="fa fa-plus-square"></i> Add to uploads
            </button>
        </div>

    </form>
</div>

<script type="text/javascript">
    function printFiles() {
        var div = document.getElementById("selectedfiles");
        var files = document.getElementById("files").files;
        div.innerHTML = "<h3>Files</h3>";
        if (files.length > 0) {
            document.getElementById("upl").disabled = false;
            document.getElementById("del").disabled = false;
            document.getElementById("directory").disabled = false;


            for (var i = 0; i < files.length; i++) {
                div.innerHTML += "<p>File " + (i + 1) + ":" + files[i].name +
                    "</p>";
            }

        }
        else {
            div.innerHTML += "<p>No files selected</p>";
            document.getElementById("upl").disabled = true;
            document.getElementById("del").disabled = true;
            document.getElementById("directory").disabled = true;
        }

    }
    function firefilebutton() {
        document.getElementById("files").click();

    }
    function deletefiles() {
        var filesarr = document.getElementById("files").files;
        document.getElementById("files").value = "";
        printFiles();
    }
</script>