{% extends "base.html" %}

{% block content %}
<div class="section">
    <h2>Add Brand</h2>
    <form hx-post="/brands" hx-target="#brand-response" hx-swap="innerHTML" hx-on::after-request="this.reset()">
        <div class="form-group">
            <label for="brand-name">Brand Name:</label>
            <input type="text" id="brand-name" name="name" required placeholder="e.g., Apple, Samsung">
        </div>
        <button type="submit">Add Brand</button>
    </form>
    <div id="brand-response"></div>
    <div class="entity-list">
        <h3>Current Brands</h3>
        <div id="brands-list" hx-get="/brands/fragment" hx-trigger="load"></div>
    </div>
</div>

<div class="section">
    <h2>Add Product</h2>
    <form hx-post="/products" hx-target="#product-response" hx-swap="innerHTML" hx-on::after-request="this.reset()">
        <div class="form-group">
            <label for="product-brand">Brand Name:</label>
            <input type="text" id="product-brand" name="brand_name" required placeholder="e.g., Apple">
        </div>
        <div class="form-group">
            <label for="product-name">Product Name:</label>
            <input type="text" id="product-name" name="name" required placeholder="e.g., iPhone 15">
        </div>
        <button type="submit">Add Product</button>
    </form>
    <div id="product-response"></div>
    <div class="entity-list">
        <h3>Current Products</h3>
        <div id="products-list" hx-get="/products/fragment" hx-trigger="load"></div>
    </div>
</div>

<div class="section">
    <h2>Add Vendor</h2>
    <form hx-post="/vendors" hx-target="#vendor-response" hx-swap="innerHTML" hx-on::after-request="this.reset()">
        <div class="form-group">
            <label for="vendor-name">Vendor Name:</label>
            <input type="text" id="vendor-name" name="name" required placeholder="e.g., Amazon">
        </div>
        <div class="form-group">
            <label for="vendor-currency">Currency:</label>
            <input type="text" id="vendor-currency" name="currency" value="USD" maxlength="3" placeholder="USD">
        </div>
        <div class="form-group">
            <label for="vendor-discount-code">Discount Code (optional):</label>
            <input type="text" id="vendor-discount-code" name="discount_code" placeholder="e.g., SAVE10">
        </div>
        <div class="form-group">
            <label for="vendor-discount">Discount %:</label>
            <input type="number" id="vendor-discount" name="discount" value="0.0" step="0.01" min="0" max="100">
        </div>
        <button type="submit">Add Vendor</button>
    </form>
    <div id="vendor-response"></div>
    <div class="entity-list">
        <h3>Current Vendors</h3>
        <div id="vendors-list" hx-get="/vendors/fragment" hx-trigger="load"></div>
    </div>
</div>

<div class="section">
    <h2>Add Quote</h2>
    <form hx-post="/quotes" hx-target="#quote-response" hx-swap="innerHTML" hx-on::after-request="this.reset()">
        <div class="form-group">
            <label for="quote-vendor">Vendor Name:</label>
            <input type="text" id="quote-vendor" name="vendor_name" required placeholder="e.g., Amazon">
        </div>
        <div class="form-group">
            <label for="quote-product">Product Name:</label>
            <input type="text" id="quote-product" name="product_name" required placeholder="e.g., iPhone 15">
        </div>
        <div class="form-group">
            <label for="quote-price">Price:</label>
            <input type="number" id="quote-price" name="value" step="0.01" min="0" required placeholder="999.99">
        </div>
        <button type="submit">Add Quote</button>
    </form>
    <div id="quote-response"></div>
    <div class="entity-list">
        <h3>Current Quotes</h3>
        <div id="quotes-list" hx-get="/quotes/fragment" hx-trigger="load"></div>
    </div>
</div>
{% endblock %}