{% load across_extras %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Observations</span>
        <a class="btn btn-sm btn-primary"
           href="{% across_app_observations_url target %}"
           target="_blank" rel="noopener noreferrer">
            View in ACROSS
        </a>
    </div>
    <div class="card-body" id="obs-table"
         hx-get="{% url 'tom_across:observation-table' target.id %}"
         hx-trigger="load"
         hx-target="#obs-table"
         hx-swap="innerHTML">
        Loading Observations...
    </div>
</div>
<div class="card mt-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Visibility</span>
        {% if target.type == 'SIDEREAL' %}
        <a class="btn btn-sm btn-primary"
           href="{% across_app_visibility_url target %}"
           target="_blank" rel="noopener noreferrer">
            View in ACROSS
        </a>
        {% endif %}
    </div>
    <div class="card-body" id="visibility-plot-wrapper"
         hx-get="{% url 'tom_across:visibility-plot' target.id %}"
         hx-trigger="load"
         hx-target="#visibility-plot-wrapper"
         hx-swap="innerHTML">
        Loading visibility...
    </div>
</div>

<p><em>TOM Toolkit Module (<a href="https://github.com/TOMToolkit/tom_across" target="_blank">tom_across</a>) version {{ version }}</em></p>