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

{% block content %}
<div id="operations">
  <div id="showme" class="hideme"></div>
  <div id="command">
    {% if ajax == 'tikz' %}
    <div class="btn-group btn-group-toggle" data-toggle="buttons" data-form-type="other">
      <label class="btn btn-secondary active" data-dashlane-label="false">
        <input type="radio" name="options" id="show"
        autocomplete="off" data-form-type="other" checked> Show
      </label>
      <label class="btn btn-secondary"  data-dashlane-label="false">
        <input type="radio" name="options" id="hide"
        autocomplete="off" data-form-type="other"> Hide </label>
      <label class="btn btn-secondary"  data-dashlane-label="false">
        <input type="radio" name="options" id="delete"
          autocomplete="off" data-form-type="other" > Delete </label>
      &nbsp;&nbsp;
      {% endif %}

      <input type="text" id="term" name="term" size="50">
    </div>
    <div id="categories">
      <a href="/tikz/show/" role="button" class="btn btn-secondary btn-sm vspace">All</a>
      {% for dic in images.values %}
         &nbsp;
        <a href="#{{ dic.course }}" role="button" class="btn btn-primary btn-sm vspace">{{ dic.course }}</a>
      {% endfor %}
    </div>
  </div>
</div>
<div id="pix">
{% for csr, dic in images.items %}
  <div class="row">
    <a name="{{ dic.course }}"></a><p></p>
    <a href="/tikz/show/{{ csr }}/" role="button" class="btn btn-primary">{{ dic.course }}</a>

    {% for i in dic.images %}
      <div class="col-lg-2 col-md-3 col-sm-4 pic" id="{{i.0}}">
       {{ i.1|safe }}
      </div>
    {% endfor %}
  </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 = "/tikz/show/" + id + "/";
  }
  {% if ajax == 'tikz' %}
  else {
    ajax_call('views.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 = "/tikz/show/?term=" +me.val();
})


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

{% endblock extrajs %}