{% extends "oy/contrib/media/admin/list.html" %}

{% macro delete_row(row_id, row) %}
<form style="display: inline-block;" method="POST" action="{{ get_url('.delete_view') }}">
  {{ delete_form.id(value=get_pk_value(row)) }}
  {{ delete_form.url(value=return_url) }}
  {% if delete_form.csrf_token %}
  {{ delete_form.csrf_token }}
  {% elif csrf_token %}
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  {% endif %}
  <button class="btn btn-sm" onclick="return safeConfirm('{{ _gettext('Are you sure you want to delete this record?') }}');" title="{{ _gettext('Delete record') }}">
    <i class="fa fa-trash-o"></i>
  </button>
</form>
{% endmacro %}

{% block head %}
  {{ super() }}
  <style>
	.select-all-wrapper {
		margin-bottom: 1.5rem;
		max-width: 45%;
	}
  .galary-wrapper {
    margin: auto 1.2rem auto 1.2rem;
  }
  </style>
{% endblock %}

{% block body %}
  {% block model_menu_bar %}
    {{ super() }}
  {% 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-md-55">
	<div class="thumbnail">
	  <div class="image view view-first">
		<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 }}" tabindex="0"/>
	  </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" >
	 {{ delete_row(row.id, row) }}
	  <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>
	  <button class="btn btn-sm" href="{{ url_for(".internal_serve", file_id=row.file_id) }}" data-lity data-lity-desc="{{ row.title }}" title="{{ gettext("Preview") }}"><i class="fa fa-eye"></i></button>
	  </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">
$(document).ready(function() {

  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 %}