{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}
{% load url from future %}


{% block modal-body %}
  <script>
    function isEmpty(str) {
    return (!str || 0 === str.length);
    }

    function sendID() {
      var location = "{{ alarm_url }}";
      var filterID = document.forms["form0"]["filterID"].value;
      if (!isEmpty(filterID)) {
        window.location = location + "id=" + filterID;
      } else {
        window.location = location;
      }
    }

    function sendDimensions() {
      var dimension = document.forms["form1"]["dimension"].value;
      var metric = document.forms["form1"]["metric"].value;
      var location = "{{ alarm_url }}";
      var param = '';
      if (!isEmpty(metric)) {
        param = 'metric=' + metric;
        if (!isEmpty(dimension)) {
          param = param + ',';
        }
      }
      if (!isEmpty(dimension)) {
        param = param + dimension;
      }
      if (!isEmpty(param)) {
        param = btoa(param).replace(/\+/g, '-').replace(/\//g, '_');
        location = location + 'b64:' + param;
      }
      window.location = location;
    }
  </script>

<div class = "filter_form" >
  <form></form>

  <form method="GET" class="form-group" style="width:400px" onsubmit="sendID()" name="form0">
      <h3>{% trans 'Alarm ID' %}</h3>
      {% trans 'Value' %}: <input class="form-control" name="filterID" placeholder="54fdec2f-ae34-4dba-9c85-7b4ad67eea03">
      <button type="submit" class="btn btn-default">{% trans 'Submit' %}</button>
  </form>
  <hr>
  <hr>
  <form method="GET" class="form-group" style="width:400px" onsubmit="sendDimensions()" name="form1">
      <h3>{% trans 'Dimension(s)' %}</h3>
      {% trans 'Key' %}[={% trans 'Value' %}]
      <input class="form-control" name="dimension" placeholder="hostname=devstack, service=mysql" data-toggle="tooltip" data-placement="right" title="Example: hostname=devstack, service=mysql">
      <br />
      {% trans 'Metric Name' %}: <input class="form-control" name="metric" placeholder="http_status">
      <button type="submit" class="btn btn-default">{% trans 'Submit' %}</button>
  </form>

</div>
{% endblock %}

{% block modal-footer %}
{% endblock %}
