{% load i18n static offboarding_filter %}
<style>
	#enlargeImageContainer {
		position: absolute;
		left: -380px;
		top: 100px;
		height: 200px;
		width: 350px;
	}
</style>


<div class="oh-activity-sidebar__header">
	<a style="cursor: pointer;" onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
		<ion-icon name="chevron-forward-outline"
			class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
			data-target="#activitySidebar"></ion-icon>
	</a>
	<span class="oh-activity-sidebar__title">{{employee}}'s {% trans "Notes" %}</span>
</div>

<form hx-post="{% url 'add-offboarding-note' %}?employee_id={{ employee.id }}" hx-target="#noteContainerList"
	hx-select=".oh-activity-sidebar__qa-list"
	hx-on-htmx-after-request="reloadMessage(this);$('#commentInput').val('');$('#commentButton').hide();"
	id="commentForm">
	{% csrf_token %}
	<div>
		<input type="text" name="description" id="commentInput" class="oh-input w-100" placeholder="Add notes"
			hx-on:keyup="toggleCommentButton(this);">
		<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>

<ol class="oh-activity-sidebar__qa-list" role="list" id="noteContainerList">
	{% if employee.offboardingnote_set.all %}
		{% for note in employee.offboardingnote_set.all %}
			<li class="oh-activity-sidebar__qa-item fade-me-out" id="offboardingNoteItem{{note.id}}">
				<span class="oh-activity-sidebar__q">{{ note.description }}
					{% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
						<span class="float-end" hx-get="{% url 'offboarding-note-delete' note.id %}"
							hx-target="#offboardingNoteItem{{note.id}}" hx-on:click="setTimeout(() => {reloadMessage(this);},100);"
							hx-swap="outerHTML swap:.5s">
							<ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated"
								aria-label="close outline"></ion-icon>
						</span>
					{% endif %}
				</span>

				<div class="d-flex mt-2 mb-2">
					{% for file in note.attachments.all %}
						<a href="{{ file.files.url }}" rel="noopener noreferrer" target="_blank" id="noteFileItem{{file.id}}">
							<span class="oh-file-icon oh-file-icon--pdf"
								onmouseover="enlargeImage('{{ file.attachment.url }}',$(this))" style="width: 40px; height: 40px">
								{% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
									<img src="{% static 'images/ui/minus-icon.png' %}" style="display: block; width: 50%; height: 50%"
										hx-get="{% url 'delete-note-attachment' %}?ids={{ file.id }}&employee_id={{ employee.id }}"
										hx-target="#noteFileItem{{file.id}}" hx-swap="outerHTML"
										hx-on:click="setTimeout(() => {reloadMessage(this);},100);"
										onclick="event.stopPropagation();event.preventDefault()" />
								{% endif %}
							</span>
						</a>
					{% endfor %}

					<form hx-post="{% url 'view-offboarding-note' employee.id %}?note_id={{ note.id }}" class="add-files-form"
						hx-encoding="multipart/form-data" hx-swap="innerHTML" hx-target="#noteContainer">
						{% 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>
				</div>
				<span class="oh-activity-sidebar__a">
					{% trans 'by' %}
					<img src="{{ note.note_by.get_avatar }}" style="width: 1.5em; border-radius: 100%" />
					{{ note.note_by.get_full_name }} @ {{note.stage_id }}
					{% trans "stage" %}
				</span>
				<div style="width: 50%">
					<div id="enlargeImageContainer" class="enlargeImageContainer"></div>
				</div>
			</li>
		{% endfor %}
	{% else %}
		<div class="oh-timeoff-modal__profile-content">
			<div class="oh-404">
				<div class="">
					<span class="oh-timeoff-title fw-bold" style="display: block">{% trans "No notes have been added for
						this employee" %}</span>
					<img style="display: block; width: 100px; margin: 20px auto" src="{% static " /images/ui/no_notes.png"
						%}" class="" />
				</div>
			</div>
		</div>
	{% endif %}
</ol>
