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

{% block title %}{% if station_form.instance.id %} - Edit Ground Station {{ station_form.instance.name }}{% else %} - Add Ground Station{% endif %}{% endblock %}

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

{% block content %}
  <div class="row">
    <div class="col-md-6">
      <h2>
        {% if station_form.instance.id %}
          Edit: {{ station_form.instance.id }} - {{ station_form.instance.name }}
        {% else %}
          Add Ground Station
        {% endif %}
      </h2>
    </div>
  </div>

  <form id="station-edit-form" role="form" enctype="multipart/form-data" method="post">{% csrf_token %}
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#general-panel-body">
          <h3 class="panel-title">
            General Info
            <span class="glyphicon glyphicon-collapse-up pull-right" aria-hidden="true"></span>
          </h3>
        </div>
        <div class="panel-body collapse in" id="general-panel-body">
          <div class="form-group">
            <label for="name" class="control-label">Name</label>
            <input value="{{ station_form.name.value|default_if_none:"" }}" id="station-name" type="text" class="form-control" maxlength="{{ station_form.name.field.max_length }}" name="name" required>
          </div>
          <div class="form-group">
            <label for="description" class="control-label">Description</label>
            <textarea class="form-control" name="description"
                      id="description" rows="3" maxlength="{{ station_form.description.field.max_length }}">{{ station_form.description.value|default_if_none:"" }}</textarea>
          </div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#location-panel-body">
          <h3 class="panel-title">
            Location
            <span class="glyphicon glyphicon-collapse-up pull-right" aria-hidden="true"></span>
          </h3>
        </div>
        <div class="panel-body collapse in" id="location-panel-body">
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label for="lat" class="control-label">Latitude</label>
                <input value="{{ station_form.lat.value|default_if_none:"" }}" id="lat" type="number" class="form-control" name="lat" step="0.000001" max="{{ station_form.lat.field.max_value }}" min="{{ station_form.lat.field.min_value }}" placeholder="{{ station_form.lat.help_text }}" required>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="lng" class="control-label">Longtitude</label>
                <input value="{{ station_form.lng.value|default_if_none:"" }}" id="lng" type="number" class="form-control" name="lng" step="0.000001" max="{{ station_form.lng.field.max_value }}" min="{{ station_form.lng.field.min_value }}" placeholder="{{ station_form.lng.help_text }}" required>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="alt" class="control-label">Altitude (ASL)</label>
                <input value="{{ station_form.alt.value|default_if_none:"" }}" id="alt" type="number" class="form-control" name="alt" placeholder="{{ station_form.alt.help_text }}" required>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="qthlocator" class="control-label">QTH Locator</label>
            <input class="form-control"
                   id="qthlocator"
                   type="text"
                   name="qthlocator"
                   value="{{ station_form.qthlocator.value|default_if_none:"" }}"
                   readonly>
          </div>
        </div>
      </div>


      {% if registered %}
      <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#configuration-panel-body">
          <h3 class="panel-title">
            Configuration
            <span class="glyphicon glyphicon-collapse-up pull-right" aria-hidden="true"></span>
          </h3>
        </div>
        <div class="panel-body collapse in" id="configuration-panel-body">
          <div class="form-group">
            <label for="satnogs_soapy_rx_device" class="control-label">Soapy RX Device</label>
            <input value="{{ station_form.satnogs_soapy_rx_device.value|default_if_none:"" }}" id="soapy-rx-device" type="text" class="form-control" maxlength="{{ station_form.satnogs_soapy_rx_device.field.max_length }}" name="satnogs_soapy_rx_device">
          </div>
          <div class="form-group">
            <label for="satnogs_antenna" class="control-label">Soapy Antenna</label>
            <input value="{{ station_form.satnogs_antenna.value|default_if_none:"" }}" id="satnogs-antenna" type="text" class="form-control" maxlength="{{ station_form.satnogs_antenna.field.max_length }}" name="satnogs_antenna">
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="satnogs_rx_samp_rate" class="control-label">RX Sample Rate</label>
                <input value="{{ station_form.satnogs_rx_samp_rate.value|default_if_none:"" }}" id="satnogs-rx-samp-rate" type="number" class="form-control" name="satnogs_rx_samp_rate" step="1" min="0">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="satnogs_rf_gain" class="control-label">RF Gain</label>
                <input value="{{ station_form.satnogs_rf_gain.value|default_if_none:"" }}" id="satnogs-rf-gain" type="number" class="form-control" name="satnogs_rf_gain" step="0.01" min="0">
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}

      <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#antennas-panel-body">
          <h3 class="panel-title">
            Antennas
            <span class="glyphicon glyphicon-collapse-up pull-right" aria-hidden="true"></span>
          </h3>
        </div>
        <!-- Data to parse -->
        <div id="antennas-loading" class="panel-body loading-field">
          <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
          </div>
          Loading Antennas
        </div>
        <div class="panel-body collapse in" id="antennas-panel-body" style="display:none;">
          <div id="station-data-to-parse"
               data-max_antennas_per_station="{{ max_antennas_per_station }}"
               data-max_frequency_ranges_per_antenna="{{ max_frequency_ranges_per_antenna }}"
               data-max_frequency_for_range="{{ max_frequency_for_range }}"
               data-min_frequency_for_range="{{ min_frequency_for_range }}"
               data-vhf_min_frequency="{{ vhf_min_frequency }}"
               data-vhf_max_frequency="{{ vhf_max_frequency }}"
               data-uhf_min_frequency="{{ uhf_min_frequency }}"
               data-uhf_max_frequency="{{ uhf_max_frequency }}"
               data-l_min_frequency="{{ l_min_frequency }}"
               data-l_max_frequency="{{ l_max_frequency }}"
               data-s_min_frequency="{{ s_min_frequency }}"
               data-s_max_frequency="{{ s_max_frequency }}"
          ></div>

          <!-- Initial data -->
          <div id="antennas-data-to-parse">
            {% for antenna_form in antenna_formset %}
              <div {% if antenna_form.id.value %} data-id="{{ antenna_form.id.value }}" {% endif %}
                   {% if antenna_form.DELETE.value %}data-deleted="true" {% endif %}
                   data-type-name="{{ antenna_form.instance.antenna_type.name }}"
                   data-type-id="{{ antenna_form.antenna_type.value }}">
                {% with frequency_range_formset=frequency_range_formsets|lookup_with_key:antenna_form.prefix %}
                  {% for frequency_range_form in frequency_range_formset %}
                    <div {% if frequency_range_form.id.value %} data-id="{{ frequency_range_form.id.value }} {% endif %}"
                         {% if frequency_range_form.DELETE.value %}data-deleted="true" {% endif %}
                         data-min="{{ frequency_range_form.min_frequency.value }}"
                         data-max="{{ frequency_range_form.max_frequency.value }}"
                    ></div>
                  {% endfor %}
                {% endwith %}
              </div>
            {% endfor %}
          </div>

          <div class="row" id="new-antenna">
            <div class="col-md-12 text-right">
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" data-action="new">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                New Antenna
              </button>
            </div>
          </div>
        </div>

        <!-- Edit/New Antenna Modal-->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="antenna modal">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-title"></h4>
              </div>
              <div class="modal-body">
                <div class='row'>
                  <div class='col-md-12'>
                    <div class="form-group">
                      <label for="antenna-type" class="control-label">Type</label>
                      <select id="antenna-type" class="form-control selectpicker show-tick" name="antenna-type">
                        {% for antenna_type in antenna_types.all|sort_types %}
                          <option value="{{ antenna_type.id }}" data-content="{{ antenna_type.name }}">
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <span class="frequency-ranges-label">Frequency Ranges(Hz)</span>
                  <div id="frequency-ranges-loading" class="loading-field">
                    <div class="spinner">
                      <div class="bounce1"></div>
                      <div class="bounce2"></div>
                      <div class="bounce3"></div>
                    </div>
                    Loading Frequency Ranges
                  </div>
                  <div id="frequency-ranges">Add a frequency range by choosing one of the default ranges or a custom one bellow<hr></div>
                  <div class="row" id="new-ranges">
                    <div class="col-md-8">
                      <span class='default-range-label'>Add a default range:</span>
                      <button data-range="VHF" type="button" class="btn btn-info new-range">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        VHF
                      </button>
                      <button data-range="UHF" type="button" class="btn btn-info new-range">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        UHF
                      </button>
                      <button data-range="L" type="button" class="btn btn-info new-range">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        L
                      </button>
                      <button data-range="S" type="button" class="btn btn-info new-range">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        S
                      </button>
                    </div>
                    <div class="col-md-4 text-right">
                      <button data-range="custom" type="button" id="new-range" class="btn btn-success new-range">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        Custom Range
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <div class='row'>
                  <div class='col-md-6 text-left'>
                    <button id="delete-antenna" data-action="delete" type="button" class="btn btn-danger modal-action">Delete Antenna</button>
                  </div>
                  <div class='col-md-6'>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button data-action="save" type="button" class="btn btn-primary modal-action">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End of Edit/New Antenna Modal-->
      </div>

      <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#settings-panel-body">
          <h3 class="panel-title">
            Settings
            <span class="glyphicon glyphicon-collapse-up pull-right" aria-hidden="true"></span>
          </h3>
        </div>
        <div class="panel-body collapse in" id="settings-panel-body">
          <div class="form-group">
            <label for="horizon" class="control-label">Minimum Horizon</label>
            <input id="horizon" type="number" value="{{ station_form.horizon.value|default_if_none:"" }}" class="form-control" name="horizon" placeholder="{{ station_form.horizon.help_text }}">
            <span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip"
                  title="Your station minimum observable elevation"></span>
          </div>

          <hr>

          <div class="form-group">
            <label for="utilization" class="control-label">Target Utilization</label>
            <input id="utilization" type="number" value="{{ station_form.target_utilization.value|default_if_none:"" }}" class="form-control" name="target_utilization" placeholder="{{ station_form.utilization.help_text }}">
            <span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip"
                  title="Your station target utilization"></span>
          </div>

          <hr>

          <div class="form-group">
            <label for="violator_scheduling" class="control-label">Scheduling of Frequency Violators by</label>
            <select id="violator_scheduling" class="form-control selectpicker show-tick" name="violator_scheduling" autocomplete="off">
              {% for choice in station_form.violator_scheduling.field.choices %}
                <option value="{{ choice.0 }}" {% if choice.0 == station_form.violator_scheduling.value %} selected {% endif %}>{{ choice.1 }}</option>
              {% endfor %}
            </select>
            <div class="help-block">
                <p id='violator-scheduling-0' class="violator-scheduling-option-description">
                    Noone will be able to schedule satellites that violate frequencies. For SSA purposes and recording violations, please consider to change this option to "Only Operators".
                </p>
                <p id='violator-scheduling-1' class="violator-scheduling-option-description">
                    Only operators will be able to schedule satellites that violate frequencies. Only necessary observations will be scheduled for SSA purposes and recording violations.
                </p>
                <p id='violator-scheduling-2' class="violator-scheduling-option-description">
                    Everyone, who has permission to schedule, will be able to schedule satellites that violate frequencies. However scheduling will be limited to use the minimum of Network and DB resources.
                </p>
            </div>
          </div>

          <hr>

          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="testing" {% if station_form.testing.value %}checked="True"{% endif %} {% if not station_form.instance.id %}disabled{% endif %}>
                Testing?
                    <span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip"
                          title="Make sure you station is performing well for a period of time before you remove the Testing flag"></span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#image-panel-body">
          <h3 class="panel-title">
            Image
            <span class="glyphicon glyphicon-collapse-up pull-right" aria-hidden="true"></span>
          </h3>
        </div>
        <div class="panel-body collapse in" id="image-panel-body">
          <div class="form-group">
            <input id="station-image" type="file" name="image" accept="image/*"
               {% if station_form.image.value and not image_changed %} data-existing="{{ MEDIA_URL }}{{ station_form.image.value }}" {% endif %}>
          </div>
        </div>
      </div>

    </div>

    <div class='row'>
      <div class='col-md-4'>
        <div class="btn-group btn-group-justified" role="group">
          <div class="btn-group" role="group">
            <button id="cancel" type="button" class="btn btn-default">{% if station_form.instance.id %}Back to Station{% else %}Back to Dashboard{% endif %}</button>
          </div>
        </div>
      </div>
      <div class='col-md-8'>
        <div class="btn-group btn-group-justified" role="group">
          <div class="btn-group" role="group">
            <button id="submit" type="submit" class="btn btn-primary" disabled="True">{% if station_form.instance.id %}Save Changes{% else %}Submit{% endif %}</button>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endblock %}

{% block javascript %}
  <script src="{% static 'js/gridsquare.js' %}"></script>
  <script src="{% static 'js/frequency_utils.js' %}"></script>
  <script src="{% static 'lib/bootstrap-select/dist/js/bootstrap-select.min.js' %}"></script>
  <script src="{% static 'lib/bootstrap-slider/dist/bootstrap-slider.min.js' %}"></script>
  <script src="{% static 'lib/bootstrap-fileinput/js/fileinput.min.js' %}"></script>
  <script src="{% static 'js/station_edit.js' %}"></script>
{% endblock javascript %}
