{% extends "base.html" %}
{% load tags %}
{% load static %}

{% block title %} - Ground Stations{% endblock %}

{% block css %}
  <link rel="stylesheet" href="{% static 'lib/bootstrap-select/dist/css/bootstrap-select.min.css' %}">
  <link rel="stylesheet" href="{% static 'lib/maplibre-gl/dist/maplibre-gl.css' %}">
{% endblock css %}

{% block content %}
  <div class="row">
    <div class="col col-md-5">
      <h2>
        Ground Stations
      </h2>
    </div>

    <div class="col d-none d-lg-flex justify-content-end align-items-center">
      {% if is_paginated %}
          {% load paginator %}{% paginator request 3%}
      {% endif %}
      <span class="stations-actions">
        <a class="btn btn-outline-dark" role="button" data-toggle="collapse"
           href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
          <span class="bi bi-funnel-fill" aria-hidden="true"></span>
        </a>
        <a href='#map' class="btn btn-outline-dark" role="button" data-toggle="modal" data-target="#MapModal">
          <span class="bi bi-geo-alt-fill" aria-hidden="true"></span> Map
        </a>
      </span>
    </div>

    <div class="col d-flex d-lg-none justify-content-end align-items-center">
      <span class="stations-actions">
        <a class="btn btn-outline-dark" role="button" data-toggle="collapse"
                href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
          <span class="bi bi-funnel-fill" aria-hidden="true"></span>
        </a>
        <a href='#map' class="btn btn-outline-dark" role="button" data-toggle="modal" data-target="#MapModal">
          <span class="bi bi-geo-alt-fill" aria-hidden="true"></span>
        </a>
      </span>
    </div>
  </div>

  <div class="collapse px-2 pt-2" id="collapseFilters" data-filtered="{{ is_filtered }}">
    <div class="filter-section card">
      <form id="station-filter" class="col-12 row" method="get" action="{% url 'base:stations_list' %}">
        {% for error in freq_filter_errors %}
          <div class="alert alert-danger" role="alert">{{ error }}</div>
        {% endfor %}
        <div class="form-group col-md-4 col-lg-4">
          <label for="status-selection">Status</label>
          <select class="form-control selectpicker" data-style="btn" name="status" autocomplete="off" id="status-selection" multiple>
            <optgroup label="Connected" data-max-options="1">
              <option value="c1" {% if 'c1' in status_filters %}selected{% endif %}>Connected</option>
              <option value="c0" {% if 'c0' in status_filters %}selected{% endif %}>Disconnected</option>
            </optgroup>
            <optgroup label="Available" data-max-options="1">
              <option value="a1" {% if 'a1' in status_filters %}selected{% endif %}>Available</option>
              <option value="a0" {% if 'a0' in status_filters %}selected{% endif %}>Unavailable</option>
            </optgroup>
            <optgroup label="Testing" data-max-options="1">
              <option value="t1" {% if 't1' in status_filters %}selected{% endif %}>Testing</option>
              <option value="t0" {% if 't0' in status_filters %}selected{% endif %}>Non Testing</option>
            </optgroup>
          </select>
        </div>
        <div id="frequency-filter-formgroup" class="form-group frequency-filter col-md-4 col-lg-3 {% if freq_filter_errors %}has_error{% endif %}">
            <label class="frequency-filter-label" for="frequency-filter">Frequency</label>
            <div class="freq-input-container">
              <input name="freq" id="frequency-filter" min="0" type="number" step="1" value="{{freq}}" class="frequency-filter-input form-control" autocomplete="off"/>
              <span id="freq-format"></span>
            </div>
        </div>
        <div class="form-group col-md-12 text-center">
          <button id="filter-button" type="submit" class="btn btn-primary">Update filters</button>
        </div>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      {% include 'includes/stations_table.html' with show_owner=True %}

      {% if is_paginated %}{% load paginator %}{% paginator request 3 %}{% endif %}
      <div class="text-center mt-2">
        Query returned {{ stations|length }} station{{ stations|length|pluralize }}.
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade map-modal" id="MapModal" tabindex="-1" role="dialog" aria-labelledby="MapModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="MapModalTitle">Stations Map</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="map" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}" data-stations="{% url 'base:mapped_stations' %}"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}


{% block javascript %}
  <script src="{% static 'lib/maplibre-gl/dist/maplibre-gl.js' %}"></script>
    {% comment %} <script src="{% static 'lib/@popperjs/core/dist/umd/popper.min.js' %}"></script> {% endcomment %}
  <script src="{% static 'lib/bootstrap-select/dist/js/bootstrap-select.min.js' %}"></script>
  <script src="{% static 'js/stations.js' %}"></script>
  <script src="{% static 'js/map.js' %}"></script>
{% endblock %}