<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' type="text/css" href="{{ url_for('static',filename='styles/style.css') }}">
	<script src="{{url_for('static', filename='index.js')}}"></script>
	<title>inSPIRE-Interactive</title>
</head>
<body onload="checkFilePattern('{{ server_address }}', '{{ user }}', '{{ project }}', 'proteome-select')">	
	<!-- main page-->
	<dev class = "page-wrapper">
	
		<!-- header -->
		{{ inspire_header|safe }}
        <hr>
        <br><br>

        <div class = "download-div">
            <div style=" width:1404px; padding-left: 30px; text-align: left; background: linear-gradient(to right, aquamarine 40%, #FFFFFF 58%); ">
                <p>Proteome Fasta File</p>
            </div>
        </div>
        <div style = "display:flex; text-align:center; height:150px; justify-content: center; align-items: center; font-size:larger; ">
                <p>For inSPIRE to provide pathogen eptiope candidates it requires both host and pathogen FASTA files.</p>
        </div>
        <div class="upload-div">
            <div id="all-proteome-div">

                <!-- PROTEOME DIV -->
                <div id="sub-proteome-select-div" class="row" style="margin-left: 0%;">
                    <div id="proteome-select-column-1" style="margin-left: 0%;">
                        <p>Upload the host proteome:</p>
                        <input type="file"  class="ms-data-extra" style = "font-size: large; " id="host-proteome-file-upload" multiple="false" />
                        <br>
                        <p>Upload the pathogen proteome:</p>
                        <input type="file"   class="ms-data-extra"  style = "font-size: large; " id="pathogen-proteome-file-upload" multiple="false" />
                        <br>
                        <br>

                        <input type="submit"   class="ms-data-extra" style = "width:130px; font-size: large; " onclick="uploadFiles('{{ server_address }}', '{{ user }}', '{{ project }}', 'proteome-select')">
                        <p id="proteome-select-waiting" style="display:none;">Files uploading...</p>
                        <br>
                        <progress id="progressBar" value="0" max="100" style="width:300px;display:none"></progress>
                        <p id="loaded_n_total"></p>
                        <p id="proteome-select-no-files" style="display:none; color:red;">Please upload both files before proceeding.</p>
                    </div>

                    <div class="vl-2"></div>

                    <div id="proteome-select-column-2" style="margin-left: 0%;">
                        <p>Files currently loaded:</p>
                        <ul id="proteome-select-file-list"></ul>
                        <p>
                            If you have uploaded incorrect files and need to delete them, click below:
                        </p>
                        <input autocomplete="off"   class="ms-data-extra"  style = "width:160px; font-size: large;" type="submit" value="Delete All Files" onclick="clearFilePattern('{{ server_address }}', '{{ user }}', '{{ project }}', 'proteome-select')">
                        <p>
                            If you updated files manually, refresh the file list here
                        </p>
                        <input autocomplete="off"  class="ms-data-extra"  style = "width:160px; font-size: large;"  type="submit" value="Refresh File List" onclick="checkFilePattern('{{ server_address }}',  '{{ user }}', '{{ project }}','proteome-select')">
                    </div>
                </div>
            </div>
            <br>
        </div>

        <br><br><br>
        <div style = " display:flex; justify-content:center; align-items:center; font-size: larger; ">
			<div style = "width:200px;">
                <button id="back-button" class="ms-data-extra-button"   onclick="revertGUI('{{ server_address }}', '{{ user }}', '{{ project }}', 'proteome')">
                    &xlarr; Go back
                </button>
            </div>
            <div style = "width:200px;">
                <button id="forward-button" class="ms-data-extra-button"  onclick="forwardGUI('{{ server_address }}', '{{ user }}', '{{ project }}', 'proteome')">
                    Proceed &xrarr;
                </button>
            </div>

        </div>
		<div style = "height: 100px;"></div>

		{{ inspire_footer|safe }}

    </dev>
</body>
</html>