feat: add django templates for tagging app UI

course_discovery/apps/tagging/templates/partials/course_table.html

@@ -0,0 +1,106 @@
+<table class="table table-bordered table-hover">
+    <thead>
+        <tr>
+            <th>#</th>
+            <th>
+                <a href="?sort=key&direction={% if current_sort == 'key' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
+                    Course Key
+                    {% if current_sort == 'key' %}
+                        <span>{% if current_direction == 'asc' %}▲{% else %}▼{% endif %}</span>
+                    {% endif %}
+                </a>
+            </th>
+            <th>
+                <a href="?sort=title&direction={% if current_sort == 'title' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
+                    Course Title
+                    {% if current_sort == 'title' %}
+                        <span>{% if current_direction == 'asc' %}▲{% else %}▼{% endif %}</span>
+                    {% endif %}
+                </a>
+            </th>
+            <th>
+                <a href="?sort=vertical&direction={% if current_sort == 'vertical' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
+                    Vertical
+                    {% if current_sort == 'vertical' %}
+                        <span>{% if current_direction == 'asc' %}▲{% else %}▼{% endif %}</span>
+                    {% endif %}
+                </a>
+            </th>
+            <th>
+                <a href="?sort=sub_vertical&direction={% if current_sort == 'sub_vertical' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
+                    Sub-Vertical
+                    {% if current_sort == 'sub_vertical' %}
+                        <span>{% if current_direction == 'asc' %}▲{% else %}▼{% endif %}</span>
+                    {% endif %}
+                </a>
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for course in courses %}
+            <tr>
+                <td>{{ forloop.counter }}</td>
+                <td>{{ course.key }}</td>
+                <td>
+                    <a href="{% url 'tagging:course_detail' uuid=course.uuid %}">
+                        {{ course.title }}
+                    </a>
+                </td>
+                <td>
+                    {% if course.vertical and course.vertical.vertical %}
+                        <a href="{% url 'tagging:vertical_detail' slug=course.vertical.vertical.slug %}">
+                            {{ course.vertical.vertical.name }}
+                        </a>
+                    {% else %}
+                        <span class="text-muted">None</span>
+                    {% endif %}
+                </td>
+                <td>
+                    {% if course.vertical and course.vertical.sub_vertical %}
+                        <a href="{% url 'tagging:sub_vertical_detail' slug=course.vertical.sub_vertical.slug %}">
+                            {{ course.vertical.sub_vertical.name }}
+                        </a>
+                    {% else %}
+                        <span class="text-muted">None</span>
+                    {% endif %}
+                </td>
+            </tr>
+        {% empty %}
+            <tr>
+                <td colspan="5" class="text-center text-muted">No courses found.</td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+<nav>
+    <ul class="pagination">
+        {% if courses.has_previous %}
+            <li class="page-item">
+                <a class="page-link" href="?page={{ courses.previous_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
+                   hx-get="?page={{ courses.previous_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
+                   hx-target="#course-table">
+                    &laquo;
+                </a>
+            </li>
+        {% endif %}
+        {% for page_num in courses.paginator.page_range %}
+            <li class="page-item {% if courses.number == page_num %}active{% endif %}">
+                <a class="page-link" href="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
+                   hx-get="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
+                   hx-target="#course-table">
+                    {{ page_num }}
+                </a>
+            </li>
+        {% endfor %}
+        {% if courses.has_next %}
+            <li class="page-item">
+                <a class="page-link" href="?page={{ courses.next_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
+                   hx-get="?page={{ courses.next_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
+                   hx-target="#course-table">
+                    &raquo;
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>

course_discovery/apps/tagging/templates/partials/message.html

@@ -0,0 +1,6 @@
+{% if success %}
+    <div class="alert alert-success">{{ success }}</div>
+{% endif %}
+{% if error %}
+    <div class="alert alert-danger">{{ error }}</div>
+{% endif %}

course_discovery/apps/tagging/templates/partials/sub_vertical_options.html

@@ -0,0 +1,4 @@
+<option value="">-- Select SubVertical --</option>
+{% for sub_vertical in sub_verticals %}
+    <option value={{ sub_vertical.slug }} >{{ sub_vertical.name }}</option>
+{% endfor %}

course_discovery/apps/tagging/templates/tagging/base.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Tagging App{% endblock %}</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+    <script src="https://unpkg.com/htmx.org"></script>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{% url 'tagging:course_list' %}">Tagging App</a>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'tagging:course_list' %}">Course List</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'tagging:vertical_list' %}">Vertical List</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'tagging:sub_vertical_list' %}">Sub-Vertical List</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main class="py-4">
+        {% block content %}
+        {% endblock %}
+    </main>
+</body>
+</html>

course_discovery/apps/tagging/templates/tagging/course_detail.html

