{% extends 'core/fits_app.html' %}
{% load static %}

{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'processing/css/select_photref.css' %}"/>
{% endblock extra_head %}

{% block header_title %}{% block app_title %}
Select Photometric Reference
{% endblock %}{% endblock %}

{% block left_menu %}
<a href="{% url 'processing:record_photref_selection' target_index=target_index image_index=image_index %}">
    <div class="lcars-element 
                button 
                lcars-melrose-bg
                lcars-u-1-2">
        Set This Image As Reference
    </div>
</a>
{% url 'processing:select_photref_image_recalc' target_index=target_index image_index=image_index values_range=range values_transform=transform as updateURL %}
<div onclick="updateView('{{updateURL}}')">
    <div class="lcars-element 
                button 
                lcars-husk-bg
                lcars-u-1-1">
        Recalc. merit
    </div>
</div>
{% endblock left_menu %}

{% block full_view %}
{{ block.super }}
<div id="side-bar" class="lcars-row lcars-u-2" style="overflow: hidden;">
    <div id="vert-hist-sep" class="lcars-column">
        <div id="hist-scroll-up" 
             class="lcars-bracket top lcars-melrose-bg" 
             style="height:30%">
        </div>
        <div id="resize-hist" class="lcars-bar" style="height:40%;"></div>
        <div id="hist-scroll-down"
             class="lcars-bracket bottom lcars-melrose-bg" 
             style="height:30%">
        </div>
    </div>
    <div id="hist-parent" class="lcars-col">
        {% for hist in histograms %}
        {{hist|safe}}
        {% endfor %}
    </div>
</div>
{% endblock full_view %}

{% block add_js %}
<script src="{% static 'processing/js/select.photref.js' %}"></script>
{% endblock add_js %}
