{% load tags %}

<div class="modal fade" id="StationModal" tabindex="-1" role="dialog" aria-labelledby="StationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="StationModal">Edit Ground Station</h4>
      </div>
      <form class="form-horizontal"
            role="form"
            enctype="multipart/form-data"
            method="post"
            action="{% url 'base:station_edit' %}">{% csrf_token %}
        <div class="modal-body">
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input value="{{ form.name.value|default_if_none:"" }}" id="name" type="text" class="form-control" name="name" placeholder="Name" required>
            </div>
          </div>
          <div class="form-group">
            <label for="image" class="col-sm-2 control-label">Image</label>
            <div class="col-sm-10">
              <input id="image" type="file" name="image">
              {% if form.image.value %}
                <img src="{{ MEDIA_URL }}{{ form.image.value }}"
                     class="station-edit-image">
              {% endif %}
            </div>
          </div>
          <div class="form-group">
            <label for="alt" class="col-sm-2 control-label">Altitude</label>
            <div class="col-sm-10">
              <input value="{{ form.alt.value|default_if_none:"" }}" id="alt" type="number" class="form-control" name="alt" placeholder="Altitude" required>
              <span class="help-block">{{ form.alt.help_text }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="lat" class="col-sm-2 control-label">Latitude</label>
            <div class="col-sm-10">
              <input value="{{ form.lat.value|default_if_none:"" }}" id="lat" type="text" class="form-control" name="lat" placeholder="Latitude" required>
            </div>
          </div>
          <div class="form-group">
            <label for="lng" class="col-sm-2 control-label">Longtitude</label>
            <div class="col-sm-10">
              <input value="{{ form.lng.value|default_if_none:"" }}" id="lng" type="text" class="form-control" name="lng" placeholder="Longtitude" required">
            </div>
          </div>
          <div class="form-group">
            <label for="qthlocator" class="col-sm-2 control-label">QTH Locator</label>
            <div class="col-sm-10">
              <input class="form-control"
                     id="qthlocator"
                     type="text"
                     name="qthlocator"
                     value="{{ form.qthlocator.value|default_if_none:"Geocoded gridsquare" }}"
                     readonly>
            </div>
          </div>
          <div class="form-group">
            <label for="horizon" class="col-sm-2 control-label">Minimum Horizon</label>
            <div class="col-sm-10">
              <input value="{{ form.horizon.value }}" id="horizon" type="number" class="form-control" name="horizon" placeholder="Minimum horizon for passes, default 10">
              <span class="help-block">{{ form.horizon.help_text }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="antennas" class="col-sm-2 control-label">Antennas</label>
            <div class="col-sm-10">
              <select multiple class="form-control" name="antenna">
                {% for antenna in antennas %}
                  <option value="{{ antenna.id }}">
                    {{ antenna.band }} - {{ antenna.antenna_type }} - {{ antenna.frequency|frq }}
                  </option>
                {% endfor %}
              </select>
              <span class="help-block">{{ form.antenna.help_text|safe }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="rig" class="col-sm-2 control-label">Rig</label>
            <div class="col-sm-10">
              <select class="form-control" name="rig">
                <option value="" selected>---</option>
                {% for rig in rigs %}
                  <option value="{{ rig.id }}" {% ifequal station.rig rig %}selected{% endifequal %}>
                    {{ rig }}
                  </option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="form-group has-warning">
            <label for="uuid" class="col-sm-2 control-label">UUID</label>
            <div class="col-sm-10">
              <input value="{{ form.uuid.value|default_if_none:"" }}" id="uuid" type="text" class="form-control" name="uuid" placeholder="UUID">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <input type="checkbox" name="active" {% if form.active.value %}checked="True"{% endif %}>
                  Is it operational?
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <input type="hidden" name="id" value="{{ station.id }}">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>