@@ -0,0 +1,50 @@
+{% extends "tagging/base.html" %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1 class="mb-4">Course: {{ course.title }}</h1>
+    <h2>Key: {{ course.key }}</h2>
+
+    <h3>Assign or Edit Vertical and Sub-Vertical</h3>
+    <form method="post" action=""
+          hx-post=""
+          hx-target="#message-container"
+          hx-swap="innerHTML">
+        {% csrf_token %}
+
+        <div class="form-group">
+            <label for="vertical">Vertical</label>
+            <select name="vertical" id="vertical" class="form-control"
+                    hx-get="{% url 'tagging:load_sub_verticals' %}"
+                    hx-target="#sub_vertical"
+                    hx-trigger="change">
+                <option value="">-- Select Vertical --</option>
+                {% for vertical in verticals %}
+                    <option value="{{ vertical.slug }}"
+                            {% if course.vertical and course.vertical.vertical.slug == vertical.slug %}selected{% endif %}>
+                        {{ vertical.name }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label for="sub_vertical">Sub-Vertical</label>
+            <select name="sub_vertical" id="sub_vertical" class="form-control">
+                <option value="">-- Select Sub-Vertical --</option>
+                {% for sub_vertical in sub_vertical %}
+                    <option value="{{ sub_vertical.slug }}"
+                            {% if course.vertical and course.vertical.sub_vertical.slug == sub_vertical.slug %}selected{% endif %}>
+                        {{ sub_vertical.name }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <button type="submit" class="btn btn-primary">Save</button>
+    </form>
+
+    <!-- Message container for success/error -->
+    <div id="message-container" class="mt-3"></div>
+</div>
+{% endblock %}

course_discovery/apps/tagging/templates/tagging/course_list.html

@@ -0,0 +1,18 @@
+{% extends "tagging/base.html" %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1 class="mb-4">Course List</h1>
+
+    <form method="get" class="mb-4" hx-get="{% url 'tagging:course_list' %}" hx-target="#course-table" hx-trigger="keyup changed delay:500ms from:search">
+        <div class="input-group">
+            <input type="text" name="search" id="search" class="form-control" placeholder="Search courses..." value="{{ request.GET.search|default:'' }}">
+            <button class="btn btn-primary" type="submit">Search</button>
+        </div>
+    </form>
+
+    <div id="course-table">
+        {% include "partials/course_table.html" %}
+    </div>
+</div>
+{% endblock %}

course_discovery/apps/tagging/templates/tagging/sub_vertical_detail.html

@@ -0,0 +1,27 @@
+{% extends "tagging/base.html" %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1 class="mb-4">Sub-Vertical: {{ sub_vertical.name }}</h1>
+    <p>Parent Vertical:
+        <a href="{% url 'tagging:vertical_detail' slug=sub_vertical.vertical.slug %}">
+            {{ sub_vertical.vertical.name }}
+        </a>
+    </p>
+    <h2>Tagged Courses</h2>
+
+    {% if courses %}
+        <ul class="list-group">
+            {% for course in courses %}
+                <li class="list-group-item">
+                    <a href="{% url 'tagging:course_detail' uuid=course.uuid %}">
+                        {{ course.title }}
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <p class="text-muted">No courses assigned to this sub-vertical.</p>
+    {% endif %}
+</div>
+{% endblock %}

course_discovery/apps/tagging/templates/tagging/sub_vertical_list.html

@@ -0,0 +1,44 @@
+{% extends "tagging/base.html" %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1>Sub-Vertical List</h1>
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <th>
+                    <a href="?sort=name&direction={% if current_sort == 'name' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
+                        Sub-Vertical
+                        {% if current_sort == 'name' %}
+                            <span>{% if current_direction == 'asc' %}▲{% else %}▼{% endif %}</span>
+                        {% endif %}
+                    </a>
+                </th>
+                <th>Parent Vertical</th>
+                <th>Assigned Courses</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for sub_vertical in sub_verticals %}
+                <tr>
+                    <td>
+                        <a href="{% url 'tagging:sub_vertical_detail' slug=sub_vertical.slug %}">
+                            {{ sub_vertical.name }}
+                        </a>
+                    </td>
+                    <td>
+                        <a href="{% url 'tagging:vertical_detail' slug=sub_vertical.vertical.slug %}">
+                            {{ sub_vertical.vertical.name }}
+                        </a>
+                    </td>
+                    <td>
+                        {% with sub_vertical.coursevertical_sub_verticals.count as course_count %}
+                            {{ course_count }} course{% if course_count != 1 %}s{% endif %}
+                        {% endwith %}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}

course_discovery/apps/tagging/templates/tagging/vertical_detail.html

@@ -0,0 +1,32 @@
+{% extends "tagging/base.html" %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1 class="mb-4">Vertical: {{ vertical.name }}</h1>
+    <h2>Sub-Verticals</h2>
+    <ul class="list-group mb-4">
+        {% for sub_vertical in vertical.sub_verticals.all %}
+            <li class="list-group-item">
+                <a href="{% url 'tagging:sub_vertical_detail' slug=sub_vertical.slug %}">
+                    {{ sub_vertical.name }}
+                </a>
+            </li>
+        {% empty %}
+            <li class="list-group-item text-muted">No sub-verticals assigned.</li>
+        {% endfor %}
+    </ul>
+
+    <h2>Tagged Courses</h2>
+    <ul class="list-group">
+        {% for course in courses %}
+            <li class="list-group-item">
+                <a href="{% url 'tagging:course_detail' uuid=course.uuid %}">
+                    {{ course.title }}
+                </a>
+            </li>
+        {% empty %}
+            <li class="list-group-item text-muted">No courses assigned to this vertical.</li>
+        {% endfor %}
+    </ul>
+</div>
+{% endblock %}

course_discovery/apps/tagging/templates/tagging/vertical_list.html

@@ -0,0 +1,38 @@
+{% extends "tagging/base.html" %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1>Verticals List</h1>
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <th>
+                    <a href="?sort=name&direction={% if current_sort == 'name' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
+                        Vertical Name
+                        {% if current_sort == 'name' %}
+                            <span>{% if current_direction == 'asc' %}▲{% else %}▼{% endif %}</span>
+                        {% endif %}
+                    </a>
+                </th>
+                <th>Assigned Courses</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for vertical in verticals %}
+                <tr>
+                    <td>
+                        <a href="{% url 'tagging:vertical_detail' slug=vertical.slug %}">
+                            {{ vertical.name }}
+                        </a>
+                    </td>
+                    <td>
+                        {% with vertical.coursevertical_verticals.count as course_count %}
+                            {{ course_count }} course{% if course_count != 1 %}s{% endif %}
+                        {% endwith %}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}