{% extends "_base.html" %}
{% load exif_decode %}
{% load string_manipulations %} {% load static %}

{% block content %}
    <div id="progress-bar-container">
        <div id="bar"></div>
    </div>

    <div class="flex justify-center items-center absolute top-0 left-0 w-full h-full">
        <div class="flex items-center justify-evenly transform-gpu">
            <div class="p-5 bg-white max-w-screen-lg border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                <div class="flex flex-row justify-center items-center">
                    <img class="change-cursor z-50 aspect-square border border-orange-400 flex-1 float-left object-cover h-96 rounded-t-lg rounded-b-lg"
                         src="{{ original_image_url }}" alt="Uploaded Image"
                         onclick="showImageModal('{{ original_image_url }}')"/>

                    <div class="text-left flex flex-col justify-center pt-5 pb-5 pl-5 overscroll-contain h-96">

                        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Image
                            properties:</h5>
                        <p class="font-bold text-gray-700 dark:text-gray-200">Name: &nbsp;<span
                                class="font-normal dark:text-gray-400"
                                style="font-family: Consolas, monospace">{{ image_name }}</span>
                        </p>
                        <p class="font-bold text-gray-700 dark:text-gray-200">Format: &nbsp;<span
                                class="font-normal dark:text-gray-400"
                                style="font-family: Consolas, monospace">{{ image_format }}</span>
                        </p>
                        <p class="font-bold text-gray-700 dark:text-gray-200">Resolution: &nbsp;<span
                                class="font-normal dark:text-gray-400"
                                style="font-family: Consolas, monospace">{{ image_resolution }}</span>
                        </p>
                        <p class="font-bold text-gray-700 dark:text-gray-200">Size: &nbsp;<span
                                class="font-normal dark:text-gray-400"
                                style="font-family: Consolas, monospace">{{ image_size }}</span>
                        </p>
                        <p class="font-bold text-gray-700 dark:text-gray-200">Aspect ratio: &nbsp;<span
                                class="font-normal dark:text-gray-400"
                                style="font-family: Consolas, monospace">{{ aspect_ratio }}</span>
                        </p>

                        <p class="font-bold text-gray-700 dark:text-gray-200">Color mode: &nbsp;<span
                                class="font-normal dark:text-gray-400"
                                style="font-family: Consolas, monospace">{{ image_mode }}</span>
                        </p>

                        <div class="flex inline-flex items-center justify-evenly mt-4">
                            <button onclick="location.href='/'"
                                    type="button"
                                    class="mb-2 mr-4 text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700">
                                Choose another image
                            </button>
                            <button onclick="goToImageEditor('Loading Image editor...', true)"
                                    type="button"
                                    class="relative inline-flex items-center justify-center p-0.5 mb-2 ml-4 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
                                <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
                                  Edit image
                                </span>
                                <svg aria-hidden="true" class="w-5 h-5 ml-1 mr-1" fill="currentColor" stroke-width="2"
                                     viewBox="0 0 20 20"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                          clip-rule="evenodd"></path>
                                </svg>
                            </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- The Modal -->
    <div id="modal-image"
         class="hidden fixed top-0 left-0 z-[999] w-screen h-screen bg-black/70 flex justify-center items-center">

        <!-- A big image will be displayed here -->
        <img id="{{ image_name }}"
             class="max-w-[800px] max-h-[600px] object-cover"
             alt="Image Modal" src=""/>

        <!-- The close button -->
        <a class="flex z-[999] ml-10 mb-[35rem] text-white"
           onclick="closeImageModal()">
            <svg class="w-12 h-12 ml-1 mr-1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
                 aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </a>
    </div>

    <style>
        .change-cursor {
            cursor: url("{{ original_image_url }}") 25 25, pointer;
        }
    </style>

    {{ image_name|json_script:'imageId' }}
    <script src="../static/js/services/showProgressBarAndMessage.js"></script>
    <script src="../static/js/services/openImageModal.js"></script>
    <script src="../static/js/services/Toastify.js"></script>
    <script type="text/javascript">
      function goToImageEditor(message, success) {
        location.href = '/image_edit';
        showProgressBarAndMessage(message, success);
      }
    </script>
{% endblock content %}