{% extends "base.html" %}

{% load tags %}
{% load static %}

{% block title %} - {{ launch.name }}{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'lib/admin-lte/plugins/chart.js/Chart.min.css' %}">
{% endblock %}

{% block top-menu-left %}
<span class="h4 mb-0 mr-3 text-truncate d-none d-md-block">{{ launch.name }}</span>
{% endblock %}

{% block top-menu-right %}
<ul class="navbar-nav nav nav-pills" data-widget="treeview" role="menu" data-accordion="false" id="tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
      aria-selected="true" aria-label="Information"><i class="nav-icon fas fa-rocket"></i>
      <p class="d-none d-lg-inline-block text-sm">Info</p>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="satellites-tab" data-toggle="tab" href="#satellites" role="tab"
      aria-controls="satellites" aria-selected="false" aria-label="Satellites">
      <i class="nav-icon fas fa-satellite-dish"></i>
        <span class="badge badge-satnogs-primary navbar-badge">{{ launch.satellites_count }}</span>
      <p class="d-none d-lg-inline-block text-sm">Satellites</p>
    </a>
  </li>
</ul>
{% endblock %}

{% block top %}
<span class="h4 mb-0">{{ launch.name }}</span>
{% endblock %}

{% block content %}
<div class="row h-100 pl-2 pr-3">
  <!-- The following div is managed by the tab menus -->
  <div class="col-12 tab-content mx-2 pt-3" id="myTabContent">

    <!-- Profile panel -->
    <div class="tab-pane fade show active mx-1" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div class="card-columns">
        <!-- Launch Information -->
        <div class="card card-info">
          <div class="card-header card-satnogs-header">
            Launch information
          </div>
          <div class="card-body">
            <dl class="row">
              <dt class="col-sm-5">Name</dt>
              <dd class="col-sm-7">{{ launch.name }}</dd>
              {% if launch.launched %}
              <dt class="col-sm-5">Launch Date</dt>
              <dd class="col-sm-7">{{ launch.launch_date }}</dd>
              {% endif %}
              <dt class="col-sm-5">Number of Satellites</dt>
              <dd class="col-sm-7">{{ launch.satellites_count }}</dd>
            </dl>
          </div>
        </div>
        <!-- Launch Links -->
        <div class="card card-info">
          <div class="card-header card-satnogs-header">
            Launch Links
          </div>
          <div class="card-body text-center">
            <a class="btn btn-info m-1 satnogs-link-btn"
              href="{{ launch.forum_thread_url }}" target="_blank"
              aria-label="Forum Thread"
              role="button">
              Forum Thread
              <i class="mr-2 fas fa-external-link-alt"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Satellites panel -->
    <div class="tab-pane fade" id="satellites" role="tabpanel" aria-labelledby="satellites-tab">
      <div class="mx-1">

        <ul class="nav nav-tabs mb-3" id="satelliteSubTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="sat-info-tab" data-toggle="tab" href="#sat-info"
               role="tab" aria-controls="sat-info" aria-selected="true">
              <i class="fas fa-satellite-dish mr-1"></i>Satellite Info
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="sat-status-tab" data-toggle="tab" href="#sat-status"
               role="tab" aria-controls="sat-status" aria-selected="false">
              <i class="fas fa-id-badge mr-1"></i>Identification Status
            </a>
          </li>
        </ul>

        <div class="tab-content" id="satelliteSubTabsContent">

          <!-- Satellite Info -->
          <div class="tab-pane fade show active" id="sat-info" role="tabpanel" aria-labelledby="sat-info-tab">
            <div class="card card-info">
              <div class="card-header card-satnogs-header">
                Satellite Info
                <span class="float-right text-sm text-muted">Sorted by frequency</span>
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table class="table table-sm table-hover mb-0">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Downlink</th>
                        <th>Mode</th>
                        <th>Deployed</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for sat in satellites %}
                      <tr>
                        <td>
                          <a href="{% url 'satellite' sat_id=sat.satellite_identifier__sat_id %}">
                            {{ sat.satellite_entry__name|upper }}
                          </a>
                        </td>
                        <td class="text-monospace">
                          {% if sat.downlink_freq %}
                            {{ sat.downlink_freq|frq }}
                          {% else %}
                            <span class="text-muted">—</span>
                          {% endif %}
                        </td>
                        <td>
                          {% if sat.downlink_mode %}
                            {{ sat.downlink_mode }}
                          {% else %}
                            <span class="text-muted">—</span>
                          {% endif %}
                        </td>
                        <td>
                          {% if sat.satellite_entry__deployed %}
                            {{ sat.satellite_entry__deployed|date:"Y-m-d" }}
                          {% else %}
                            <span class="text-muted">Unknown</span>
                          {% endif %}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <!-- Identification Status -->
          <div class="tab-pane fade" id="sat-status" role="tabpanel" aria-labelledby="sat-status-tab">
            <div class="card card-info">
              <div class="card-header card-satnogs-header">
                Identification Status
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table class="table table-sm table-hover mb-0">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Sat ID</th>
                        <th>NORAD</th>
                        <th>Reception Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for sat in satellites %}
                      <tr>
                        <td>
                          <a href="{% url 'satellite' sat_id=sat.satellite_identifier__sat_id %}">
                            {{ sat.satellite_entry__name|upper }}
                          </a>
                        </td>
                        <td>
                          <a href="{% url 'satellite' sat_id=sat.satellite_identifier__sat_id %}">
                            {{ sat.satellite_identifier__sat_id }}
                          </a>
                        </td>
                        <td>
                          {% if sat.satellite_entry__norad_cat_id %}
                            <a href="{% url 'satellite' sat_id=sat.satellite_identifier__sat_id %}">
                              {{ sat.satellite_entry__norad_cat_id }}
                            </a>
                          {% else %}
                            <span class="text-muted">—</span>
                          {% endif %}
                        </td>
                        <td>
                          {% if sat.satellite_entry__reception_status == 'Verified' %}
                            <span class="badge badge-success">{{ sat.satellite_entry__reception_status }}</span>
                          {% elif sat.satellite_entry__reception_status == 'Partially Verified' %}
                            <span class="badge badge-warning">{{ sat.satellite_entry__reception_status }}</span>
                          {% elif sat.satellite_entry__reception_status == 'Unverified' %}
                            <span class="badge badge-danger">{{ sat.satellite_entry__reception_status }}</span>
                          {% else %}
                            <span class="badge badge-secondary">{{ sat.satellite_entry__reception_status }}</span>
                          {% endif %}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}