{% extends "layout.jinja2" %}

{% block content %}
    <!-- Following are hidden elements to allow scripts to fetch new information -->
    <div id="calculate_url" class="dynamic-update hidden">{{ calculate_url }}</div>
    <div id="timestep_url" class="dynamic-update hidden">{{ timestep_url }}</div>
    <div id="calculate_all_url" class="dynamic-update hidden">{{ calculate_all_url }}</div>
    <div id="cascade_url" class="dynamic-update hidden">{{ cascade_url }}</div>
    <div id="tree_url" class="dynamic-update hidden">{{ tree_url }}</div>
    <div id="halo_number" class="dynamic-update hidden">{{ halo_number }}</div>
    <div id="object_typetag" class="dynamic-update hidden">{{ halo_typetag }}</div>

    <h1 class="dynamic-update" id="halo-title">{{ halo_typetag  }} {{ halo_number }} of {{ timestep }}</h1>


    <div class="keeponscreen dynamic-update" id="navigation">

        <form id="select-othersimulation">
            <span class="mono"><strong>{{ halo_path }}</strong></span>
            <table>
                <tr><td>Find in a different timestep</td>
                    <td>
                    {% for link, name in zip(time_links.urls, time_links.names) %}
                        <a href="{{ link }}" class="ajaxenabled">{{ name }}</a>
                    {% endfor %}
                  </td>
                </tr>
               <tr><td>Look at another {{ halo_typetag }}:</td>
               <td id="nav-to-another"><img src="/static/spinner.gif"></td>
               </tr>
            <tr><td><label for="target_sim_id">Find in another simulation:</label></td>
            <td><select name="target_sim_id" id="target_sim_id" onchange="findInOtherSimulation();">
                        {% for sim in all_simulations %}
                            {% if sim.name==simulation %}
                                <option value="{{ sim.url }}" selected="selected">{{ sim.name }}</option>
                            {% else %}
                               <option value="{{ sim.url }}" >{{ sim.name }}</option>
                            {% endif %}
                        {% endfor %}
                    </select></td></tr>
                <tr><td><label for="target_sim_id">Raw links to other objects:</label></td>
                <td><select name="halo_link" id="halo_link" onchange="followHaloLink();">
                <option value="" selected></option>
                        {% for sim in halo_links %}
                               <option value="{{ sim.url }}" >{{ sim.name }}</option>
                        {% endfor %}
                    </select></td></tr>
                <tr><td>Unique ID in database</td>
                <td><span class="mono">{{ this_id }}</span></td></tr>
                <tr><td>Original halo finder ID</td>
                <td><span class="mono">{{ finder_id }}</span></td></tr>
            </table>
        </form>

    </div>

    <div id="imgbox_container" class="keeponscreen">
        <div>
        <form id="image_form" onsubmit="fetchPlot(); return false;" onchange="fetchPlot();" class="autorestore">
            <input name="type" value="tree" type="radio" id="type-tree"><label for="type-tree">Merger tree</label>;
            or plot for: <input name="type" value="gather" type="radio" id="type-gather"><label for="type-gather">This timestep</label>
            <input name="type" value="cascade" type="radio" id="type-cascade" checked><label for="type-cascade">This halo</label><br/>
            <input name="logx" type="checkbox" id="logx"/><label for="logx">log x</label>
            <input name="logy" type="checkbox" id="logy"/><label for="logy">log y</label>
            <label for="image_format">Image format</label>
            <select id="image_format">
                <option value='svg' selected>SVG</option>
                <option value='png'>PNG</option>
                <option value='pdf'>PDF</option>
            </select>
            <input name="logimage" type="checkbox" id="logimage"/><label for="logimage">log images</label>.
            <input type="checkbox" name="use_range" id="use_range" onclick="rangeDisplay()"/><label for="use_range">Use range</label>
            <p id="vmin-vmax-range">
                <label for="vmin">Vmin</label>
                <input name="vmin" type="range" id="vmin" min="0", vmax="100" value="0" onchange="fetchPlot()">
                <label for="vmax">Vmax</label>
                <input name="vmax" type="range" id="vmax" min="0", vmax="100" value="100" onchange="fetchPlot()">
            </p>
            <span class="download-area-csv"><a href="#" id="download-csv-link">&#x25BC; Download CSV</a></span>
            <span class="download-area-tree"><a href="#" id="download-merger-tree">&#x25BC; Download Merger Tree</a></span>
        </form>
        </div>
        <div id="imgbox"></div>
    </div>


    <div class="dynamic-update" id="properties-area">
    <h2>Properties</h2>


    <form id="properties_form_{{ halo_typetag }}" onsubmit="return false;" class="autorestore" onchange="plotSelectionUpdate();" >
    <input type="hidden" name="object_typetag" value="{{ halo_typetag }}"/>
    <!-- next two hidden input types are just to keep track of the pagination
    on the timestep view, since the form states are carried between pages using
    session storage -->
    <input type="hidden" name="page" />
    <input type="hidden" name="per_page" />
    <table>
        <tr class="collapsibletable"><th>Plot</th><th>Property</th><th>Value</th></tr>
        <tr id="custom-row-1">
            <td id="plotctl-custom-row-1" class="plotcontrols"></td><td id="nametg-custom-row-1" class="editable"></td><td id="contents-custom-row-1"></td>
        </tr>
        {%  for prop in properties %}
            <tr>
                {%  if prop.is_array %}
                    <td class="plotcontrols">
                        <input name="justthis" type="radio" value="{{ prop.name }}" onclick="resetRadio('x'); resetRadio('y');"/>
                    </td>
                {% else %}
                    <td class="plotcontrols">
                        <input name="x" type="radio" value="{{ prop.name }}" onclick="resetRadio('justthis');"/>
                        <input name="y" type="radio" value="{{ prop.name }}" onclick="resetRadio('justthis');"/>
                    </td>
                {% endif %}
                <td>{{ prop.name }}</td><td>{{ prop.value }}</td>
            </tr>
        {%  endfor %}
    </table>
    </div>
    </form>

    <script type="text/javascript" src="{{ request.static_url('tangos.web:static/timestepdata.js') }}"></script>
    <script type="text/javascript" src="{{ request.static_url('tangos.web:static/halo_view.js') }}"></script>
{% endblock content %}
