{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/products.js') }}" defer></script>
{% endblock %}

{% block content %}
<div class="products-page">
  <aside class="filters-sidebar">
    <div class="filters-header">
      <h3>Filters</h3>
      {% if search_query or selected_category or selected_size or selected_color or selected_type or selected_material
      or selected_company or min_price or max_price or in_stock_only %}
      <a href="{{ url_for('main.products') }}" class="clear-filters">Clear All</a>
      {% endif %}
    </div>

    <form method="GET" action="{{ url_for('main.products') }}" class="filters-form">

      <div class="filter-group">
        <label for="search">Search</label>
        <input type="text" id="search" name="q" value="{{ search_query }}" placeholder="Search products..."
          class="filter-input">
      </div>

      <div class="filter-group">
        <label for="category">Category</label>
        <select id="category" name="category" class="filter-select">
          <option value="">All Categories</option>
          {% for c in categories %}
          <option value="{{ c.id }}" {% if selected_category==c.id|string %}selected{% endif %}>
            {{ c.name }}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label for="size">Size</label>
        <select id="size" name="size" class="filter-select">
          <option value="">All Sizes</option>
          {% for size in sizes %}
          <option value="{{ size }}" {% if selected_size==size %}selected{% endif %}>
            {{ size }}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label for="color">Color</label>
        <select id="color" name="color" class="filter-select">
          <option value="">All Colors</option>
          {% for color in colors %}
          <option value="{{ color }}" {% if selected_color==color %}selected{% endif %}>
            {{ color }}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label for="material">Material</label>
        <select id="material" name="material" class="filter-select">
          <option value="">All Materials</option>
          {% for material in materials %}
          <option value="{{ material }}" {% if selected_material==material %}selected{% endif %}>
            {{ material }}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label for="company">Brand</label>
        <select id="company" name="company" class="filter-select">
          <option value="">All Brands</option>
          {% for company in companies %}
          <option value="{{ company }}" {% if selected_company==company %}selected{% endif %}>
            {{ company }}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label>Price Range ($)</label>
        <div class="price-range">
          <input type="number" name="min_price" value="{{ min_price }}" placeholder="Min" class="price-input" min="0"
            step="0.01">
          <span class="price-separator">-</span>
          <input type="number" name="max_price" value="{{ max_price }}" placeholder="Max" class="price-input" min="0"
            step="0.01">
        </div>
      </div>

      <div class="filter-group">
        <label class="checkbox-label">
          <input type="checkbox" name="in_stock" value="1" {% if in_stock_only %}checked{% endif %}>
          In Stock Only
        </label>
      </div>

      <button type="submit" class="btn-apply-filters">Apply Filters</button>
    </form>
  </aside>

  <main class="products-main">
    <div class="products-header">
      <div class="results-info">
        <h1>Clothing</h1>
        <p class="results-count">{{ products|length }} products found</p>
        {% if search_query or selected_category or selected_size or selected_color or selected_type or selected_material
        or selected_company or min_price or max_price or in_stock_only %}
        <div class="active-filters">
          {% if search_query %}
          <span class="filter-tag">Search: "{{ search_query }}"
            <a
              href="{{ url_for('main.products', q='', category=selected_category, size=selected_size, color=selected_color, type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
          </span>
          {% endif %}
          {% if selected_category_name %}
          <span class="filter-tag">Category: {{ selected_category_name }}
            <a
              href="{{ url_for('main.products', q=search_query, category='', size=selected_size, color=selected_color, type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
          </span>
          {% endif %}
          {% if selected_size %}
          <span class="filter-tag">Size: {{ selected_size }}
            <a
              href="{{ url_for('main.products', q=search_query, category=selected_category, size='', color=selected_color, type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
          </span>
          {% endif %}
          {% if selected_color %}
          <span class="filter-tag">Color: {{ selected_color }}
            <a
              href="{{ url_for('main.products', q=search_query, category=selected_category, size=selected_size, color='', type=selected_type, material=selected_material, company=selected_company, min_price=min_price, max_price=max_price, in_stock=in_stock_only, sort=sort_by) }}">×</a>
          </span>
          {% endif %}
        </div>
        {% endif %}
      </div>
      <div class="sort-controls">
        <label for="sort">Sort by:</label>
        <select id="sort" name="sort" class="sort-select" onchange="this.form.submit()">
          <option value="newest" {% if sort_by=='newest' %}selected{% endif %}>Newest</option>
          <option value="price_low" {% if sort_by=='price_low' %}selected{% endif %}>Price: Low to High</option>
          <option value="price_high" {% if sort_by=='price_high' %}selected{% endif %}>Price: High to Low</option>
          <option value="name" {% if sort_by=='name' %}selected{% endif %}>Name: A-Z</option>
        </select>
      </div>
    </div>

    {% if products %}
    <div class="products-grid">
      {% for product in products %}
      <div class="product-card">
        <a href="{{ url_for('main.product_detail', id=product.id) }}" class="product-link">
          <div class="product-image">
            <img src="{{ product.get_image_url() }}" alt="{{ product.name }}">
            {% if product.stock <= 0 %} <div class="out-of-stock">Out of Stock
          </div>
          {% elif product.stock <= 5 %} <div class="low-stock">Only {{ product.stock }} left
      </div>
      {% endif %}
      {% if product.average_rating > 0 %}
      <div class="product-rating">
        <span class="rating-stars">★★★★★</span>
        <span class="rating-value">{{ product.average_rating }}</span>
      </div>
      {% endif %}
    </div>

    <div class="product-info">
      <h3 class="product-name">{{ product.name }}</h3>

      <div class="product-meta">
        {% if product.color %}
        <span class="meta-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          {{ product.color }}
        </span>
        {% endif %}

        {% if product.size %}
        <span class="meta-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M20 7h-9"></path>
            <path d="M14 17H5"></path>
            <circle cx="17" cy="17" r="3"></circle>
            <circle cx="7" cy="7" r="3"></circle>
          </svg>
          {{ product.size }}
        </span>
        {% endif %}

        {% if product.company %}
        <span class="meta-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
          </svg>
          {{ product.company }}
        </span>
        {% endif %}
      </div>

      <div class="product-footer">
        <div class="product-price">${{ "%.2f"|format(product.price) }}</div>

        <div class="product-actions">
          {% if current_user.is_authenticated and product.stock > 0 %}
          <a href="{{ url_for('cart.add_to_cart', product_id=product.id) }}" class="btn-add-to-cart"
            onclick="event.stopPropagation();">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="9" cy="21" r="1"></circle>
              <circle cx="20" cy="21" r="1"></circle>
              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            Add to Cart
          </a>
          {% elif current_user.is_authenticated %}
          <button class="btn-out-of-stock" disabled>
            Out of Stock
          </button>
          {% else %}
          <a href="{{ url_for('auth.login') }}" class="btn-login-to-buy" onclick="event.stopPropagation();">
            Login to Buy
          </a>
          {% endif %}
        </div>
      </div>
    </div>
    </a>
</div>
{% endfor %}
</div>
{% else %}
<div class="no-products">
  <div class="no-products-icon">👕</div>
  <h3>No products found</h3>
  <p>Try adjusting your filters or search criteria</p>
  <a href="{{ url_for('main.products') }}" class="btn-view-all">
    View All Products
  </a>
</div>
{% endif %}
</main>
</div>
{% endblock %}