{% extends 'mpl/base.html' %}



{% block content %}
<div id="operations">
  <div id="showme" class="hideme"></div>
  <div id="command" class="col-8">
    <input type="text" id="term" name="term" size="50">
  </div>
</div>
<div id="pix" class="row">
  {% for graph in graphs %}
    <div class="col-lg-2 col-md-4 col-sm-6 pic" {% if ajax %}id="{{ graph.id }}">
     {% else %}><a href="/mpl/graph/{{ graph.id }}/">{% endif %}{{ graph.full }}
    {% if not ajax %}</a>{% endif %}</div>
  {% endfor %}
</div>
{% endblock content %}

{% block extrajs %}

var select_mode = 'show';

function slide(obj, state) {
  var div = $(obj);
  var img = div.find('img');
  var disp = $('div#showme');
  if (state) {
    disp.removeClass('hideme');
    var load='<p class="idlabel float-end">ID = ' + div.attr('id') + '</p>\n<img src="'+img.attr('src')+'">';
    disp.html(load);
  } else {
    disp.addClass("hideme");
  }
}

function mark(obj) {
  var div = $(obj);
  var id = div.attr('id');
  if (select_mode == 'show') {
    document.location = "/mpl/graph/" + id + "/";
  }
  {% if ajax == 'mpl' %}
  else {
    ajax_call('image', {pk: id, action: select_mode}, (args) => {
      switch(args.action) {
        case 'delete':
        case 'hide':
          $('div.pic#' + id).remove();
          break;
      }
    })
  } {% endif %}
}
$('div.pic').click(function() {mark(this)});


$('div.pic').hover(function() {slide(this, true)},
  function() {slide(this, false)} );
//$('tr.hoverer').click( function() {
//    slide($(this), ! $(this).hasClass('highlight'))});



$('input#term').change((ev) => {
  var me = $(ev.target);
  document.location = "/mpl/graphs/?term=" +me.val();
})


$('div#operations input').click((ev) => {
  var me = $(ev.target);
  select_mode = me.attr('id');
})

{% endblock extrajs %}