<div style="display:inline-block;">
  {% if widget.url %}
  <img id="id_{{widget.name}}_img" src="{{widget.url}}" alt="" height="128" style="margin-bottom:.25rem;" />
  <br>
  {% endif %}
  <a class="modal__btn modal__btn_sm" href="#" data-micromodal-trigger="modal-1">选择</a>
  <input name="{{ widget.name }}" type="hidden" value="{{widget.value|first}}" {% include "django/forms/widgets/attrs.html" %} />
</div>

<!-- modal -->
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
      <header class="modal__header">
        <h3 class="modal__title" id="modal-1-title" style="margin-top:0;padding:0;">
          选择媒体
        </h3>
        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
      </header>
      <ul class="modal__tabs">
        <li class="modal__tabs__item modal__tabs__item_active">
          <a class="modal__tabs__link" href="#">媒体库</a></li>
        <li class="modal__tabs__item">
          <a class="modal__tabs__link" href="#">上传</a></li>
      </ul>
      <main class="modal__content" id="modal-1-content">
  {% for group_name, group_choices, group_index in widget.optgroups %}
  {% for option in group_choices %}
    {% if option.value %}
    <div
      data-src="{{option.url}}"
      class="modal__item"
      data-value="{{option.value}}"
      style="background-image:url({{option.url}})"></div>
    {% endif %}
  {% endfor %}
  {% endfor %}
      </main>
      <main style="display:none;"><a href="/admin/jbox/jbox/add/">点击上传</a></main>
      <footer class="modal__footer">
        <button class="modal__btn modal__btn-primary">确定</button>
        <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">取消</button>
      </footer>
    </div>
  </div>
</div>
 <script>
MicroModal.init();

django.jQuery(".modal__tabs__link").click(function() {
  if(!django.jQuery(this).parent("li").hasClass("modal__tabs__item_active")) {
    django.jQuery(this).parent("li").siblings("li").removeClass("modal__tabs__item_active");
    django.jQuery(this).parent("li").addClass("modal__tabs__item_active");
    var index = django.jQuery(this).parent("li").index();
    django.jQuery(".modal main:not("+index+")").hide();
    django.jQuery(".modal main").eq(index).show();
  }
});

django.jQuery(".modal__item").click(function() {
  django.jQuery(this).siblings().removeClass("modal__item_active");
  django.jQuery(this).toggleClass("modal__item_active");
});

django.jQuery(".modal__btn-primary").click(function(e) {
  e.preventDefault();
  if(django.jQuery(".modal__item_active").length) {
    var value = django.jQuery(".modal__item_active").data("value");
    var src = django.jQuery(".modal__item_active").data("src");
    django.jQuery("#id_{{widget.name}}").val(value);
    django.jQuery("#id_{{widget.name}}_img").attr("src", src);
  }
  MicroModal.close();
});
   </script>
