{% load tom_common_extras targets_extras antares_extras %}
<div class="row mb-3">
  <div class="col">
    <div class="card">
      <div class="card-header px-1">
        <h4 class="mb-0">Details</h4>
      </div>
      <div class="table-responsive">
        <table class="table table-striped table-borderless">
          <tbody>
            {% for target_name in target.names %}
              <tr>
                {% if forloop.first %}
                  <th scope="row">Names</th>
                {% else %}
                  <th scope="row">&nbsp;</th>
                {% endif %}
                <td>{{ target_name }}</td>
              </tr>
            {% endfor %}

            {% for key, value in target.as_dict.items %}
              {% if value and key != 'name' %}
                <tr>
                  <th scope="row">{% verbose_name target key %}</th>
                  <td>{{ value|truncate_value_for_display }}</td>
                </tr>
              {% endif %}
              {% if key == 'ra' %}
                <tr>
                  <th scope="row">&nbsp;</th>
                  <td>{{ value|deg_to_sexigesimal:"hms" }}</td>
                </tr>
              {% endif %}
              {% if key == 'dec' %}
                <tr>
                  <th scope="row">&nbsp;</th>
                  <td>{{ value|deg_to_sexigesimal:"dms" }}</td>
                </tr>
              {% endif %}
            {% endfor %}
            <tr>
            <th scope="row">Broker</th>
            <td>
                {% with ra_hms=target.as_dict.ra|deg_to_sexigesimal:"hms" dec_dms=target.as_dict.dec|deg_to_sexigesimal:"dms" %}
                <a href="{% antares_url target.as_dict.name ra_hms dec_dms %}" target="_blank" rel="noopener">
                    ANTARES
                </a>
                {% endwith %}

            </td>
            </tr>
          </tbody>
        </table>
      </div>
        {% if extras %}
          <table class="table">
            <tbody>
              {% for key, value in extras.items %}
                <tr>
                  <th scope="row">{{ key }}</th>
                  <td>{{ value }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}

        {% if target.tags %}
          <p>Tags</p>
          <table class="table">
            <tbody>
              {% for key, value in target.tags.items %}
                <tr>
                  <th scope="row">{{ key }}</th>
                  <td>{{ value }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}
      </div>
  </div>
</div>