{% extends 'blog/blog.html' %}
{% load static %}
{% load cache %}
{% load post_extras %}
{% load solo_tags %}

{% block title %}<title>{{tag_name|default:title}} - {% get_solo 'tbase_config.General' as site_config %}{{site_config.site_title}}</title>{% endblock %}

{% block head %}
{% if meta.noindex %}
<meta name="robots" content="noindex">
{% endif %}
{% endblock %}

{% block top_nav %}
<a href="{% url 'home' %}" class="px-4 py-2 rounded-full text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-zinc-700 hover:text-blue-600 dark:hover:text-blue-400 transition-all">
    <i class="fas fa-home mr-1"></i> Home
</a>
<span class="px-4 py-2 rounded-full text-sm font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
    <i class="fas fa-tag mr-1"></i> {{tag_name|default:"Tag"}}
</span>
{% endblock %}

{% block article_list %}
{% if object_list %}
{% for detail in object_list %}
<article class="w-full bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 my-4 overflow-hidden group">
    <a href="{% url 'post:detail_view' detail.pk %}" class="block">
        <div class="flex flex-col md:flex-row">
            {% if detail.article_img %}
            <div class="md:w-2/5 relative overflow-hidden">
                <img src="{{detail.article_img|oss_image:'mini_500'}}" 
                     alt="{{detail.product_name|default:detail.title}}" 
                     title="{{detail.title}}"
                     loading="lazy"
                     class="w-full h-48 md:h-full object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            {% endif %}
            
            <div class="{% if detail.article_img %}md:w-3/5{% else %}w-full{% endif %} p-5 flex flex-col justify-between">
                <div>
                    <div class="flex items-center gap-2 mb-2 flex-wrap">
                        {% tags detail.tags 3 detail.pk %}
                        <span class="text-xs text-gray-400 dark:text-gray-500">
                            <i class="far fa-clock mr-1"></i>{{detail.created_on|date:"M d, Y"}}
                        </span>
                    </div>
                    
                    <h2 class="text-xl font-bold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2 mb-2">
                        {{detail.title|truncatechars:60}}
                    </h2>
                    
                    <p class="text-gray-600 dark:text-gray-300 text-sm line-clamp-2 mb-3">
                        {{detail.content|markdown_excerpt:120}}
                    </p>
                </div>
                
                <div class="flex items-center justify-between mt-auto pt-3 border-t border-gray-100 dark:border-zinc-700">
                    <div class="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500">
                        <i class="fas fa-eye"></i>
                        <span>{{detail.hit_count_generic.count|default:0}} views</span>
                    </div>
                    
                    <span class="text-blue-600 dark:text-blue-400 font-medium text-sm group-hover:underline flex items-center gap-1">
                        Read More
                        <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </a>
</article>
{% endfor %}
{% else %}
<div class="w-full bg-white dark:bg-zinc-800 rounded-xl shadow-md my-4 p-8 text-center">
    <i class="fas fa-tag text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
    <p class="text-gray-500 dark:text-gray-400">No articles found for this tag.</p>
</div>
{% endif %}
{% endblock %}

{% block sidebar_section %}
<div class="w-full bg-white dark:bg-zinc-800 rounded-xl shadow-md my-4 p-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
        <i class="fas fa-clock text-blue-500"></i> Latest Updates
    </h3>
    {% last_update 5 %}
</div>

<div class="w-full bg-white dark:bg-zinc-800 rounded-xl shadow-md my-4 p-5">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
        <i class="fas fa-fire text-orange-500"></i> Popular Articles
    </h3>
    {% seo_top_links 10 %}
</div>

{% autoescape off %}
{% get_solo 'tbase_post.AmazonSettings' as amazon %}
{% if amazon.ads_sidebar %}
<div class="w-full bg-white dark:bg-zinc-800 rounded-xl shadow-md my-4 p-5">
    {{amazon.ads_sidebar}}
</div>
{% endif %}
{% endautoescape %}
{% endblock %}