{{define "title"}}{{if .Product.ID}}Edit{{else}}New{{end}} Product - CMC Sales{{end}}

{{define "content"}}
<div class="columns is-centered">
    <div class="column is-8">
        <h1 class="title">{{if .Product.ID}}Edit{{else}}New{{end}} Product</h1>
        
        <form {{if .Product.ID}}
                hx-put="/products/{{.Product.ID}}"
              {{else}}
                hx-post="/products"
              {{end}}
              hx-target="#form-response">
            
            <div class="field">
                <label class="label">Title</label>
                <div class="control">
                    <input class="input" type="text" name="title" 
                           placeholder="Product Title" 
                           value="{{.Product.Title}}" required>
                </div>
                <p class="help">This must match the Title in the Excel Costing File</p>
            </div>
            
            <div class="field">
                <label class="label">Item Code</label>
                <div class="control">
                    <input class="input" type="text" name="item_code" 
                           placeholder="Item Code" 
                           value="{{.Product.ItemCode}}" required>
                </div>
            </div>
            
            <div class="field">
                <label class="label">Item Description</label>
                <div class="control">
                    <input class="input" type="text" name="item_description" 
                           placeholder="Item Description" 
                           value="{{.Product.ItemDescription}}" required>
                </div>
            </div>
            
            <div class="field">
                <label class="label">Model Number</label>
                <div class="control">
                    <input class="input" type="text" name="model_number" 
                           placeholder="Model Number" 
                           value="{{if .Product.ModelNumber.Valid}}{{.Product.ModelNumber.String}}{{end}}">
                </div>
            </div>
            
            <div class="field">
                <label class="label">Model Number Format</label>
                <div class="control">
                    <input class="input" type="text" name="model_number_format" 
                           placeholder="%1% - first item, %2% - second item etc" 
                           value="{{if .Product.ModelNumberFormat.Valid}}{{.Product.ModelNumberFormat.String}}{{end}}">
                </div>
            </div>
            
            <div class="field">
                <label class="label">Stock Type</label>
                <div class="control">
                    <div class="select is-fullwidth">
                        <select name="stock">
                            <option value="1" {{if .Product.Stock}}selected{{end}}>Stock</option>
                            <option value="0" {{if not .Product.Stock}}selected{{end}}>Indent</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="field">
                <label class="label">Category</label>
                <div class="control">
                    <div class="select is-fullwidth">
                        <select name="product_category_id">
                            <option value="1" {{if eq .Product.ProductCategoryID 1}}selected{{end}}>Category 1</option>
                            <option value="2" {{if eq .Product.ProductCategoryID 2}}selected{{end}}>Category 2</option>
                            <option value="3" {{if eq .Product.ProductCategoryID 3}}selected{{end}}>Category 3</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="field">
                <label class="label">Principle</label>
                <div class="control">
                    <div class="select is-fullwidth">
                        <select name="principle_id">
                            <option value="1" {{if eq .Product.PrincipleID 1}}selected{{end}}>Principle 1</option>
                            <option value="2" {{if eq .Product.PrincipleID 2}}selected{{end}}>Principle 2</option>
                            <option value="3" {{if eq .Product.PrincipleID 3}}selected{{end}}>Principle 3</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="field">
                <label class="label">Description</label>
                <div class="control">
                    <textarea class="textarea" name="description" 
                              placeholder="Product description...">{{.Product.Description}}</textarea>
                </div>
            </div>
            
            <div class="field">
                <label class="label">Notes</label>
                <div class="control">
                    <textarea class="textarea" name="notes" 
                              placeholder="Product notes...">{{if .Product.Notes.Valid}}{{.Product.Notes.String}}{{end}}</textarea>
                </div>
                <p class="help">Notes displayed on quotes</p>
            </div>
            
            <div id="form-response"></div>
            
            <div class="field is-grouped">
                <div class="control">
                    <button class="button is-primary" type="submit">
                        <span class="icon">
                            <i class="fas fa-save"></i>
                        </span>
                        <span>Save</span>
                    </button>
                </div>
                <div class="control">
                    <a href="/products" class="button is-light">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>
{{end}}