{% extends 'tom_common/target-dash.html' %}
{% load bootstrap4 static observation_extras dataproduct_extras gemini target_navbar tom_overrides%}
{% block title %} Observation record: {{ observationrecord.id }} {% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{% static 'tom_observations/css/main.css' %}">
{% endblock %}
{% block target_obs_content %}
{% render_target_navbar %}
<div class="row">
  <div class="col text-center">
    <h2>{{ object.observation_id }} @{{ object.facility }}</h2>
  </div>
</div>
<div class="row mb-5">
  <div class="col text-center">
    {% if editable %}
      <p>{% update_observation_id_form object %}</p>
    {% endif %}
    <p class="my-auto pb-3">
      {% if object.facility != "GEM" %}
        {% if object.url %}
          <a
            class="btn btn-outline-primary"
            href="{{ object.url }}"
            target="_blank"
          >
            View at Observatory »
          </a>
        {% endif %}
      {% else %}
        <a
          class="btn btn-outline-primary {% if not gpp_url %}disabled{% endif %}"
          href="{{ gpp_url|default:'#' }}"
          target="_blank"
        >
          View at Observatory »
        </a>
      {% endif %}
    </p>
    <p class="my-auto"><strong>Created:</strong> {{ object.created }} <strong>Modified:</strong> {{ object.modified }}</p>
    <p class="my-auto"><strong>Status:</strong> {{ object.status }}</p>
  </div>
</div>
<hr class="mb-5" />
{% if object.facility == "GEM" %}
  {% render_goa_query_form %}
  {% render_launch_dragons %}
{% endif %}
<div class="row justify-content-center">
  <div class="col-md-12">
    <h4>Saved Data Products</h4>
    <form method="POST" action="{% url 'tom_dataproducts:group-data' %}">
      {% csrf_token %}
      <div class="form-row">
        <div class="col-sm-4">
          {% bootstrap_field form.group layout='inline' %}
          {% for product in data_products.saved %}
            <input type="hidden" name="products" value="{{ product.id }}">
          {% endfor %}
        </div>
        <div class="col-sm-8">
          {% buttons %}
          <input type="submit" value="Add to group" class="btn btn-primary">
          <a href="{% url 'dataproducts:group-list' %}">Manage groups</a>
          {% endbuttons %}
        </div>
      </div>
      {% goats_dataproduct_list_for_observation_saved data_products request object %}
    </form>
    {% if object.facility != "GEM" %}
    <form method="POST" action="{% url 'tom_dataproducts:save' object.id %}">
      {% csrf_token %}
      <input type="hidden" value="{{ object.facility }}" name="facility">
      <input type="hidden" value="ALL" name="products">
      <input type="submit" value="Save All" class="btn btn-primary float-right">
    </form>
    <form method="POST" action="{% url 'tom_dataproducts:save' object.id %}">
      {% csrf_token %}
      <input type="hidden" value="{{ object.facility }}" name="facility">
      <div class="row">
        <div class="col-md-9">
          <h4>Unsaved data products</h4>
        </div>
        <div class="col-md-3">
          <input type="submit" value="Save Selected" class="btn btn-primary">
        </div>
      </div>
      {% dataproduct_list_for_observation_unsaved data_products %}
    </form>
  </div>
  {% endif %}
  {% if object.facility != "GEM" %}
  <div class="col-md-12">
  <h4>Request Parameters</h4>

<div class="row align-items-center mb-3">
  <div class="col-md-12">


    {% observationtemplate_from_record object %}
    <button
      class="btn btn-outline-primary ms-2"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#all-parameters"
      aria-expanded="false"
      aria-controls="all-parameters"
      onclick="this.innerText =
        this.innerText.includes('Show')
        ? 'Hide request parameters'
        : 'Show request parameters'"
    >
      Show request parameters
    </button>

  </div>
</div>

<div id="all-parameters" class="collapse">
  <div class="card card-body">
    <dl class="row mb-0">
      {% for k, v in object.parameters.items %}
        <dt class="col-sm-5 fw-semibold text-nowrap">{{ k }}</dt>
        <dd class="col-sm-7 text-muted mb-2">{{ v }}</dd>
      {% endfor %}
    </dl>
  </div>
</div>

  </div>
  {% endif %}
</div>
{% endblock %}