From b13701f7c0acab3ea57c2b57f67b6eb5b9732687 Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Thu, 11 Jan 2024 20:00:29 +0100
Subject: [PATCH] PhotoPage: change how tags are displayed

---
 templates/PhotoPage.php | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/templates/PhotoPage.php b/templates/PhotoPage.php
index 3f34e3df..f68acf52 100644
--- a/templates/PhotoPage.php
+++ b/templates/PhotoPage.php
@@ -32,8 +32,8 @@ class PhotoPage extends Template
 		echo '
 							<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
 
-		$this->taggedPeople();
-		$this->linkNewTags();
+		$this->printTags('Album', 'Album', false);
+		$this->printTags('Tagged People', 'Person', true);
 
 		echo '
 						</div>
@@ -118,26 +118,40 @@ class PhotoPage extends Template
 				</ul>';
 	}
 
-	private function taggedPeople()
+	private function printTags($header, $tagKind, $allowLinkingNewTags)
 	{
 		echo '
-					<h3>Tags</h3>
-					<ul id="tag_list">';
+					<h3>', $header, '</h3>
+					<ul id="tag_list" class="d-flex">';
 
 		foreach ($this->photo->getTags() as $tag)
 		{
+			if ($tag->kind !== $tagKind)
+				continue;
+
 			echo '
 						<li id="tag-', $tag->id_tag, '">
-							<a rel="tag" title="View all posts tagged ', $tag->tag, '" href="', $tag->getUrl(), '" class="entry-tag">', $tag->tag, '</a>';
+							<a href="', $tag->getUrl(), '" title="View all posts tagged ', $tag->tag, '">
+								<div class="input-group">
+									<span class="input-group-text">', $tag->tag, '</span>';
 
 			if ($tag->kind === 'Person')
+			{
 				echo '
-							<a class="delete-tag" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">❌</a>';
+									<a class="btn btn-danger px-1" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">
+										<i class="bi bi-x"></i>
+									</a>';
+			}
 
 			echo '
+								</div>
+							</a>
 						</li>';
 		}
 
+		if ($allowLinkingNewTags)
+			$this->linkNewTags();
+
 		echo '
 					</ul>';
 	}
@@ -145,12 +159,9 @@ class PhotoPage extends Template
 	private function linkNewTags()
 	{
 		echo '
-				<div>
-					<h3>Link tags</h3>
-					<p style="position: relative">
-						<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
-					</p>
-				</div>
+						<li style="position: relative">
+							<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
+						</li>
 				<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
 				<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
 				<script type="text/javascript">