<!DOCTYPE html>{% load i18n %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8">
    <title>{% trans "Select image" %}</title>
    <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('links-list').value;
            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;
      }
    </style>
</head>
<body>
    <div class="container">
      <div class="row">
        <h3>{% trans "List of images" %}</h3>
        <select id="links-list" class="form-control">
          <option value=""></option>
          {% for image in images %}
          <option value="{{ image.get_absolute_url }}">{{ image }} - {{ image.get_absolute_url }}</option>
          {% endfor %}
        </select>
      </div>
      <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>