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

<div id="input-form-wrap">
    <h2>Create New Product</h2>
    <form class="input-form" method="POST" enctype="multipart/form-data">
        <div class="input-form-row">
            <input type="text" id="name" name="name" placeholder="Product Name" required>
            <input type="file" id="image" name="image" accept="image/x" required>
        </div>

        <div class="input-form-row">
            <textarea id="description" name="description" placeholder="Product Description" required></textarea>
        </div>

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

        <div class="input-form-row">
            <input type="number" id="cost" name="cost" placeholder="Cost" min=0 step=0.01 required>
            <input type="number" id="quantity" name="quantity" placeholder="Quantity Available" min=0 required>
        </div>

        <div class="input-form-row">
            <input type="submit" id="Create Product" value="Create Product">
        </div>
    </form>
    
    <div id="create-account-wrap">
        <p>Want to view all of your products? <a href="">Click Here</a><p>
    </div>
</div>