{% load i18n %} <div class="tab-pane fade" id="user_properties"> <div class="d-flex justify-content-end mt-1 mb-3"> <a href="{% url 'device:add_user_property' object.pk %}" class="btn btn-green-admin d-flex align-items-center"> <i class="bi bi-plus me-1"></i> {% trans 'New user property' %} </a> </div> <h5 class="card-title">{% trans 'User properties' %}</h5> <table class="table table-hover table-bordered table-responsive align-middle"> <thead class="table-light"> <tr> <th scope="col">{% trans 'Key' %}</th> <th scope="col">{% trans 'Value' %}</th> <th scope="col" data-type="date" class="text-end" data-format="YYYY-MM-DD HH:mm">{% trans 'Created on' %}</th> <th scope="col" width="5%" class="text-end" title="{% trans 'Actions' %}"></th> </tr> </thead> <tbody> {% for a in object.get_user_properties %} <tr> <td>{{ a.key }} </td> <td>{{ a.value }} </td> <td class="text-end">{{ a.created }} </td> <td> <div class="btn-group "> <button type="button" class="btn btn-sm btn-outline-info d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#editModal{{ a.id }}" > <i class="bi bi-pencil me-1"></i> {% trans 'Edit' %} </button> <button type="button" class="btn btn-sm btn-outline-danger d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#deleteModal{{ a.id }}"> <i class="bi bi-trash me-1"></i> {% trans 'Delete' %} </button> </div> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- pop up modal for delete confirmation --> {% for a in object.get_user_properties %} <div class="modal fade" id="deleteModal{{ a.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ a.id }}" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="deleteModalLabel{{ a.id }}">{% trans "Confirm Deletion" %} </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> <p> <strong>{% trans "Key:" %} </strong> {{ a.key }} </p> <p> <strong>{% trans "Value:" %} </strong> {{ a.value }} </p> <p> <strong>{% trans "Created on:" %} </strong> {{ a.created }} </p> </div> <div class="modal-footer justify-content-center"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %} </button> <form method="post" action="{% url 'device:delete_user_property' a.id %}"> {% csrf_token %} <button type="submit" class="btn btn-danger">{% trans "Delete" %} </button> </form> </div> </div> </div> </div> {% endfor %} <!-- popup modals for edit button --> {% for a in object.get_user_properties %} <div class="modal fade" id="editModal{{ a.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ a.id }}" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editModalLabel{{ a.id }}">{% trans "Edit User Property" %} </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> <form id="editForm{{ a.id }}" method="post" action="{% url 'device:update_user_property' a.id %}"> {% csrf_token %} <div class="mb-3"> <label for="key" class="form-label">{% trans "Key" %} </label> <input type="text" class="form-control" id="key" name="key" value="{{ a.key }}"> </div> <div class="mb-3"> <label for="value" class="form-label">{% trans "Value" %} </label> <input type="text" class="form-control" id="value" name="value" value="{{ a.value }}"> </div> <div class="modal-footer justify-content-center"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %} </button> <button type="submit" class="btn btn-primary">{% trans "Save changes" %} </button> </div> </form> </div> </div> </div> </div> {% endfor %}