{% 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' %}?photref={{ dr_fname|urlencode:'' }}">
    <div class="lcars-element
                button
                lcars-melrose-bg
                lcars-u-1-2"
         id="tutorial-set-photref-image">
        Set This Image As Reference
    </div>
</a>
{% endblock left_menu %}

{% block footer_fill_bar %}
<div class="lcars-bar horizontal fill bottom">
    <div class="lcars-title right" style="white-space: nowrap;">{{ fits_fname }}</div>
</div>
{% endblock footer_fill_bar %}

{% 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="resize-hist" class="lcars-bar" style="height:100%;"></div>
    </div>
    <div id="hist-parent" class="lcars-col">
        {% comment %} Which images are not offered, because the magfit
           exclusion rule excludes them, or why every one is. {% endcomment %}
        {% if photref_note %}
        <div class="photref-note">{{ photref_note }}</div>
        {% endif %}
        {% 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 %}