<!--modal header-->
<div class="modal-header row customModalHeight-10">
<div class="col-10 d-flex gap-4 align-items-center">
<div class="col d-flex gap-4 align-items-center">
<h5 class="modal-title text-secondary" id="exampleModalLabel">Bild-Id:
<span class="text-dark">{{entry.id}}</span>
</h5>
<h5 class="m-0 text-secondary">Bild von:
<span class="text-dark">{{ entry.name ?: user.name }}
({{ entry.age ?: user.age }})</span>
</h5>
<h5 class="m-0 text-secondary">Hochgeladen am:
<span class="text-dark">
{{entry.uploaded|date('d.m.Y')}}</span>
</h5>
</div>
<!--Nav-tabs to toggle between picture and conversations-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
role="tab" aria-controls="home" aria-selected="true">Bild</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#konversationen"
type="button" role="tab" aria-controls="konversationen"
aria-selected="false">Konversationen</button>
</li>
</ul>
</div>
<div class="col d-flex justify-content-end">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!--modal body-->
<div class="modal-body customModalHeight-80">
<div class="h-100 tab-content" id="myTabContent">
<!--picture Tab starts here-->
<div class="h-100 tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row h-100">
<div class="col-lg-9 h-100 d-flex justify-content-center">
<img src="{{" /upload/"~ entry.ImageFile}}" id="bigimage"
class="img-fluid object-fit-cover border rounded h-100" alt="Responsive image">
</div>
<div class="h-100 col-lg-3 d-flex flex-column overflow-auto justify-content-between border-start">
{# formular starts here #}
<form action="/backend/insert/" method="post" id="modalForm">
<input type="hidden" value="{{entry.id}}" name="id">
{% if not status == 'deleted' %}
<label for="processing" class="mb-2">Status</label>
<select class="form-select mb-4" aria-label="Default select example" name="processing">
{# translating the type from the db #}
{% set statusList =
{"new": "Neu",
"read": "Gesichtet",
"download": "Heruntergeladen",
}
%}
{% for key, label in statusList %}
{% if key == processing.type %}
<option value="{{ key }}" selected>{{ label }}</option>
{% else %}
<option value="{{ key }}">{{ label }}</option>
{% endif %}
{% endfor %}
</select>
{% endif %}
<p class="mb-2">Tags</p>
<div class="border rounded pb-1" id="tag-container">
<div class="container" id="tagsContainer">
<!-- Tags -->
{% for tag in entry.tag %}
<input type="checkbox" name="tag[]" class="form-check-input d-none " id="{{tag.name}}"
value="{{tag.name}}" checked>
<label for="{{tag.name}}"
class="badge text-bg-secondary text-lg fs-7 mt-2 mx-1 custom_tag_label">{{tag.name}}
x</label>
{% endfor %}
</div>
</div>
<button class="btn btn-primary w-100 mt-2 mb-4" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse" aria-expanded="false" aria-controls="collapse">Tags
hinzufügen</button>
<div class="collapse mb-2" id="collapse">
<input type="text" placeholder="Neuen Tag Anlegen" class="dropdown-item border my-1 p-1"
id="newTag">
<button type="button" class="btn btn-secondary w-100 fs-7 "
onclick="addTag()">Hinzufügen</button>
</div>
{% if not status == 'deleted' %}
<div class="form-check form-switch mt-4 d-flex justify-content-between">
<div>
<input class="form-check-input" type="checkbox" role="switch" id="acceptedtoggle"
name="accepted" data-toggle="toggle" data-target="#accepted">
<label class="form-check-label" for="acceptedtoggle">Freigeben</label>
</div>
{% if accepted is not null %}
<p class="text-muted" id="accepted">{{accepted|date('d.m.Y')}}</p>
{% endif %}
</div>
{% endif %}
</form>
</div>
</div>
</div>
<!--Conversations Tab starts here-->
<div class="tab-pane h-75 fade" id="konversationen" role="tabpanel" aria-labelledby="profile-tab">
<div class="mt-4 h-100 d-flex ">
<div class="container col-md-6 h-100">
<div class="card mb-4 h-50">
<div class="card-body overflow-auto">
<h4>Kontaktinformationen</h4>
<p>Name des Kindes: {{ entry.name ?: user.name }}</p>
<p>Email: <a class="text-primary" href="mailto:{{ user.email }}">{{ user.email}}</a></p>
<p>Alter: {{ entry.age ?: user.age }}</p>
</div>
</div>
<div class="card h-50">
<div class="card-body h-100">
<h4 class="h-25">Konversationen</h4>
<ul id="convContainer" class="list-group overflow-auto h-75">
<li class="list-group-item d-flex justify-content-between align-items-center">
<!-- conversations for selected picture are loaded by conversations.js -->
<span>Konversationen werden geladen ...</span>
</li>
</ul>
</div>
</div>
</div>
<div class="container col-md-4">
<div class="card">
<div class="card-body">
<h4>Neue Konversation starten</h4>
<div class="mb-3">
<label for="topicinput" class="form-label">Thema</label>
<input type="text" class="form-control" id="topicinput" placeholder="Thema eingeben">
</div>
<div class="mb-3">
<label for="messageinput" class="form-label">Nachricht</label>
<textarea class="form-control h-100" id="messageinput" rows="3"
placeholder="Nachricht eingeben"></textarea>
</div>
<button type="button" class="btn btn-info w-100 mb-1"
onclick="openConversation({{entry.id}},'{{ user.email }}')">Konversation öffnen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--modal footer-->
<div class="modal-footer">
{% if status == "deleted"%}
<button type="button" class="btn btn-danger" id="deletefinalyButton"
onclick="alert('diese Funktion steht noch nicht zur Verfügung')">endgültig löschen</button>
<button type="button" class="btn btn-success" id="restoreButton">Bild wiederherstellen</button>
<button type="button" class="btn btn-secondary" id="saveButton" data-dismiss="modal">Speichern</button>
<button type="button" class="btn btn-primary" id="saveAndNext">Speichern und weiter</button>
{% else %}
<a type="button" href="/backend/download/original/{{entry.id}}" class="btn btn-primary">Herunterladen</a>
<button type="button" class="btn btn-danger" id="deleteButton">löschen</button>
<button type="button" class="btn btn-secondary" id="saveButton" data-dismiss="modal">Speichern</button>
<button type="button" class="btn btn-primary" id="saveAndNext">Speichern und weiter</button>
{% endif %}
</div>