---
cover: /asset/index/cover.webp
pagination:
  data: collections.blogTags
  size: 1
  alias: tag
  addAllPagesToCollections: true
layout: main/base.html
permalink: /blog/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-row top-0 z-50 navbar bg-base-100 px-4 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>
			<div class="flex-grow">
				<!-- Simple search -->
				{% include "search/search.html" %}
			</div>
			<!-- back to posts -->
			<a href="/blog" aria-label="back" 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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
				</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 border border-base-200">
					{% for tag in collections.blogTags %}
					<li><a href="/blog/tag/{{ tag | slugify }}">{{ tag }}</a></li>
					{% endfor %}
				</ul>
			</div>
		</div>
		<!-- content -->
		<div class="card-body">
			<div class="flex-grow">
				<div class="w-full">
					<ul id="results-list" class="grup flex flex-col gap-4">
						<p id="no-results" class="col-span-3 text-center text-gray-500 hidden">Did not found any</p>
						{% for post in collections[tag] reversed %}
						<li class="result-item cursor-pointer">
							<p class="text-md sm:text-lg font-bold mb-2 text-primary">
								<a class="link link-hover" href="{{ post.url }}">{{ post.data.title }}</a>
							</p>
							<p class="text-sm sm:text-md mb-2">{{ post.data.description | limitWords: 30 }}</p>
							<p class="text-sm">{{ post.data.date | date: "%a, %d %b %Y" }}</p>
						</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
		<!-- Footer credit -->
	  <div class="text-center py-4 border-t border-base-200">
      {% include "footer/footer-credit.html" %}
	  </div>
	</div>
</div>