{% extends 'base.html' %}
{% block title %}
{{ product.name }} - Amazon Product
{% endblock %}
{% block content %}
<a href="{{ url_for('index') }}" class="btn btn-secondary mb-3">
  &larr; Back to Search
</a>

<div class="row mb-4">
  <div class="col-md-4">
    <img src="{{ product.image }}" alt="Product Image" class="img-fluid border" />
  </div>
  <div class="col-md-8">
    <h2>{{ product.name }}</h2>
    <p><strong>Price:</strong> {{ product.discount_price }}</p>
    <p>
      <a href="{{ product.link }}" target="_blank" class="btn btn-primary">View on Amazon</a>
    </p>
  </div>
</div>
<hr>
<h3>Top 5 Recommendations</h3>
{% if recommended %}
  {% for rd in recommended %}
  <div class="row mb-3 border p-2 align-items-center">
    <div class="col-md-2">
      <img src="{{ rd.image }}" alt="Recommended" class="img-fluid border">
    </div>
    <div class="col-md-10">
      <h5 class="mb-1">{{ rd.name }}</h5>
      <p><strong>Price:</strong> {{ rd.discount_price }}</p>
      <p>
        <a href="{{ rd.link }}" class="text-decoration-underline text-primary" target="_blank">View on Amazon</a>
      </p>
    </div>
  </div>
  {% endfor %}
{% else %}
  <p>No recommendations found.</p>
{% endif %}
{% endblock %}