Added Repository

templates/product_detail.html

@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+
+{% block styles %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/product_detail.css') }}">
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/product_detail.js') }}" defer></script>
+{% endblock %}
+
+{% block content %}
+<div class="product-detail-container">
+
+  <div class="product-detail">
+
+    <div class="product-gallery">
+
+      <div class="main-image-container">
+        <img id="mainImage" src="{{ product.get_image_url() }}" alt="{{ product.name }}" class="main-image">
+      </div>
+
+      {% if product.images|length > 0 %}
+      <div class="thumbnail-gallery">
+        {% for image in product.images|sort(attribute='display_order') %}
+        <div class="thumbnail-container {% if loop.first %}active{% endif %}"
+          data-image-url="{{ url_for('static', filename='uploads/products/' + image.filename) }}"
+          onclick="changeImage(this)">
+          <img src="{{ url_for('static', filename='uploads/products/' + image.filename) }}"
+            alt="{{ product.name }} - Image {{ loop.index }}" class="thumbnail">
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+
+    <div class="product-info">
+      <h1>{{ product.name }}</h1>
+
+      <div class="stock-status">
+        {% if product.stock > 10 %}
+        <span class="in-stock">✓ In Stock ({{ product.stock }} available)</span>
+        {% elif product.stock > 0 %}
+        <span class="low-stock">⚠ Low Stock (Only {{ product.stock }} left!)</span>
+        {% else %}
+        <span class="out-of-stock">✗ Out of Stock</span>
+        {% endif %}
+      </div>
+
+      {% if product.average_rating > 0 %}
+      <div class="product-rating">
+        <div class="stars">
+          {% for i in range(5) %}
+          <span class="star {% if i < product.average_rating|int %}filled{% endif %}">★</span>
+          {% endfor %}
+        </div>
+        <span class="rating-value">{{ product.average_rating }}/5</span>
+        <span class="review-count">({{ product.review_count }} reviews)</span>
+      </div>
+      {% endif %}
+
+      <div class="price-section">
+        <span class="price">${{ "%.2f"|format(product.price) }}</span>
+      </div>
+
+      <div class="product-meta">
+        {% if product.sku %}
+        <div class="meta-item">
+          <strong>SKU:</strong> {{ product.sku }}
+        </div>
+        {% endif %}
+
+        {% if product.company %}
+        <div class="meta-item">
+          <strong>Brand:</strong> {{ product.company }}
+        </div>
+        {% endif %}
+
+        {% if product.color %}
+        <div class="meta-item">
+          <strong>Color:</strong> {{ product.color }}
+        </div>
+        {% endif %}
+
+        {% if product.size %}
+        <div class="meta-item">
+          <strong>Size:</strong> {{ product.size }}
+        </div>
+        {% endif %}
+
+        {% if product.category %}
+        <div class="meta-item">
+          <strong>Category:</strong> {{ product.category.name }}
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="description-section">
+        <h3>Description</h3>
+        <p>{{ product.description or 'No description available.' }}</p>
+      </div>
+
+      {% if product.material or product.weight or product.dimensions %}
+      <div class="specifications">
+        <h3>Specifications</h3>
+        <div class="spec-grid">
+          {% if product.material %}
+          <div class="spec-item">
+            <span class="spec-label">Material:</span>
+            <span class="spec-value">{{ product.material }}</span>
+          </div>
+          {% endif %}
+
+          {% if product.weight %}
+          <div class="spec-item">
+            <span class="spec-label">Weight:</span>
+            <span class="spec-value">{{ product.weight }} kg</span>
+          </div>
+          {% endif %}
+
+          {% if product.dimensions %}
+          <div class="spec-item">
+            <span class="spec-label">Dimensions:</span>
+            <span class="spec-value">{{ product.dimensions }}</span>
+          </div>
+          {% endif %}
+        </div>
+      </div>
+      {% endif %}
+
+      <div class="actions-section">
+        {% if current_user.is_authenticated and product.stock > 0 %}
+        <a href="{{ url_for('cart.add_to_cart', product_id=product.id) }}" class="btn btn-primary">
+          <svg width="20" height="20" 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 btn-secondary" disabled>
+          Out of Stock
+        </button>
+        {% else %}
+        <a href="{{ url_for('auth.login') }}" class="btn btn-primary">
+          Login to Purchase
+        </a>
+        {% endif %}
+
+        <a href="{{ url_for('main.products') }}" class="btn btn-outline">
+          ← Back to Products
+        </a>
+      </div>
+    </div>
+  </div>
+
+  {% if related_products %}
+  <div class="related-products">
+    <h2>Related Products</h2>
+    <div class="related-grid">
+      {% for related in related_products %}
+      <div class="product-card">
+        <a href="{{ url_for('main.product_detail', id=related.id) }}" class="product-link">
+          <div class="product-image">
+            <img src="{{ related.get_image_url() }}" alt="{{ related.name }}">
+          </div>
+          <div class="product-info">
+            <h3 class="product-name">{{ related.name }}</h3>
+            <div class="product-price">${{ "%.2f"|format(related.price) }}</div>
+          </div>
+        </a>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}