{% extends "oy/contrib/media/admin/list.html" %}
{% import 'admin/actions.html' as actionlib with context %}

{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for("oy.contrib.media.admin.static", filename="css/galary.min.css") }}">
  <link rel="stylesheet" href="{{ url_for("oy.contrib.media.admin.static", filename="vendor/magnific-popup/magnific-popup.css") }}">
{% endblock %}

{% block body %}
  {% block model_menu_bar %}
    {{ super() }}
  {% endblock %}

  {% block actions %}
  {{ actionlib.form(actions, get_url('.action_view')) }}
  {% endblock %}

  <div class="container galary-wrapper">
	{% if data %}
    <div class="form-control select-all-wrapper center-block">
        <input type="checkbox" name="rowtoggle" class="action-rowtoggle flat" title="{{ _gettext('Select all records') }}" /> {{ _gettext('Select all records') }}
    </div>
	{% endif %}
	<div class="row">
    {% for row in data %}
	<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
	<div class="thumbnail">
	  <div class="image view view-first">
		<a href="{{ url_for(".internal_serve", file_id=row.file_id) }}" class="img-link">
      <img data-id="{{ row.id }}" data-title="{{ row.title }}" class="image-preview" style="width: 100%;display: block;cursor:pointer;" src="{{ url_for(".internal_serve", file_id=row.file_id, size='sm') }}" alt="{{ row.title }}"/>
    </a>
	  </div>
	  <div class="tools tools-bottom">
	 	 <input type="checkbox" name="rowid" class="action-checkbox" value="{{ get_pk_value(row) }}" title="Select {{ row.title }}" /> <span role="presentation">{{ row.title }}</span>
	  </div>
	  <div class="caption">
   <section class="btn-toolbar" role="region" aria-label="{{ gettext('Image actions') }} ">
	 <section class="btn-group" >
	  <a class="btn btn-sm" href="{{ get_url('.edit_view', id=row.id, url=return_url) }}" title="{{ gettext('Edit Record') }}"><i class="fa fa-pencil-square-o"></i></a>
	  <a class="btn btn-sm preview-btn" href="{{ url_for(".internal_serve", file_id=row.file_id) }}" role="button" title="{{ gettext("Preview") }}"><i class="fa fa-eye"></i></a>
	  <a class="btn btn-sm" href="{{ get_url(".delete_confirm", pk=row.id) }}" role="button" title="{{ gettext("Delete") }}"><i class="fa fa-trash"></i></a>
	  </section>
	  </section>
	  </div>
	</div>
	</div>
    {% endfor %}
    {% if not data %}
      <div class="jumbotron">
	  <h2><i class="fa fa-image fa-3x"></i></h2>
	  <h3>{{ gettext("No images here!") }}</h3>
	  <h4 class="bold"><a href="{{ url_for('.create_view') }}">{{ gettext("Try uploading one") }}</a></h4>
	  </div>
    {% endif %}
    </div>
  </div>


{% endblock %}

{% block tail %}
{{ super() }}
<script type="text/javascript" src="{{ url_for("oy.contrib.media.admin.static", filename="vendor/magnific-popup/jquery.magnific-popup.min.js") }}"></script>

<script type="text/javascript">
$(function() {

  $(".galary-wrapper").magnificPopup({
    delegate: ".img-link",
    type: "image"
  });
$(".preview-btn").magnificPopup({type: "image"});

  var top_level = (window.frameElement && window.dialogArguments) || opener || parent || top;
  var popup = top_level.current_popup;

  if (!popup) {
    return;
  }

  $(".image-preview").click(function() {
    popup.returned_data = {
      "src": $(this).attr("src"),
      "id": $(this).data("id"),
      "title": $(this).data("title"),
    };
    popup.close();
  });

});
</script>
{% endblock %}