<!DOCTYPE html>{% load i18n %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
	{% load i18n static coop_navigation coop_utils coop_bar_tags coop_bs coop_edition thumbnail %}
    <meta charset="UTF-8">
    <title>{% trans "Select image" %}</title>
	<script src="{% static 'js/jquery-1.7.2.js' %}" type="text/javascript"></script>
	<link rel="stylesheet" href="{% versioned_static_file 'bs/css/bootstrap.css' %}" type="text/css" />
    <script>
        // Helper function to get parameters from the query string.
        function getUrlParam( paramName ) {
            var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
            var match = window.location.search.match( reParam );

            return ( match && match.length > 1 ) ? match[1] : null;
        }
        // Simulate user action of selecting a file to be returned to CKEditor.
        function returnFileUrl() {

            var funcNum = getUrlParam('CKEditorFuncNum');
            var fileUrl = document.getElementById('img-selected').src;
            window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);
            window.close();
        }
    </script>
    <style>
      body {
        font-family: Arial, Sans-Serif;
        font-size: 14px;
      }

      .container {
        margin: 0 auto;
        width: 80%;
      }

      .btn {
        padding: 4px;
        border-radius: 4px;
        margin: 0 5px;
        border: solid 1px #cccccc;
      }
      .row {
        padding: 20px 0;
      }

      .btn-primary {
        color: #fff;
        background: #5b9acf;
      }
		.selected
		{
			border: 2px solid orange;
		}

		.disable:focus
		{
			text-decoration: none;
			outline: none;
		}
		.pagination
		{
			margin-left: -15px;
		}
    </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <h3>{% trans "List of images" %}</h3>
          {% for image in page_images %}
			  <a class="disable" href>
				  <img width="300" class="img-selected" src="{{ image.get_absolute_url }}" />
			  </a>
          {% endfor %}
      </div>
	<script type="text/javascript">
		$('a.disable').click(function(){
		    return false;
		});

		$('img.img-selected').on("click", function() {
		    $('img.img-selected').removeClass('selected').removeAttr('id');
		    $(this).addClass('selected').attr('id', 'img-selected');
		})
	</script>
	{% include "coop_cms/_pagination.html" with page=images pages=pages %}
      <div class="row">
        <button class="btn" onclick="window.close()">{% trans "Close" %}</button>
        <button class="btn btn-primary" onclick="returnFileUrl()">{% trans "Select image" %}</button>
      </div>
    </div>
</body>
</html>