{% extends "base.html" %}

{% block content %}
<h2 style="text-align: center; color: #333;">Product Browser</h2>
<br>
<p style="text-align: center; color: #444; font-size: 18px; margin-top: 30px; line-height: 1.6;">
    Our products are designed to protect your business from evolving digital threats,
    ensuring the safety of your data and the integrity of your operations.
    From advanced threat detection systems to secure web application frameworks,
    we provide the tools you need to stay ahead in an ever-changing cyber landscape.
</p>
<br>
<p style="text-align: center; color: #444; font-size: 24px; margin-top: 30px; line-height: 1.6;">
    Trust CyberCorp to safeguard your future.
</p>
<form method="POST" style="text-align: center; margin-bottom: 20px;">
    <input
        type="text"
        name="search"
        placeholder="Search for products by name, category, or description..."
        style="width: 50%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;">
    <input
        type="submit"
        value="Search"
        style="padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">
</form>

{% if results %}
    <h3 style="text-align: center; color: #555;">Search Results:</h3>
    <table style="width: 80%; margin: 0 auto; border-collapse: collapse; font-size: 16px; text-align: left;">
        <thead>
            <tr style="background-color: #007BFF; color: white;">
                <th style="padding: 10px; border: 1px solid #ddd;">Product ID</th>
                <th style="padding: 10px; border: 1px solid #ddd;">Product name</th>
                <th style="padding: 10px; border: 1px solid #ddd;">Product description</th>
            </tr>
        </thead>
        <tbody>
            {% for row in results %}
            <tr style="background-color: {% if loop.index0 % 2 == 0 %}#f9f9f9{% else %}#fff{% endif %};">
                <td style="padding: 10px; border: 1px solid #ddd;">{{ row[0] }}</td>
                <td style="padding: 10px; border: 1px solid #ddd;">{{ row[1] }}</td>
                <td style="padding: 10px; border: 1px solid #ddd;">{{ row[2] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% else %}
    <p style="text-align: center; color: #888; font-size: 18px; margin-top: 20px;">No products found. Try a different search term.</p>
{% endif %}
{% endblock %}