{{define "title"}}{{.Product.Title}} - CMC Sales{{end}}

{{define "content"}}
<nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li class="is-active"><a href="#" aria-current="page">{{.Product.Title}}</a></li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">{{.Product.Title}}</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="/products/{{.Product.ID}}/edit" class="button is-info">
                <span class="icon">
                    <i class="fas fa-edit"></i>
                </span>
                <span>Edit</span>
            </a>
        </div>
    </div>
</div>

<div class="columns">
    <div class="column is-8">
        <div class="box">
            <h2 class="subtitle">Product Information</h2>
            
            <table class="table is-fullwidth">
                <tbody>
                    <tr>
                        <th>Title:</th>
                        <td>{{.Product.Title}}</td>
                    </tr>
                    <tr>
                        <th>Item Code:</th>
                        <td><span class="tag is-info">{{.Product.ItemCode}}</span></td>
                    </tr>
                    <tr>
                        <th>Item Description:</th>
                        <td>{{.Product.ItemDescription}}</td>
                    </tr>
                    <tr>
                        <th>Model Number:</th>
                        <td>{{if .Product.ModelNumber.Valid}}{{.Product.ModelNumber.String}}{{else}}<span class="has-text-grey">Not specified</span>{{end}}</td>
                    </tr>
                    <tr>
                        <th>Stock Type:</th>
                        <td>
                            {{if .Product.Stock}}
                                <span class="tag is-success">Stock</span>
                            {{else}}
                                <span class="tag is-warning">Indent</span>
                            {{end}}
                        </td>
                    </tr>
                    <tr>
                        <th>Category:</th>
                        <td>Category {{.Product.ProductCategoryID}}</td>
                    </tr>
                    <tr>
                        <th>Principle:</th>
                        <td>Principle {{.Product.PrincipleID}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        {{if .Product.Description}}
        <div class="box">
            <h2 class="subtitle">Description</h2>
            <div class="content">
                <p>{{.Product.Description}}</p>
            </div>
        </div>
        {{end}}
        
        {{if .Product.Notes.Valid}}
        <div class="box">
            <h2 class="subtitle">Notes</h2>
            <div class="content">
                <p>{{.Product.Notes.String}}</p>
            </div>
        </div>
        {{end}}
    </div>
    
    <div class="column is-4">
        <div class="box">
            <h2 class="subtitle">Quick Actions</h2>
            <div class="buttons is-fullwidth">
                <a href="/quotes/new?product_id={{.Product.ID}}" class="button is-primary is-fullwidth">
                    <span class="icon">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </span>
                    <span>Add to Quote</span>
                </a>
                <a href="/purchase-orders/new?product_id={{.Product.ID}}" class="button is-info is-fullwidth">
                    <span class="icon">
                        <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Create PO</span>
                </a>
            </div>
        </div>
        
        <div class="box">
            <h2 class="subtitle">Product Usage</h2>
            <div id="product-usage" hx-get="/api/products/{{.Product.ID}}/usage" hx-trigger="load">
                <div class="has-text-centered">
                    <span class="icon">
                        <i class="fas fa-spinner fa-pulse"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}