Я использую django generi c deleteview для удаления моего объекта. я хочу удалить объект из списка объектов. Есть значок tra sh. Если пользователь щелкнет значок tra sh, появится всплывающее модальное окно, чтобы убедиться, хочет ли пользователь удалить объект или нет. Всплывающее окно будет иметь кнопку отмены и кнопку удаления. Если пользователь нажимает кнопку удаления, объект будет удален навсегда. Но проблема в том, что список находится в одном html, а удаленный модальный всплывающий html находится в другом html. Поскольку я использую класс django generi c для ListView и DeleteView, мне нужно сохранить два отдельных html. теперь я не знаю, как я могу подключить оба htmla и показать опцию удаления всплывающего окна 
employee_list. html: это html показывает список сотрудников.
{% extends "base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'employee/css/master.css' %}">
<div class="">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2><b>Employees</b></h2>
</div>
<div class="col-sm-6">
<a href="{% url 'employee:employee-add' %}" data-target="exampleModal" class="btn btn-success" data-toggle="modal">
<span ></span>
<i class="material-icons"></i>
<span data-feather="plus"></span>Add New Employee
</a>
<!--<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>-->
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Department</th>
<th>Designation</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Loop for showing employee list in a table-->
{% for employee in employees %}
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td>{{employee.e_id}}</td>
<td>{{employee.first_name}}</td>
<td>{{employee.last_name}}</td>
<td>{{employee.email}}</td>
<td>{{employee.address}}</td>
<td>{{employee.phone_number}}</td>
<td>{{employee.department}}</td>
<td>{{employee.designation}}</td>
<td>
<a href="{% url 'employee:employee-update' employee.id %}" class="edit" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<span data-feather="edit-2"></span>
</a>
<a href="{% url 'employee:employee-delete' employee.id %}" date-target="#deleteEmployeeModal" class="delete" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
<span data-feather="trash"></span>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="">
{% if is_paginated %}
<ul class="pagination">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}"><span data-feather="chevron-left"></span></a></li>
{% else %}
<li class="disabled"><span data-feather="chevron-left"></span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span class="pagination-number pagination-current">{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a class="pagination-number" href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}"><span data-feather="chevron-right"></span></a></li>
{% else %}
<li class="disabled"><span data-feather="chevron-right"></span></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content"
</div>
</div>
</div>
{% endblock %}
employee_delete. html: Этот html показывает модальное удаление:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="{% static 'dashboard/css/master.css' %}">
</head>
<body>
<h2>Employee delete </h2>
<form method="post">
{% csrf_token %}
<div class="modal-header">
<h4 class="modal-title">Delete Employee</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-danger" value="Delete">
</div>
</form>
</body>
</html>
views.py:
class EmployeeDeleteView(DeleteView):
"""
Deletes a created employee
"""
template_name = 'employee/employee_delete.html'
queryset = Employee.objects.all()
def get_success_url(self):
return reverse('employee:employee-list')
def get_object(self):
id_ = self.kwargs.get("id")
return get_object_or_404(Employee, id=id_)
def delete_modal_view(request):
return render(request, "employee_delete.html")