{% extends 'classpath:/templates/rqueue/base.html' %}
{% block main %}
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="col-md-12">
        <h2>Explore Data</h2>
      </div>
      <div class="explore-data-form col-md-12">
        <div class="form-group">
          <label for="data-name">Name: <b id="data-name-type"></b></label>
          <input type="text" class="form-control"
                 id="data-name" placeholder="job-queue"
                 name="data-name">
        </div>
        <div class="form-group display-none" id="data-key-form">
          <label for="data-key">Key:</label>
          <input type="text" class="form-control"
                 id="data-key" placeholder="any key" name="data-key">
        </div>
        <div class="clearfix">
          <button type="button" data-toggle="modal" data-target="#explore-queue"
                  onclick="exploreData(this)" id="view-data"
                  class="btn btn-primary">View
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="col-md-12"><h2>Move Messages</h2></div>
      <div class="message-move-form col-md-12">
        <div class="form-group">
          <label for="src-data">Source Data Set: <b id="src-data-type"></b></label>
          <input type="text" class="form-control"
                 id="src-data" placeholder="job-queue"
                 name="src-data">
        </div>
        <div class="form-group">
          <label for="dst-data">Destination Data Set:<b id="dst-data-type"></b></label>
          <input type="text" class="form-control"
                 id="dst-data" placeholder="job-dead-letter-queue"
                 name="dst-data">
        </div>
        <div class="form-group display-none" id="dst-data-type-input-form">
          <label for="dst-data-type-input">Destination Data Type</label>
          <select class="form-control" id="dst-data-type-input">
            <option value="" selected="selected">Select Type</option>
            {% for type in supportedDataType %}
            <option value="{{type.name}}">{{type.description}}</option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label for="number-of-messages">Number of messages: </label>
          <input type="text" class="form-control"
                 id="number-of-messages" placeholder="100"
                 name="dst-data">
        </div>
        <div class="form-group display-none" id="priority-controller-form">
          <hr/>
          <div class="form-group">
            <label for="priority-type">Priority Type</label>
            <select class="form-control" id="priority-type" name="priority-type">
              <option value="">Select</option>
              <option value="ABS">Absolute</option>
              <option value="REL">Relative</option>
            </select>
          </div>
          <div class="form-group">
            <label for="priority-val">Priority</label>
            <input type="number" class="form-control" name="priority-val" id="priority-val">
          </div>
        </div>
        <div class="clearfix">
          <button type="button" id="move-button" class="btn  btn-danger">Move</button>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'classpath:/templates/rqueue/data_explorer_modal.html' %}

{% endblock %}

{% block additional_script %}
<script type="application/javascript">
  dataPageUrl = "rqueue/api/v1/data";
  var dataKeyEl = $('#data-key');
  var dataNameEl = $('#data-name');
  var srcDataEl = $('#src-data');
  var dstDataEl = $('#dst-data');
  var dstDataTypeInputEl = $('#dst-data-type-input');

  dataNameEl.on("change", function () {
    updateDataType(this, enableKeyForm);
  });

  dataKeyEl.on("change", function () {
    $('#view-data').data('key', $(this).val());
  });

  dstDataTypeInputEl.on('change', function () {
    var type = convertVal($(this).val());
    if (type !== 'ZSET') {
      $('#priority-controller-form').hide();
    } else {
      $('#priority-controller-form').show();
    }
  });
  srcDataEl.on('change', function () {
    disableForms();
    updateDataType(this, enableFormsIfRequired);
  });

  dstDataEl.on('change', function () {
    disableForms();
    updateDataType(this, enableFormsIfRequired);
  });

  $('#explore-queue').on('shown.bs.modal', function () {
    $('#explorer-title').empty().append("Key:").append(
        "<b>&nbsp;" + dataNameEl.val() + "</b>");
    refreshPage();
  });
</script>
{% endblock %}