{% 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 flex-row justify-center items-center pt-6">
            {% if form.errors %}
                <div class="alert alert-danger">
                    <strong>Errors:</strong>
                    <ul>
                        {% for field in form %}
                            {% for error in field.errors %}
                                <li>{{ field.label }}: {{ error }}</li>
                            {% endfor %}
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <div class="max-w-sm p-6 ml-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">

                {% if form.is_multipart %}
                    <form method="post" enctype="multipart/form-data" id="imageFormConvertId">
                {% else %}
                    <form method="post" id="imageFormConvertId">
                {% endif %}

                {% csrf_token %}
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                       for="{{ form.images_to_convert.auto_id }}">
                    Upload your image(s):
                </label>

                <input class="block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                       type="file" name="images_to_convert" multiple accept=".jpeg,.jpg,.png,.webp,.bmp,.jfif,.ico,.gif,.tiff"
                       id="{{ form.images_to_convert.auto_id }}">

                {% if error %}
                    <p class="mt-1 text-xs font-thin text-red-600 dark:text-red-500">{{ error }}</p>
                {% else %}
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-300 font-light">
                        Image size should be lower than 6 MB and max. 15 files to upload
                    </p>
                {% endif %}

                <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 font-light">
                    Supports .WEBP, .JPEG, .JFIF, .PNG, .GIF, .BMP, .ICO, .TIFF
                </p>

                <label class="block mb-2 mt-8 text-sm font-medium text-gray-900 dark:text-white"
                       for="{{ form.output_format.auto_id }}">
                    Output format:
                </label>

                <label>
                    <select name="output_format"
                            id="{{ form.output_format.auto_id }}"
                            class="block w-full px-4 py-3 text-base text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                        <option value="WEBP">WEBP</option>
                        <option value="JPEG">JPEG</option>
                        <option value="PNG">PNG</option>
                        <option value="GIF">GIF</option>
                        <option value="BMP">BMP</option>
                        <option value="ICO">ICO</option>
                        <option value="TIFF">TIFF</option>
                    </select>
                </label>

                <label for="{{ form.quality.auto_id }}"
                       class="block mb-2 mt-4 text-sm font-medium text-gray-900 dark:text-white">
                    Choose quality of converted image(s)
                </label>
                <input id="{{ form.quality.auto_id }}"
                       type="range"
                       name="quality"
                       min="{{ form.quality.min_value }}"
                       max="{{ form.quality.max_value }}"
                       step="{{ form.quality.step_size }}"
                       value="{{ form.quality.initial }}"
                       class="w-full h-2 bg-gray-200 rounded-lg appearance-none dark:bg-gray-700 cursor-not-allowed"
                       disabled>

                <div class="flex flex-row justify-between mt-8">
                    <button type="submit"
                            id="upload-image"
                            class="relative inline-flex disabled:opacity-25 items-center justify-center p-0.5 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 cursor-not-allowed"
                            disabled>
                        <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">
                            Upload and convert
                        </span>

                        <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                             class="w-6 h-6 ml-1 mr-1"
                             xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
                            </path>
                        </svg>
                    </button>
                </div>
                </form>
            </div>

            <div id="converter">
                {% if converted_images %}
                    {% with converted_images|length as converted_images_length %}
                        {% if converted_images_length > 1 %}
                            <div class="flex justify-end">
                                <button id="download-all-converted"
                                        class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-6 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">
                                        Download all
                                    </span>
                                    <svg class="w-8 h-8"
                                         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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
                                    </svg>
                                </button>
                            </div>
                        {% endif %}
                    {% endwith %}

                    <div class="ml-12 mr-6 flex justify-center relative overflow-y-auto shadow-md rounded-lg w-[60rem] min-h-min max-h-[65vh] h-[35rem]">

                        <table id="converted-images-table"
                               class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 sticky top-0">
                            <tr>
                                <th scope="col" class="px-6 py-3">
                                    <span class="sr-only">Image</span>
                                </th>

                                <th scope="col" class="px-6 py-3">
                                    File name
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Info
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Delete
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for image_url, image_name, public_id, image_name_shorter, original_image_format, converted_image_format, original_file_size, converted_file_size, original_image_mode, original_image_info, converted_image_mode, converted_image_info in converted_images %}
                                <tr id="table-row-{{ image_name_shorter }}"
                                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="w-32 p-4">
                                        {% if converted_image_format == 'TIFF' %}
                                            <div class="aspect-square border border-orange-400 flex-1 float-left object-cover h-[11rem] mr-[-5rem] rounded-t-lg rounded-b-lg flex justify-center items-center">
                                                <svg class="w-12 h-12 text-gray-200"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     aria-hidden="true"
                                                     fill="currentColor"
                                                     viewBox="0 0 640 512">
                                                    <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z">
                                                    </path>
                                                </svg>
                                            </div>
                                        {% else %}
                                            <img class="change-cursor aspect-square border border-orange-400 flex-1 float-left object-cover h-[11rem] rounded-t-lg rounded-b-lg"
                                             id="{{ image_name_shorter }}"
                                             onclick="showImageModal('{{ image_url }}')"
                                             src="{{ image_url }}"
                                             alt="Uploaded image">
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 w-[10rem] max-w-[16rem] font-semibold text-gray-900 dark:text-white">
                                        <div class="container">
                                            <p class="text-justify overflow-x-hidden">{{ image_name_shorter }}</p>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 w-[5rem]">
                                        <div class="flex justify-start items-center">
                                            <button class="font-medium text-black dark:text-sky-600 hover:underline"
                                                    data-popover-target="popover-{{ image_name_shorter }}"
                                                    data-popover-trigger="click"
                                                    data-popover-placement="left"
                                                    type="button">
                                                <svg fill="none" stroke="currentColor" stroke-width="1.5"
                                                     viewBox="0 0 24 24"
                                                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                     class="h-8 w-8">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 w-[5rem]">
                                        <div class="flex justify-start items-center">
                                            <button class="font-medium text-red-600 dark:text-red-500 hover:underline"
                                                    id="delete-button-{{ image_name_shorter }}">
                                                <svg fill="none" stroke="currentColor" stroke-width="1.5"
                                                     viewBox="0 0 24 24"
                                                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                     class="h-8 w-8">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <div data-popover id="popover-{{ image_name_shorter }}"
                                     role="tooltip"
                                     class="absolute z-50 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-[36rem] dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <div class="p-6">
                                        <div class="flex">
                                            <div>
                                                <div class="w-full flex justify-end mb-4">
                                                    <button type="button"
                                                            id="download-button-{{ image_name_shorter }}"
                                                            class="text-white bg-[#FF9119] hover:bg-[#FF9119]/80 focus:ring-4 focus:outline-none focus:ring-[#FF9119]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:hover:bg-[#FF9119]/80 dark:focus:ring-[#FF9119]/40 mr-2 mb-2">
                                                        <svg class="w-8 h-8"
                                                             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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="flex justify-center">
                                                    <h5 class="mb-2 w-48 text-2xl font-bold text-center tracking-tight text-gray-900 dark:text-white rounded-lg border border-gray-200 dark:border-gray-600">
                                                        CHANGES
                                                    </h5>
                                                </div>

                                                <div class="grid grid-cols-3 h-64 overflow-y-scroll">
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 rounded-tl-lg flex items-center justify-center">
                                                        <p class="font-bold underline underline-offset-auto text-lg text-gray-700 dark:text-gray-200">
                                                            Parameters</p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-bold underline underline-offset-auto text-lg text-gray-700 dark:text-gray-200">
                                                            Original image</p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 rounded-tr-lg flex items-center justify-center">
                                                        <p class="font-bold underline underline-offset-auto text-lg text-gray-700 dark:text-gray-200">
                                                            Converted image</p>
                                                    </div>

                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-bold text-sm text-gray-700 dark:text-gray-200">
                                                            Format</p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-normal dark:text-gray-400 whitespace-normal"
                                                           style="font-family: Consolas, monospace">
                                                            {{ original_image_format }}
                                                        </p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-normal dark:text-gray-400 whitespace-normal"
                                                           style="font-family: Consolas, monospace">
                                                            {{ converted_image_format }}
                                                        </p>
                                                    </div>

                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-bold text-sm text-gray-700 dark:text-gray-200">
                                                            File size</p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-normal dark:text-gray-400 whitespace-normal"
                                                           style="font-family: Consolas, monospace">
                                                            {{ original_file_size }}
                                                        </p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-normal dark:text-gray-400 whitespace-normal"
                                                           style="font-family: Consolas, monospace">
                                                            {{ converted_file_size }}
                                                        </p>
                                                    </div>

                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-bold text-sm text-gray-700 dark:text-gray-200">
                                                            Color mode</p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-normal dark:text-gray-400 whitespace-normal"
                                                           style="font-family: Consolas, monospace">
                                                            {{ original_image_mode }}
                                                        </p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 flex items-center justify-center">
                                                        <p class="font-normal dark:text-gray-400 whitespace-normal"
                                                           style="font-family: Consolas, monospace">
                                                            {{ converted_image_mode }}
                                                        </p>
                                                    </div>

                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 rounded-bl-lg flex items-center justify-center">
                                                        <p class="font-bold text-sm text-gray-700 dark:text-gray-200">
                                                            Exif data</p>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600">
                                                        <div class="p-2">
                                                            {% if not original_image_info|is_instance:"str" %}
                                                                {% for key, value in original_image_info.items %}
                                                                    {% with value|decode_exif_value as formatted_value %}
                                                                        <p class="font-bold text-xs text-gray-700 dark:text-gray-200 text-left">
                                                                            {{ key }}:&nbsp;
                                                                            <span class="font-normal dark:text-gray-400 whitespace-normal"
                                                                                  style="font-family: Consolas, monospace">
                                                                        {{ formatted_value }}
                                                                    </span>
                                                                        </p>
                                                                    {% endwith %}
                                                                {% endfor %}
                                                            {% else %}
                                                                <p class="font-bold text-xs text-gray-700 dark:text-gray-200 text-center mt-4">
                                                            <span class="font-normal dark:text-gray-400 whitespace-normal"
                                                                  style="font-family: Consolas, monospace">
                                                                {{ original_image_info }}
                                                            </span>
                                                                </p>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                    <div class="h-auto w-48 max-w-full border border-gray-200 dark:border-gray-600 rounded-br-lg">
                                                        <div class="p-2">
                                                            {% if not converted_image_info|is_instance:"str" %}
                                                                {% for key, value in converted_image_info.items %}
                                                                    {% with value|decode_exif_value as formatted_value %}
                                                                        <p class="font-bold text-xs text-gray-700 dark:text-gray-200 text-left">
                                                                            {{ key }}:&nbsp;
                                                                            <span class="font-normal dark:text-gray-400 whitespace-normal"
                                                                                  style="font-family: Consolas, monospace">
                                                                        {{ formatted_value }}
                                                                    </span>
                                                                        </p>
                                                                    {% endwith %}
                                                                {% endfor %}
                                                            {% else %}
                                                                <p class="font-bold text-xs text-gray-700 dark:text-gray-200 text-center mt-4">
                                                            <span class="font-normal dark:text-gray-400 whitespace-normal"
                                                                  style="font-family: Consolas, monospace">
                                                                {{ converted_image_info }}
                                                            </span>
                                                                </p>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-popper-arrow></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_shorter }}"
                                         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("{{ image_url }}") 25 25, pointer;
                                    }
                                </style>

                                {{ image_name_shorter|json_script:'imageId' }}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>

        </div>
    </div>
    <script src="../static/js/services/enableUploadButton.js"></script>
    <script src="../static/js/services/openImageModal.js"></script>
    <script src="../static/js/services/Toastify.js"></script>
    <script src="../static/js/services/convertImages.js"></script>
    <script src="../static/js/services/showProgressBarAndMessage.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
{% endblock content %}