{% extends 'base.html' %}
{% load static humanize %}
{% block robots %}noindex, follow{% endblock %}
{% block title %}Search | {{ site.site_name }}{% endblock %}

{% block content %}
<div class="search-page" style="max-width: 900px; margin: 0 auto; padding: 140px 1.5rem 3rem;">
    <h1 style="text-align: center; font-family: var(--ff-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;">Search the Archives</h1>
    <div class="ornament"></div>
    
    <form action="{% url 'search' %}" method="get" class="search-form" style="text-align: center; margin-bottom: 3rem;">
        <input type="text" name="q" value="{{ query }}" placeholder="Search articles, products, keywords..." style="width: 70%; padding: 0.8rem; font-size: 1.1rem; border: 1px solid var(--border); background: var(--dark2); color: var(--text); font-family: var(--ff-body); border-radius: 4px;">
        <button type="submit" style="padding: 0.8rem 1.5rem; font-size: 1.1rem; border: none; background: var(--gold); color: var(--bg); font-family: var(--ff-label); cursor: pointer; border-radius: 4px; letter-spacing: 1px;">Search</button>
    </form>
    
    {% if query %}
        <h3 style="font-family: var(--ff-label); text-align: center; margin-bottom: 2rem; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);">Results for "{{ query }}"</h3>
        
        <!-- Product Results -->
        {% if products %}
        <div style="margin-bottom: 4rem;">
            <h4 style="font-family: var(--ff-label); font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color:var(--gold-ink); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gold30);">🛒 Wearable History</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem;">
                {% for product in products %}
                <a href="{% url 'product_detail' product.slug %}" style="text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--dark2); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.15)'; this.style.borderColor='var(--gold)';" onmouseout="this.style.transform=''; this.style.boxShadow=''; this.style.borderColor='var(--border)';">
                    {% if product.image %}
                    <img src="{{ product.image.url }}" alt="{{ product.title }}" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--border);">
                    {% else %}
                    <div style="width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--dark3); border-bottom: 1px solid var(--border); color: var(--text-faint);">No Image</div>
                    {% endif %}
                    <div style="padding: 1rem;">
                        <h5 style="font-family: var(--ff-heading); font-size: 1rem; margin-bottom: 0.4rem; color: var(--text);">{{ product.title }}</h5>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <span style="font-family: var(--ff-label); color:var(--gold-ink); font-size: 1rem;">৳{{ product.discount_price|default:product.price|floatformat:"0" }}</span>
                            {% if product.discount_price %}
                            <span style="text-decoration: line-through; color: var(--text-faint); font-size: 0.8rem;">৳{{ product.price|floatformat:"0" }}</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Article Results -->
        {% if results %}
        <div>
            <h4 style="font-family: var(--ff-label); font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color:var(--gold-ink); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gold30);">📰 Articles</h4>
            <div class="grid">
                {% for article in results %}
                <div style="grid-column: span 6;">
                    {% include 'partials/_article_card.html' with article=article %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if not results and not products %}
            <p style="text-align: center; font-style: italic; color: var(--text-muted); margin-top: 2rem;">No records found in our archives matching your query.</p>
        {% endif %}
    {% endif %}
</div>
{% endblock %}