{% extends "base.html" %}

{% block title %}Tropical Cyclone Intensity{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% block content %}
	<h3 align="center"> Tropical Cyclone Intensity Estimation </h3> <hr>

	<div class="row">
		{% if errors|length > 0 %}
		<div class="alert alert-danger">
			<ul>
				{% for error in errors %}
					<li>{{error}}</li>
				{% endfor %}
			</ul>
		</div>
		{% endif %}
	</div>

	<div class="row">
	    <div class="row" id="user-panel" style="border: 0px; border-style: ridge groove inset">
			<!-- <h3>Users Panel</h3> -->
			<!-- <hr> -->
			<form role="form" action="/" method="POST" enctype="multipart/form-data" >
				<div class="row">
					<div class="form-group">
						<div class="col-md-6">
							<input type="text" name="url" class="form-control" id="url-box" placeholder="Enter URL..." style="max-width: 100;">
							<br>

							<!-- <label class="btn btn-default btn-file">
							    Select an image <input type="file" name="file" style="display: none;">
							</label> -->
							<div>
								<input type="file" name="file" class="btn-default" size="160"><br /><br />
							</div>
						</div>


						<div class="col-md-6">
							 <div class="input-group">
							 		<span class="input-group-addon">Select a model</span>
						            <select name="model_name" class="selectpicker form-control" width=300px>
						            <option value="hurricane_category">TC Intensity Estimation</option>
						            <!-- <option value="no_select"> select one </option>
					              	{% for o in data %}
					              		<option value="{{ o.name }}">{{ o.name }}</option>
					              	{% endfor %} -->

						            </select>
						    </div>
						    <br>
						    <button type="submit" class="btn btn-primary">Classify</button>
						</div>
					</div>
				</div>

			</form>
			<hr>
		</div>

		<br>
		<!-- {{results}} -->
		{% if "classified" in results.keys() %}
			<!-- <h3 align="center">Results</h3> -->
			<div class="row" id="classification-output" style="border: 0px; border-style: ridge groove inset">
				<div class="col-md-6">
				{% if results.filename %}
					{{results.filename}}
				{% endif %}
				<br>
					<img src={{results.image_url}} width=80%>

				</div>
				<div class="col-md-6">
				<h4 align="center"> Predictions </h4>
					{% for class, percentage in results.predictions[:3] %}
						{{class.upper()}} : {{percentage}}%
						<div class="progress ">
							   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{percentage}}%"></div>
							</div>
						<br>
					{% endfor %}
				</div>
			</div>
			<br>
			<hr>
		{% endif %}
	</div>


{% endblock %}