update article to post on the backend and blog on the frontend

1 files changed, 42 insertions, 0 deletions

diff --git a/clams-server/src/main/resources/templates/posts-search.html b/clams-server/src/main/resources/templates/posts-search.html
new file mode 100644
index 0000000..34a2ed5
--- /dev/null
+++ b/clams-server/src/main/resources/templates/posts-search.html
@@ -0,0 +1,42 @@
+{% extends "templates/layout.html" %}
+
+{% block content %}
+<main class="main-container">
+    <a href="/posts" class="back-link-top">&larr; back</a>
+    <header>
+        <h1>My posts</h1>
+        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching posts</p>
+
+        <form action="/posts" method="GET" class="search-form">
+            <input type="text" name="search" value="{{ search_term }}" placeholder="Search posts..." aria-label="Search posts">
+            <button type="submit" class="pill-button">Search</button>
+        </form>
+    </header>
+
+    <div class="search-results-container">
+        {% if results is empty %}
+            <div class="no-results">
+                {% if search_term is empty %}
+                    <p>Please enter a search term to search the posts. Or <a href="/posts">go back to all posts</a>.</p>
+                {% else %}
+                    <p>Found no posts matching <strong>"{{ search_term }}"</strong>. <br>
+                        <a href="/posts">Go back to all posts</a>.</p>
+                {% endif %}
+            </div>
+        {% else %}
+            <ul class="search-results-list">
+                {% for post in results %}
+                    <li class="search-result-item">
+                        <span class="post-date">{{ post.formattedDate }}</span>
+                        <a href="/posts/{{ post.slug }}">{{ post.title }}</a>
+                        {% if post.summary is not empty %}
+                            <br>
+                            <span class="search-result-summary">-- {{ post.summary }}</span>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+</main>
+{% endblock %}