<!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>	
	<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>Choose your inSPIRE option</p>
           </div>
       </div>
        <div style = "display:flex; height:120px; justify-content: center; align-items:center; font-size: larger; ">
            <div style=" width:1420px;">
               <p> If you are interested only in increasing peptide identification rates and wish to perform your
                own downstream analysis select <b>inSPIRE-Standard</b>. For specialised analysis of infeceted
                cells select <b>inSPIRE-Pathogen</b>.</p>
            </div>
        </div>

        <div class="center-content" style="height: 100px;">
            <div class="buttons"> 
                <div id="standard-button-div" style = "margin-right:40px;">
                    <button 
                    id="inSPIRE-Standard-button" class="white-black-button"
                    onclick="selectInspireType('standard', '{{ server_address }}', '{{ user }}', '{{ project }}')"
                    >inSPIRE<br>Standard</button>
                              
                </div>
                <div id="select-button-div" style = "margin-left:40px;">
                    <button 
                    id="inSPIRE-Select-button" class="black-white-button"
                    onclick="selectInspireType('pathogen', '{{ server_address }}', '{{ user }}', '{{ project }}')"
                    >inSPIRE<br>Pathogen</button>
                    
                </div>
                
            </div>
        </div>
	

       </div>
       <br><br><br><br>
       <br><br><br><br>
        <!--footer-->

        {{ inspire_footer|safe }}
    </dev>
</body>
</html>