---
cover: /asset/index/cover.webp
pagination:
  data: collections.photosTags
  size: 1
  alias: tag
  addAllPagesToCollections: true
layout: main/base.html
permalink: /photos/tag/{{tag | slugify }}/index.html
eleventyComputed:
  title: "{{ tag }}"
---
<div class="sm:container m-0 p-0 sm:mx-auto sm:p-4 md:p-10">
	<div class="the-card">
		<!-- cover -->
	  <figure>
	    <img src="{{ cover }}" alt="cover" />
	  </figure>
		<!-- navbar -->
		<div class="sticky flex flex-row top-0 z-50 navbar bg-base-100 border-b border-base-200">
			<!-- back home -->
			<a aria-label="home" href="/" class="btn btn-ghost btn-circle">
				<svg
				  xmlns="http://www.w3.org/2000/svg"
				  class="h-5 w-5"
				  fill="none"
				  viewBox="0 0 24 24"
				  stroke="currentColor">
				  <path
				    stroke-linecap="round"
				    stroke-linejoin="round"
				    stroke-width="2"
				    d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
				  <polyline
				    stroke-linecap="round"
				    stroke-linejoin="round"
				    stroke-width="2"
				    points="9 22 9 12 15 12 15 22" />
				</svg>
			</a>
			<!-- simple search -->
			<div class="flex-grow">
				{% include "search/search.html" %}
			</div>
			<!-- back to posts -->
			<a aria-label="back" href="/photos" class="btn btn-ghost btn-circle">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 3h7v7H3V3zM14 3h7v7h-7V3zM3 14h7v7H3v-7zM14 14h7v7h-7v-7z" />
				</svg>
			</a>
			<!-- categories -->
			<div class="dropdown dropdown-end">
				<div aria-label="categories" tabindex="0" role="button" class="btn btn-ghost btn-circle">
					<svg
					  xmlns="http://www.w3.org/2000/svg"
					  class="h-5 w-5"
					  fill="none"
					  viewBox="0 0 24 24"
					  stroke="currentColor">
					  <line
					    stroke-linecap="round"
					    stroke-linejoin="round"
					    stroke-width="2"
					    x1="8"
					    y1="6"
					    x2="21"
					    y2="6" />
					  <line
					    stroke-linecap="round"
					    stroke-linejoin="round"
					    stroke-width="2"
					    x1="8"
					    y1="12"
					    x2="21"
					    y2="12" />
					  <line
					    stroke-linecap="round"
					    stroke-linejoin="round"
					    stroke-width="2"
					    x1="8"
					    y1="18"
					    x2="21"
					    y2="18" />
					  <line
					    stroke-linecap="round"
					    stroke-linejoin="round"
					    stroke-width="2"
					    x1="3"
					    y1="6"
					    x2="3.01"
					    y2="6" />
					  <line
					    stroke-linecap="round"
					    stroke-linejoin="round"
					    stroke-width="2"
					    x1="3"
					    y1="12"
					    x2="3.01"
					    y2="12" />
					  <line
					    stroke-linecap="round"
					    stroke-linejoin="round"
					    stroke-width="2"
					    x1="3"
					    y1="18"
					    x2="3.01"
					    y2="18" />
					</svg>
				</div>
				<ul
					tabindex="0"
					class="menu menu-md dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl">
					{% for tag in collections.photosTags %}	
					<li><a href="/photos/tag/{{ tag | slugify }}">{{ tag }}</a></li>
					{% endfor %}
				</ul>
			</div>
		</div>
		<!-- content -->
		<div class="flex-grow">
			<div id="results-list" class="grid grid-cols-3 gap-0.5">
				<p id="no-results" class="p-8 col-span-3 text-center text-gray-500 hidden">Did not found any</p>
				{% for photos in collections[tag] reversed %}
				<!-- link to post -->
				<a href="{{ photos.url }}" class="result-item cursor-pointer">
					<!-- thumbnail -->
			  	<div class="bg-white overflow-hidden">
						<img src="{{ photos.data.thumbnail}}" alt="Image" class="aspect-square w-full h-full object-cover">
			  	</div>
					<!-- item hidden for filter by text search -->
					<div class="text-hidden">
						<p class="text-md sm:text-lg font-bold mb-2 text-primary">
							{{ photos.data.title }}
						</p>
						<p class="text-sm sm:text-md mb-2">{{ photos.data.description | limitWords: 30 }}</p>
						<p class="text-sm">{{ photos.data.date | date: "%a, %d %b %Y" }}</p>
					</div>
				</a>
				{% endfor %}
			</div>
		</div>
		<!-- Footer credit -->
	  <div class="text-center py-4 border-t border-base-200">
      {% include "footer/footer-credit.html" %}
	  </div>
	</div>
</div>