{% extends("base.j2") %}
{% macro figure(name, title, caption, external=False, clean_fname=False, extra_caption=False) %}
    {% if external %}
      {% set id = name.replace(':', '_').replace('/', '_').replace('.', '_') %}
    {% else %}
      {% set id = name %}
    {% endif %}
<div id="{{ id }}" class="well center-block figure-container" style="padding:5px;">
  <a title="{{ title }}">
      {% if clean_fname %}
    <img id="_{{ id }}" src="aux_figures/{{ name.replace('/', '_').replace('..', '_') }}" class="thumbnail img-responsive center-block">
      {% elif external %}
    <img id="_{{ id }}" src="{{ name }}" class="thumbnail img-responsive center-block">
      {% else %}
    <img id="_{{ id }}" src="./figures/{{ name }}.png" class="thumbnail img-responsive center-block">
      {% endif %}
  </a>
  <div class="caption" style="overflow-x:auto; position:relative">
      {% if extra_caption %}
          <span class="glyphicon glyphicon-plus" data-toggle="collapse" data-target="#{{ id }}_cap" style="position:absolute"></span>
          <p class="text-center">
              {{ caption }} </p>
          <div id="{{ id }}_cap" class="collapse">
              {{figures[name].html|safe}}
          </div>
      {% else %}
          <p class="text-center"> {{ caption }} </p>
      {% endif %}
  </div>
</div>
{% endmacro %}

{% block extra_style %}
<style>
  .figure-container {
    width: 60%;
  }
  .row_fig .figure-container {
    width: 100%;
  }
  .provenance {
    color: rgba(54, 54, 54, 0.69);
    font-style: italic;
  }
  .row_fig.col-md-6:nth-child(2n+1) {
    clear: both;
  }
  .row_fig.col-md-4:nth-child(3n+1) {
    clear: both;
  }
</style>
{% endblock %}

{% block main_content %}
<div class="row main-content">
  <div class="col-md-0 col-lg-2 col-xl-3"> </div>
  <div class="col-md-12 col-lg-8 col-xl-6">
  {% block body %}
  {% endblock %}
  </div>
  <div class="col-md-0 col-lg-2 col-xl-3"> </div>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">

  function set_focus(thumb_id) {
    if (thumb_id === "_undefined") return;
    let thumb = $("#"+thumb_id);
    $('.modal-body').empty();
    let title = thumb.parent('a').attr("title");
    let title_elem = $('.modal-title');
    title_elem.html(title);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,title_elem[0]]);

    $(thumb.parents('div').html()).appendTo('.modal-body');
    $('#myModal').modal({show:true});
  }

  $(function(){
    $('.thumbnail').click(function() {
      set_focus($(this).prop("id"));
    });
  });
</script>
{% endblock %}
