{% from "_formhelpers.html" import render_field, render_checkboxes, render_errors %}
{% extends "base.html" %}

{% block title %}View API data{% endblock %}

{% block menu_items %}
	<li><a href="{{url_for('homepage')}}">Homepage</a></li>
    {% if only_gables %}
		<li class="current_page_item"><a href="#">View Gables Data</a></li>
		<li><a href="{{url_for('view_data')}}">View Other Data</a></li>
	{% else %}
		<li><a href="{{url_for('view_gables_data')}}">View Gables Data</a></li>
		<li class="current_page_item"><a href="#">View Other Data</a></li>
	{% endif %}
	<li><a href="{{url_for('about')}}">About Us</a></li>
    <li><a href="{{url_for('contact')}}">Contact Us</a></li>
    <li><a href="{{url_for('admin_home')}}">Admin</a></li>
{% endblock %}

{% block content %}
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 18px;
}

textarea {
    width: 98%;
    height: 300px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    font-size: 18px;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.container {
    padding: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

#submitButton input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 15%;
}
</style>

	<div id="wrapper1">
		<div id="welcome" class="container">
			<div class="content" >
				<p style="margin-top: -15px; margin-bottom: 25px;">
					View data from the <!--<a href="#">Tide Aware API</a>.<br/><--> Tide Aware API.<br/>
					{% if provisional %}
						{% if only_gables %}
							Currently viewing the <strong>provisional data</strong> for <strong> coral gables locations</strong>.
							You can view the corrected data <a href="{{url_for('view_gables_data')}}">here</a>.
						{% else %}
							Currently viewing the <strong>provisional data</strong> for locations not in coral gables.
							You can view the corrected data <a href="{{url_for('view_data')}}">here</a>.
						{% endif %}
					{% else %}
						{% if only_gables %}
							Currently viewing the <strong>corrected data</strong> for <strong> coral gables locations</strong>.
							You can view the provisional data <a href="{{url_for('view_gables_data_provisional')}}">here</a>.
						{% else %}
							Currently viewing the <strong>corrected data</strong> for locations not in coral gables.
							You can view the provisional data <a href="{{url_for('view_data_provisional')}}">here</a>.
						{% endif %}
					{% endif %}
					<br/>
				</p>

				<form method="post">
					{{ form.hidden_tag() }}
					<div class="columns">
						<div class="column1">{{ render_field(form.location) }}</div>
						<div class="column2">{{ render_checkboxes(form.parameters, descriptions) }}</div>
						<div class="column3">
							{{ render_field(form.start_date) }}
							<br style="clear: both;"/>
							<br/>
							{{ render_field(form.end_date) }}
						</div>
					</div>
					<input class="button" type="submit" value="Search">
				</form>

				{{ render_errors([error]) }}
			</div>
		</div>

		{% if location_description %}
			<div class="container" style="text-align: center; margin-bottom: 20px;">
				<h4>{{ location_description }}</h4>
			</div>
		{% endif %}

		{% if plots and not form.errors and not error %}
			<div class="container">
				{% for plot in plots %}
					<div class="chart" id="plot{{loop.index - 1}}"></div>
					<br/>
					<script>Plotly.plot('plot{{loop.index - 1}}', {{plot | safe}});</script>
				{% endfor %}
			</div>

			{% if download_form %}
				<div style="text-align: center; margin-bottom: 25px;">
					<button class="button" onclick="document.getElementById('id01').style.display='block'" style="width: 25%;">Export Data</button>
				</div>

				<div id="id01" class="modal">
					<div class="modal-content animate">
						<div class="container">
  							<h2>Download .csv file </h2>

							{% for message in download_form.name_csv.errors %}
							  <div class="flash">{{ message }}</div>
							{% endfor %}

							{% for message in download_form.email_csv.errors %}
							  <div class="flash" id = "emailError">{{ message }}</div>
							{% endfor %}

							{% for message in download_form.subject_csv.errors %}
							  <div class="flash">{{ message }}</div>
							{% endfor %}

							{% for message in download_form.message_csv.errors %}
							  <div class="flash">{{ message }}</div>
							{% endfor %}

    						<form action="{{ url_for('csv_download') }}" method=post>
								{{ download_form.hidden_tag() }}
								{{ download_form.hidden_field() }}

								<div id="nameLabel">{{ download_form.name_csv.label }}</div>
								<div id ="nameInput">{{ download_form.name_csv }}</div>

								<div id = "emailLabel">{{ download_form.email_csv.label }}</div>
								<div id = "emailInput">{{ download_form.email_csv }}</div>

								<div id = "subjectLabel">{{ download_form.subject_csv.label }}</div>
								<div id = "subjectInput">{{ download_form.subject_csv }}</div>

								<div id = "messageLabel">{{ download_form.message_csv.label }}</div>
								<div id = "messageInput">{{ download_form.message_csv }}</div>

								<div id = "submitButton">{{ download_form.submit_csv }}</div>

        						<a href="http://wetland.fiu.edu/">
									<img src="https://i.ibb.co/rZ2NgXF/2.png" alt="2" border="0" style="margin-left: 45%;margin-right: auto; margin-bottom: 10%;">
								</a>
							</form>
						</div>
					</div>
				</div>
			{% endif %}
		{% endif %}

		<a class="weatherwidget-io" href="https://forecast7.com/en/25d72n80d27/coral-gables/?unit=us" data-label_1="CORAL GABLES" data-label_2="WEATHER" data-theme="original" >CORAL GABLES WEATHER</a>
		<script>
			!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
		</script>
	</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
{% endblock %}