{% extends "cosmic_base.html" %}
{% block title %}Custom Plotting{% endblock %}
{% block head_additions %}
{% endblock %}
{% block content %}
	<h1>Custom functionality</h1>

    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                Location
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                {# TODO: Switch from google maps to openstreet map #}
                <iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q={{ location_vars['Latitude'] }},{{ location_vars['Longitude'] }}&amp;key=AIzaSyBjX-IrwBEp7lncv8Q-OXsY549c5zNh_kY"></iframe>
            </div>
        </div>
    </div>

    <br>
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                Custom plotting
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                    <form action="/histogram.png" target="_blank">
                        The application uses Unix timestamps to save the time of events. Thus for creating a custom plot the application will want to know the start and end time of the plot as Unix timestamps.<br>
                        To convert UTC time to a useful Unix timestamp, we recommend <a href="https://www.unixtimestamp.com/">this</a> website.
                        <br><br>
                          <b>Start time</b> of the plot in UTC UnixSeconds (negative seconds will mean "seconds before last measurement"):<br>
                          <input type="text" name="start_time" value="-300"><br>
                          <b>End time</b> of the plot in UTC UnixSeconds(the plot will not extend further than the available data):<br>
                          <input type="text" name="end_time" value="9000000000"><br>
                          <b>Bin size</b> for the histogram in seconds (note that too many bins will slow down the histogram creation):<br>
                          <input type="text" name="bin_size_seconds" value="10"><br><br>
                         <input type="submit" value="Create plot">
                    </form>
            </div>
        </div>
    </div>

{% endblock %}