WMGZON/templates/product.html

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

{% if product != None %}
    {% if user.id == product.sellerID or user.role == "Admin" %}
        <!-- Form -->
        <form class="product-fs" method="POST" action="{{ url_for('main.seller.update', id=product.id) }}" enctype="multipart/form-data">
            
            <label for="productModal">
                <img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
            </label>
            <div class="product-details">
                <div class="form-row">
                    <input type="text" id="name" name="name" placeholder="Product Name" value="{{product.name}}" required>
                </div>
                <div class="form-row">
                    <textarea id="description" name="description" placeholder="Product Description" required>{{product.description}}</textarea>
                </div>

                <div class="form-row">
                    <select name="category" id="category">
                        {% for category in categories %}
                            {% if category.id == product.category %}
                                <option value="{{category.id}}" selected>{{category.name}}</option>
                            {% else %}
                                <option value="{{category.id}}">{{category.name}}</option>
                            {% endif%}
                        {% endfor %}
                    </select>
                </div>

                <div class="form-row">
                    <input type="file" id="image" name="image" accept="image/x">
                </div>

                <div class="form-row">
                    <input type="submit" id="Create Product" value="Update Product">
                </div>

                <label for="deleteModal">
                    <div class="button error">
                        <p class="btnText">DELETE PRODUCT</p>
                        <div class="btnTwo">
                          <p class="btnText2">X</p>
                        </div>
                    </div>
                </label>
            </div>
            <div class="product-acquisition-pane">
                <div class="form-row">
                    <input type="number" id="cost" name="cost" placeholder="Cost" min=0 step=0.01 value="{{product.cost}}"required>
                </div>
                <div class="product-delivery">Earliest Delivery Friday 24th December</div>
                <div class="product-postage">+£{{product.cost}} P&P</div>
                <div class="product-stock">
                    <div class="form-row">
                        <input type="number" id="quantity" name="quantity" placeholder="Quantity Available" min=0 value="{{product.quantityAvailable}}" required>
                    </div>
                    {% if product.quantityAvailable > 0 %}
                        <div class="form-row">
                            <div class="product-instock">In Stock</div>
                            <div class="product-quantity">{{product.quantityAvailable}} Available</div>
                        </div>
                        <div class="form-row">
                            <a href="{{ url_for('main.stats.view_product_stats', id=product.id) }}">
                                <div class="button success">
                                    <p class="btnText">VIEW STATS</p>
                                    <div class="btnTwo">
                                      <p class="btnText2">!!!</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    {% else %}
                        <div class="product-nostock">Out of Stock</div>
                    {% endif %}
                </div>
            </div>
        </form>
        
        <!-- Delete Modal -->
        <input class="modal-state" id="deleteModal" type="checkbox" />
        <div class="modal">
            <label class="modal__bg" for="deleteModal"></label>
            <div class="modal__inner">
                <label class="modal__close" for="deleteModal"></label>
                <h2>Confirm Delete</h2>
                <p>Are you sure you want to <b>delete {{product.name}}</b> from your products</p>
                <form method="POST" action="{{ url_for('main.seller.delete', id=product.id) }}">
                    <div class="form-row">
                        <input type="submit" class="modal-btn error" for="deleteModal" value="Delete" />
                    </div>
                </form>
            </div>
        </div>
    {% else %}
        <div class="product-fs">
            <label for="productModal">
                <img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
            </label>
            <div class="product-details">
                <div class="product-title">{{product.name}}</div>
                <div class="product-description">{{product.description}}</div>
            </div>
            <div class="product-acquisition-pane">
                <div class="product-price">£{{product.cost}}</div>
                <div class="product-delivery">Earliest Delivery Friday 24th December</div>
                <div class="product-postage">+£{{product.cost}} P&P</div>
                <div class="product-stock">
                    {% if product.quantityAvailable > 0 %}
                        <div class="product-instock">In Stock</div>
                        <div class="product-quantity">{{product.quantityAvailable}} Available</div>
                        <input type="submit" class="product-add-to-cart" value="Add to Cart" />
                    {% else %}
                        <div class="product-nostock">Out of Stock</div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}


    
    <!-- Product Modal -->
    <input class="modal-state" id="productModal" type="checkbox" />
    <div class="modal">
        <label class="modal__bg" for="productModal"></label>
        <div class="modal__inner">
            <label class="modal__close" for="productModal"></label>
            <h2>{{product.name}}</h2>
            <img class="product-image-full" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
        </div>
    </div>
{% endif %}