<!DOCTYPE html>
<html>

<head>
	<title>Smart Football Predictor</title>
	<link rel="stylesheet" type="text/css" href="static/style.css">
	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon_1.ico') }}">

	<!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

</head>
<body>
	
	<div class='container'>

		<div class='media_links'>

			<a href="https://www.linkedin.com/in/matthewhaythornthwaite/">
				<img class='linkedin' src="/static/images/Linkedin_logo_b.png">
			</a>

			<a href="https://github.com/mhaythornthwaite/Football_Prediction_Project">
			    <img class='github' src="/static/images/Github_logo.png">
			</a>
		</div>

		<div class='web_logo_container'>
			<img class='web_logo' src="/static/images/Smart_Football_Predictor-logo.png">
		</div>

		<div class='web_description'>Smart Football Predictor is a simple Flask web application designed to display machine learning predictions built in a python backend. Premier league game data has been collected from api-football, processed and used to train numerous experimental models, before being used to predict the outcome of future premier league fixtures. If you would like to learn more, please visit my Github repository or contact me on linkedin.</div>

		<br> <hr class="line" width='65%'>
				
		{% for n in iterator %}
		<div class='game'>
			<div class='teamheading'>
			    <div class='heading1'>{{pl_pred['Home Team'][n]}}</div>
			    <div class='heading2'>{{pl_pred['Away Team'][n]}}</div>
			    <div class='game_description'> Date: {{pl_pred['Game Date'][n]}} &nbsp Venue: {{pl_pred['Venue'][n]}} </div>	    
			</div>
            <div class='collapsible_heading'>
              <button type="button" class="collapsible"> <img class='dropdown_img' src='/static/images/dropdown_arrow.png'> Form </button>

                <div class="content">

	                {% for i in iterator2 %}	
	                <div class='past_perform_home'>

	                	<div class='past_perform_result'>
		                	<b>{{additional_stats_dict[pl_pred['Home Team ID'][n]]['Result'].iloc[i]}}</b>
		                </div>

		                {{additional_stats_dict[pl_pred['Home Team ID'][n]]['Home_Team'].iloc[i]}} {{additional_stats_dict[pl_pred['Home Team ID'][n]]['Home_Team_Score'].iloc[i]|int}} - {{additional_stats_dict[pl_pred['Home Team ID'][n]]['Away_Team_Score'].iloc[i]|int}} {{additional_stats_dict[pl_pred['Home Team ID'][n]]['Away_Team'].iloc[i]}} 
		                <br>
		            </div>
	                

	                <div class='past_perform_away'>

		                {{additional_stats_dict[pl_pred['Away Team ID'][n]]['Home_Team'].iloc[i]}} {{additional_stats_dict[pl_pred['Away Team ID'][n]]['Home_Team_Score'].iloc[i]|int}} - {{additional_stats_dict[pl_pred['Away Team ID'][n]]['Away_Team_Score'].iloc[i]|int}} {{additional_stats_dict[pl_pred['Away Team ID'][n]]['Away_Team'].iloc[i]}} 

		                <div class='past_perform_result'>
		                	<b>{{additional_stats_dict[pl_pred['Away Team ID'][n]]['Result'].iloc[i]}}</b>
		                </div>

		                <br>
		            </div>
	                {% endfor %}                

                </div>
            </div>
            	<div class='game_probability'>
					<div class='logo_home'>
						<a> 
							<img class='logo_png' src={{pl_pred['Home Team Logo'][n]}}> 
						</a>
		            </div>
					<section class='probability_annot'>
			    		<div class="win" style="width: calc({{pl_pred['Home Win'][n]}}% - 2px)">{{pl_pred['Home Win'][n]}}%</div>
			    		<div class="draw" style="width: calc({{pl_pred['Draw'][n]}}% - 2px)">{{pl_pred['Draw'][n]}}%</div>
			    		<div class="loss" style="width: calc({{pl_pred['Away Win'][n]}}% - 2px)">{{pl_pred['Away Win'][n]}}%</div>
					</section>
					<div class='logo_away'>
						<a> 
							<img class='logo_png' src={{pl_pred['Away Team Logo'][n]}}> 
						</a>
			    </div>
            </div>
		</div>
		{% endfor %}
	</div>

<script type="text/javascript" src="static/script.js"></script>

</body>
</html>


