{% load post_extras %}
{% load solo_tags %}
{% get_solo 'tbase_post.AmazonSettings' as amazon %}

{% if page_obj %}
<section class="mt-32">
    <h3 class="font-headline text-3xl font-bold mb-12">Related Essays</h3>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
  {%for item in page_obj%}
  <article class="group bg-white dark:bg-zinc-800/50 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-outline-variant/20">
    {# Featured Image #}
    {% if item.article_img %}
    <div class="relative aspect-[16/9] overflow-hidden">
      <img src="{{ item.article_img|oss_image:'mini_200' }}" 
           alt="{{ item.title }}" 
           class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
      
      {# Amazon Product Badge #}
      {% if item.product_id and amazon.store_id %}
      <div class="absolute top-4 right-4">
        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-xs font-bold rounded-full shadow-lg">
          <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M21.71 11.29l-9-9a1 1 0 00-1.42 0l-9 9a1 1 0 001.41 1.42L12 3.42l8.29 8.29a1 1 0 001.42-1.42z"/>
          </svg>
          Amazon Deal
        </span>
      </div>
      {% endif %}
    </div>
    {% endif %}
    
    {# Content #}
    <div class="p-6 sm:p-8">
      <h4 class="font-headline text-xl sm:text-2xl font-bold text-on-surface group-hover:text-primary transition-colors line-clamp-2 mb-4">
        {{ item.title }}
      </h4>
      
      {# Meta #}
      <div class="flex flex-wrap items-center gap-4 text-sm text-on-surface-variant mb-5">
        <span class="flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          {{ item.updated_on|date:"F j, Y" }}
        </span>
        <span class="flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          {{ item.reading_time_minutes }} min read
        </span>
        {% if item.product_name %}
        <span class="flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
          </svg>
          {{ item.product_name|truncatechars:30 }}
        </span>
        {% endif %}
      </div>
      
      {# Action Buttons #}
      <div class="flex items-center gap-4 pt-5 border-t border-outline-variant/20">
        <a href="{% url 'post:detail_view' item.pk %}" 
           class="flex-1 inline-flex items-center justify-center gap-2.5 px-5 py-3 bg-primary hover:bg-primary/90 text-white font-bold rounded-xl transition-all duration-200 text-sm shadow-md hover:shadow-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
          </svg>
          Read Article
        </a>
        
        {% if item.product_id and amazon.store_id %}
        <a href="https://www.amazon.com/dp/{{ item.product_id }}/?tag={{ amazon.store_id }}" target="_blank" rel="noopener sponsored" class="inline-flex items-center justify-center gap-2.5 px-5 py-3 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-bold rounded-xl transition-all duration-200 text-sm shadow-md hover:shadow-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Check Price
        </a>
        {% endif %}
      </div>
    </div>
  </article>
  {%endfor%}
</div>
</section>
{% endif %}