How to list all files associated by the employee?

Question

need help on how to render to django html template the list of files associated in the employee model

please help me with my problem., thanks

here is my Document model:

class Document(models.Model):
    employee = models.ForeignKey(Employee, on_delete=models.CASCADE)
    filename = models.CharField(max_length=250, blank=True)
    file = models.FileField(upload_to=employee_file_path)
    uploaded_at = models.DateTimeField(auto_now_add=True)

def __str__(self):
    return self.employee.fullname

this is my views.py

def employee_documents(request, pk):
    employee = get_object_or_404(Employee, pk=pk)
    documents = employee.document_set.all()
    context = {'employee': employee, 'documents': documents}
    return render(request, 'hris/document/employee_documents.html', context)

this is my html template

<div class="card mb-4">
<div class="card-body">

    <h5 class="my-3 text-center">Uploaded Files</h5>

    {% if documents %}
        {% for docs in documents %}
            <div class="row">
                <div class="col-sm-3">
                    <p class="mb-0">{{ docs.filename }}</p>
                </div>
                <div class="col-sm-9">
                    <p class="text-muted mb-0">{{ docs.file.url }}</p>
                </div>
            </div>
        {% empty %}
            <p>No Uploaded Documents</p>
        {% endfor %}
    {% endif %}
    <div class="d-flex justify-content-center mb-2">
        <a href="{% url 'document-upload' slug=employee.slug pk=employee.pk %}" class="btn btn-md btn-outline-primary ms-1">Upload File</a>
    </div>
</div>

this is the image i want to replicate goal output

I already tried using the generic Class Based Views, but it didn't render in the html page.

I already tried the same method of rendering the image file but it failed.