{% extends 'tom_common/base.html' %}
{% load django_bootstrap5 static crispy_forms_tags observation_extras targets_extras %}
{% block title %}Submit Observation{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{% static 'tom_common/css/main.css' %}">
<link rel="stylesheet" href="{% static 'tom_observations/css/main.css' %}">
{% endblock %}
{% block content %}
{{ form|as_crispy_errors }}
<h3>Submit an observation to {{ form.facility.value }} for <a href="{% url 'targets:detail' pk=target.id %}">{{target.name}}</a></h3>
{% if facility_link %}
    Please see the <a href="{{ facility_link }}" target="_blank">facility documentation</a> for more information.
{% endif %}
{% if missing_configurations %}
    <div class="alert alert-danger">Some {{ form.facility.value }} Facility settings ({{ missing_configurations }}) are not configured.</div>
{% endif %}
{% if target.type == 'SIDEREAL' %}
<div class="row">
    <div class="col">
    {% observation_plan target form.facility.value %}
    </div>
</div>
{% else %}
<hr>
{% endif %}
<div class="row">
    <div class="col-md-6">
        {% target_data target %}
        <h4>Lunar Distance</h4>
        {% moon_distance target width=None %}
    </div>
    <div class="col-md-6">
        <ul class="nav nav-tabs" id="tabs">
        {% for observation_type, observation_form in observation_type_choices %}
            <li class="nav-item">
                <span class="nav-link {% if observation_type == active or not active and forloop.first %}active{% endif %}" data-bs-target="#{{ observation_type }}" data-bs-toggle="tab">
                    {{ observation_type|display_obs_type }}
                </span>
            </li>
        {% endfor %}
        </ul>
        <div class="tab-content observation-form">
        {% for observation_type, observation_form in observation_type_choices %}
            <div class="tab-pane {% if observation_type == active or not active and forloop.first %}active{% endif %}" id="{{ observation_type }}">
                {% crispy observation_form %}
            </div>
        {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
{% block extra_javascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Default unitialized time fields to midnight
    timeInputs = document.querySelectorAll('input[type="time"]');
    timeInputs.forEach(input => {
      if (input.value === '') {
        input.value = '00:00';
      }
    });
});
</script>
{% endblock %}