
 <!-- Modal -->
<div id="fileUploadModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" style="width: 97%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="myModalLabel">Upload files</h3>
      </div>
      <div class="modal-body">
        <!-- <p>This interface will work only in server mode and inside Cambridge University network. For home uploads please use the upload form.</p>  -->
        <!-- The file upload form used as target for the file upload widget -->
        <p>
            <span class="label label-info">Info</span> 
            Use "Add files" button or drag and drop files here. 
            Specify genome version and user initials. Comments are optional. 
            You can click the person/genome/comment icon to assign field value to multiple files.
        </p>
        
        <form id="fileupload" method="POST" enctype="multipart/form-data">
            <!-- Redirect browsers with JavaScript disabled to the origin page -->
            <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="row fileupload-buttonbar">
                <div class="col-lg-7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Add files...</span>
                        <input type="file" name="files[]" multiple>
                    </span>
                    <button class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start upload</span>
                    </button>
                    <button type="reset" class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel upload</span>
                    </button>
                    <button class="btn btn-default btn-sm defaults_btn" onClick="showDef(this)">
                        <i class="icon-star icon-white"></i>
                        <span>Set defaults...</span>
                    </button>
                    <span class="fileupload-process"></span>
                </div>
                <!-- The global progress state -->
                <div class="col-lg-5 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                    </div>
                    <!-- The extended global progress state -->
                    <div class="progress-extended">&nbsp;</div>
                </div>
            </div>
            <div class="fileupload-defaults", style="display:none;">
              <div class="row">
                <div class="col-md-2">
                    <div class="input-group">
                      <div class="input-group-addon"><i class="icon-user"> User </i></div>
                      <input name="user" class="f1_user_default form-control" type="text" placeholder="User..." style='width:90px'>
                    </div>
                </div>
                <div class="col-md-3">
                   <div class="input-group">
                      <div class="input-group-addon"><i class="icon-info-sign"> Genome </i></div>
                      <select name="genome" class='f1_genome_default form-control' style='width:180px'></select>
                    </div>
                </div>
                <div class="col-md-2">
                  <label class="checkbox" for="f1_warn_default"><input id="f1_warn_default" type="checkbox"/><span>Warn on page exit.</span></label>
                </div>
                <div class="col-md-3">
                       <button class="btn btn-primary" onClick="submitDef(this)"><i class="icon-ok"></i><span> Submit</span></button>
                       <button class="btn btn-default" onClick="$('.fileupload-defaults').hide()"><i class="icon-ban-circle"></i><span> Cancel</span></button>
                </div>
              </div>
              <hr />  
            </div>
            <br />
            <!-- The table listing the files available for upload/download -->
            <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
        </form>
        
      </div>
    </div>
  </div>  
</div>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td style="min-width:250px; max-width:250px; word-break:break-all;">
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
            <span class="preview"></span>
        </td>
        <td class="user">
            <div class="input-group" style="width: 100px;">
              <span class="input-group-btn">
                <button class="btn btn-default" onclick=copyAnnotation(this)><i class="icon-user"></i></button>
              </span>
              <input required name="user" class="f1_user form-control" type="text" placeholder="User...">
            </div>
        </td>
                  
        <td class="genome">
            <div class="input-group" style="width: 200px;">
              <span class="input-group-btn">
                <button class="btn btn-default" onclick=copyGenome(this)><i class="icon-info-sign"></i></button>
              </span>
              <select required name="genome" class='f1_genome form-control'></select>
            </div>
        </td>
                  
        <td class="comments">
            <div class="input-group" style="width: 150px;">
              <span class="input-group-btn">
                <button class="btn btn-default" onclick=copyAnnotation(this)><i class="icon-pencil"></i></button>
              </span>
              <input name="comments"  type="text" class="form-control" placeholder="Comments...">
            </div>
        </td>
        
        <td>
            <p class="size">Processing...</p>
        </td>
        
        <td>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name" style="max-width:250px; word-break:break-all;"><span>{%=file.name%}</span></td>
            <td class="error" colspan="3"><span class="label label-danger">Error</span> {%=file.error%}</td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2" class="jobId">JobID: {%=o.data.jobId%}</td>
        {% } else { %}
            <td class="name" style="max-width:250px; word-break:break-all;"><b>{%=file.name%}</b></td>
            <td colspan="3", class="server_message"><span id={%=o.data.jobId%}><span class="label label-info"><i class="icon-refresh icon-white"></i> Processing file...</span></span></td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            <td colspan="2" class="jobId">JobID: {%=o.data.jobId%}</td>
        {% } %}
    </tr>
{% } %}
</script>
