{% extends "base.html" %}
{% load static %}

{% block sidenav %}
   {% for item in item_list %}
      <li>
        <a href="{{ item.link }}">{{ item.item }}</a>
      </li>
   {% endfor %}
{% endblock sidenav %}

{% block content %}
   <h1>Search Books</h1>

   <form method="get" action="{% url 'search' %}" style="margin-bottom: 20px;">
      <input type="text" name="q" value="{{ query }}" placeholder="Search by book name..." style="padding: 6px; width: 300px;">
      <button type="submit" style="padding: 6px 12px;">Search</button>
   </form>

   {% if searched %}
      {% if books %}
         <h2>Results for "{{ query }}"</h2>
         <p>{{ books|length }} book{{ books|length|pluralize }} found</p>
         <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            {% for book in books %}
               <div style="border: 1px solid #ccc; padding: 10px; width: 220px;">
                  <a href="{% url 'book_detail' book.id %}">
                     <img src="{% static book.pic_path %}" alt="{{ book.name }}" style="max-width: 200px; max-height: 200px;">
                     <h3>{{ book.name }}</h3>
                  </a>
                  <p>Price: ${{ book.price }}</p>
                  <p>Posted by: {{ book.username }}</p>
               </div>
            {% endfor %}
         </div>

      {% elif related %}
         <h2>No exact matches for "{{ query }}"</h2>
         <p>Here are some related books you might like:</p>
         <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            {% for book in related %}
               <div style="border: 1px solid #ccc; padding: 10px; width: 220px;">
                  <a href="{% url 'book_detail' book.id %}">
                     <img src="{% static book.pic_path %}" alt="{{ book.name }}" style="max-width: 200px; max-height: 200px;">
                     <h3>{{ book.name }}</h3>
                  </a>
                  <p>Price: ${{ book.price }}</p>
                  <p>Posted by: {{ book.username }}</p>
               </div>
            {% endfor %}
         </div>

      {% else %}
         <h2>No books found</h2>
         <p>There are no books in the system yet. Try posting one!</p>
      {% endif %}
   {% else %}
      <p>Enter a search term above to find books.</p>
   {% endif %}
{% endblock content %}