{% load static %}{% load i18n %} {% load basefilters %}
{% if messages %}
    <script>reloadMessage();</script>
{% endif %}
<script>
    function submitForm(elem) {
        $(elem).siblings('.add_more_submit').click()
    }
    function enlargeDoc(src, $element) {
        var enlargeDocContainer = $element.parents().closest("li").find("#enlargeDocContainer")
        enlargeDocContainer.empty()
        style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
        var enlargedImage = $('<iframe>').attr({ src: src, style: style })
        var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
        enlargeDocContainer.append(enlargedImage)
        enlargeDocContainer.append(name)
        setTimeout(function () {
            enlargeDocContainer.show()

            const iframe = document.querySelector('iframe').contentWindow
            var iframe_document = iframe.document
            iframe_image = iframe_document.getElementsByTagName('img')[0]
            $(iframe_image).attr('style', 'width:100%; height:100%;')
        }, 100)
    }

    function hideEnlargeDoc() {
        var enlargeDocContainer = $('.enlargeDocContainer')
        enlargeDocContainer.empty()
    }

    $(document).on('click', function (event) {
        if (!$(event.target).closest('#enlargeDocContainer').length) {
            hideEnlargeDoc()
        }
    })
</script>
<style>
    .enlarge-image-container {
        display: none;
        position: fixed;
        top: 40%;
        left: 40%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 50%;
        z-index: 9999;
    }
</style>

{% if notes %}
    <span id="addnote" style="cursor: pointer">
        <div class="mt-4">
            <form hx-target="#note_target" hx-post="{% url 'add-employee-note' employee.id %}" id="commentForm">
                {% csrf_token %}
                <div>
                    <div class="mt-4">
                        <span class="oh-activity-sidebar__title fw-bold">{{employee}}'s {% trans "Notes" %}</span>
                        {% if perms.employee.add_employeenote or request.user|is_reportingmanager %}
                            <input type="text" hx-on:keyup="toggleCommentButton(this);" name="description" id="commentInput"
                            class="oh-input w-100 mt-2" placeholder="{% trans 'Add notes' %}">
                        {% endif %}
                    </div>
                    <button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
                        style="display: none;">
                        {% trans "Add" %}
                    </button>
                </div>
                <div class="oh-inner-sidebar-content__footer"></div>
            </form>
        </div>
    </span>
    <ol class="oh-activity-sidebar__qa-list" role="list">
        {% for note in notes %}
            <div id="employeeNote{{note.id}}">
                <li class="oh-activity-sidebar__qa-item">
                    <span class="oh-activity-sidebar__q">{{note.description}}
                        {% if perms.employee.delete_employeenote or request.user|is_reportingmanager %}
                        <span class="float-end" hx-get="{% url 'employee-note-delete' note.id %}"
                            hx-on:click="setTimeout(() => {reloadMessage(this);},100);" hx-target="#employeeNote{{note.id}}"
                            hx-swap="delete" id="deleteNote">
                            <ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated" aria-label="close outline"></ion-icon></span>
                        </span>
                        {% endif %}
                    </span>
                    {% if perms.employee.view_notefiles or request.user|is_reportingmanager %}
                        <div class="d-flex mt-2 mb-2">
                            {% for file in note.note_files.all %}
                                <a href="{{ file.files.url }}" rel="noopener noreferrer" target="_blank">
                                    <span class="oh-file-icon oh-file-icon--pdf" id="noteFile{{file.id}}"
                                        onmouseover="enlargeDoc('{{ file.files.url }}',$(this))" onmouseout="hideEnlargeDoc()"
                                        style="width: 40px; height: 40px">
                                        {% if perms.employee.delete_notefiles or request.user|is_reportingmanager %}
                                            <img src="{% static 'images/ui/minus-icon.png' %}"
                                                style="display: block; width: 50%; height: 50%" hx-swap="delete"
                                                hx-get="{% url 'delete-employee-note-file' file.id %}" hx-target="#noteFile{{file.id}}"
                                                onclick="event.stopPropagation();event.preventDefault()" />
                                        {% endif %}
                                    </span>
                                </a>
                            {% endfor %}
                            {% if perms.employee.add_notefiles or request.user|is_reportingmanager %}
                                <form hx-post="{% url 'add-more-files-employee' note.id %}" class="add-files-form"
                                    hx-encoding="multipart/form-data" data-target="#activitySidebar" hx-swap="innerHTML"
                                    hx-target="#note_target">
                                    {% csrf_token %}
                                    <label for="addFile_{{note.id}}" title="Add Files"><ion-icon name="add-outline"
                                            style="font-size: 24px" role="img" class="md hydrated"
                                            aria-label="add outline"></ion-icon></label>
                                    <input type="file" name="files" class="d-none" multiple="true" id="addFile_{{note.id}}"
                                        onchange="submitForm(this)" />
                                    <input type="submit" class="d-none add_more_submit" value="save" />
                                </form>
                            {% endif %}
                        </div>
                    {% endif %}
                    <span class="oh-activity-sidebar__a">
                        {% trans "by" %}
                        <img src="https://ui-avatars.com/api/?name={{note.updated_by.get_full_name}}&amp;background=random"
                            style="width: 1.5em; border-radius: 100%" alt="User" />
                        {{note.updated_by}}
                    </span>
                    <span class="oh-activity-sidebar__a">
                        {% trans "at" %} &nbsp
                        <span class="dateformat_changer">{{ note.created_at|date:"Y-m-d" }}</span>
                        &nbsp
                        <span class="timeformat_changer">{{ note.created_at|time:"H:i" }}</span>
                    </span>
                    <div style="width: 30%">
                        <div id="enlargeDocContainer" class="enlargeDocContainer"></div>
                    </div>
                </li>
            </div>
        {% endfor %}
    </ol>
{% else %}
    <div class="mt-4">
        <form hx-target="#note_target" hx-post="{% url 'add-employee-note' employee.id %}"
            hx-on:change="console.log('test');" id="commentForm">
            {% csrf_token %}
            <div>
                <div class="mt-4">
                    <span class="oh-activity-sidebar__title fw-bold">{{employee}}'s {% trans "Notes" %}</span>
                    {% if perms.employee.add_employeenote or request.user|is_reportingmanager %}
                    <input type="text" hx-on:keyup="toggleCommentButton(this);" name="description" id="commentInput"
                        class="oh-input w-100 mt-2" placeholder="{% trans 'Add notes' %}">
                    {% endif %}
                </div>
                <button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
                    style="display: none;">
                    {% trans "Add" %}
                </button>
            </div>
            <div class="oh-inner-sidebar-content__footer"></div>
        </form>
    </div>

    <div class="d-flex mt-5" style="margin-left: 30%">
        <img style="width: 80px; height: 90px" src="{% static 'images/ui/no_notes.png' %}" />
        <h5 class="oh-404__subtitle mt-4 ml-2">
            {% trans "No notes have been added for this employee" %}
        </h5>
    </div>
{% endif %}