{% extends 'base.html' %}
{% load static%}
{% block content %}
<p>Useful tools and data from other partners/observatories.</p>
<div class="card-columns p-2">
  <div class="card text-justify">
    <img src="{% static 'images/skynoise.png' %}" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Sky noise</h5>
      <p class="card-text">Sky brightness at 50 MHz, useful for antenna calibrations and measure radar's sensitivity.
      </p>
        <input type="date" class="form-control tools-date" id="skynoise-date" placeholder="dd/mm/yy"
          aria-describedby="validationTooltipSkynoiseDate" value="{% now 'Y-m-d' %}" required>
        <div class="invalid-tooltip">
          Please enter a valid date.
        </div>
        <a class="btn btn-primary m-1" data-toggle="modal" href="#toolModal" data-title="Sky Noise"
          data-image="{% url 'url_skynoise' %}">Go</a>
    </div>
  </div>

  <div class="card text-justify">
    <div class="card-body">
      <h5 class="card-title">Over JRO</h5>
      <p class="card-text">Main antenna radiation pattern for several experiments.
      
        <input type="date" class="form-control form-control-sm tools-date" id="overjro-date" placeholder="dd/mm/yy"
          aria-describedby="validationTooltipOverJRODate" value="{% now 'Y-m-d' %}" required>
        <div class="invalid-tooltip">
          Please enter a valid date.
        </div>
        <select name="experiment" class="form-control form-control-sm">
          <option value="-1">Experiment:</option>
          <option value="-1">------------------</option>
          <option value="20">Vertical Drifts</option>
          <option value="[21,22]">East West 1996</option>
          <option value="[25,26]">East West 2003</option>
          <option value="23">Differential Phase 2000</option>
          <option value="24">Differential Phase 2004 High Alt</option>
          <option value="27">Differential Phase 2005 - 2006</option>
          <option value="[28,29]">DEWD 2005</option>
                      <option value="2710">DVD 2006 - 2008</option>
          <option value="-1">------------------</option>
          <option value="10">Oblique ISR On-Axis</option>
          <option value="11">Oblique ISR 4.5</option>
          <option value="12">Oblique ISR 6.0S</option>
          <option value="13">Oblique ISR 3.0N</option>
          <option value="-1">------------------</option>
          <option value="[30,31]">JULIA CP2</option>
          <option value="32">JULIA CP3</option>
          <option value="35">JULIA V (2005-2006)</option>
          <option value="[33,34]">JULIA EW 2003</option>
                      <option value="[35,36]">JULIA EW (2006-2007)</option>
          <option value="-1">------------------</option>
          <option value="0">Modulo Rx</option>
          <option value="1">1/16 Rx</option>
          <option value="2">1/4 Rx</option>
          <option value="3">All Rx</option>
          <option value="-1">------------------</option>
          <option value="40">EW Imaging 1996</option>
          <option value="41">EW Imaging 2003</option>
                      <option value="43">EW Imaging 2006-2008</option>
          <option value="-1">------------------</option>		
          <option value="50">MST North (Fritts)</option>
          <option value="51">MST West (Fritts)</option>
          <option value="52">MST South (Fritts)</option>
          <option value="53">MST East (Fritts)</option>
          <option value="-1">------------------</option>
          <option value="54">Vertical (Yellow Cables)</option>
        </select>
        <br>
        <p class="card-text">Choose object:
        <div class="form-check card-text">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">B Field</label><br>
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">Sun</label><br>
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">Moon</label><br>
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">Hydra</label><br>
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">Galaxy Center</label>
        </div>  
      </p>
      </div>
        <a class="btn btn-primary m-1" data-toggle="modal" href="#toolModal" data-title="Over JRO"
          data-image="{% url 'url_overjro' %}">Go</a>
    </div>
  
    <div class="card text-justify">
      <img src="{% static 'images/kp.png' %}" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Kp Index</h5>
        <p class="card-text">The K-index, are used to characterize the magnitude of geomagnetic storms. Kp is an excellent
          indicator of disturbances in the Earth's magnetic field (<a
            href="https://www.swpc.noaa.gov/products/planetary-k-index" target="_blank">NOAA/SWPC</a>).</p>
        <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Kp Index"
          data-image="https://services.swpc.noaa.gov/images/planetary-k-index.gif">Go</a>
      </div>
    </div>
  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="toolModal" tabindex="-1" role="dialog" aria-labelledby="toolModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="toolModalTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <img class="img-fluid" src="">
      </div>
    </div>
  </div>
</div>

{% endblock content %}

{% block script %}
<script>
  $('#toolModal').on('show.bs.modal', function (e) {

    //get data attribute of the clicked element
    var title = $(e.relatedTarget).data('title');
    var image = $(e.relatedTarget).data('image');

    if (image.indexOf('skynoise') > 0) {
      var dt = $('#skynoise-date').val();
      image += '?date=' + dt;
    }

    //populate values
    $(e.currentTarget).find('h5').text(title);
    $(e.currentTarget).find('img').attr('src', image);
  });
</script>
{% endblock script %}