Works almost

abac/templates/landing_page.html

@@ -1,14 +1,42 @@
 {% extends 'base.html' %}
+{% load static %}
+
+{% block title %}ABAC Home{% endblock %}
 
-{% block title %}Landing Page{% endblock %}
 
 {% block content %}
-  <h2>All Files</h2>
-  <ul>
-    {% for file in files %}
-      <li>{{ file.name }}</li>
-    {% empty %}
-      <li>No files have been uploaded yet.</li>
-    {% endfor %}
-  </ul>
-{% endblock %}
+<div class="container mt-3">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">File Name</th>
+        <th scope="col">Owner</th>
+        <th scope="col">Created At</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for file in files %}
+        <tr data-url="{% url 'abac:file_detail' file_id=file.id %}"> <!-- Add data-url attribute here -->
+          <td>{{ file.name }}</td>
+          <td>{{ file.owner.username }}</td>
+          <td>{{ file.created_at|date:"F d, Y H:i" }}</td>
+          <td>
+            <a href="{{ file.file.url }}" download="{{ file.name }}" class="btn btn-outline-primary btn-sm">
+              <i class="bi bi-download"></i> Download
+            </a>
+          </td>
+        </tr>
+      {% empty %}
+        <tr>
+          <td colspan="4" class="text-center">No files have been uploaded yet.</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+
+<script src="{% static 'abac/main.js' %}"></script>
+
+{% endblock %}
+