{{define "title"}}{{.Customer.Name}} - CMC Sales{{end}}

{{define "content"}}
<nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/customers">Customers</a></li>
        <li class="is-active"><a href="#" aria-current="page">{{.Customer.Name}}</a></li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">{{.Customer.Name}}</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="/customers/{{.Customer.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">Customer Information</h2>
            
            <table class="table is-fullwidth">
                <tbody>
                    <tr>
                        <th>Company Name:</th>
                        <td>{{.Customer.Name}}</td>
                    </tr>
                    <tr>
                        <th>Trading Name:</th>
                        <td>{{if .Customer.TradingName}}{{.Customer.TradingName}}{{else}}<span class="has-text-grey">Not specified</span>{{end}}</td>
                    </tr>
                    <tr>
                        <th>ABN:</th>
                        <td>{{if .Customer.Abn.Valid}}{{.Customer.Abn.String}}{{else}}<span class="has-text-grey">Not specified</span>{{end}}</td>
                    </tr>
                    <tr>
                        <th>Payment Terms:</th>
                        <td>{{.Customer.PaymentTerms}}</td>
                    </tr>
                    <tr>
                        <th>Website:</th>
                        <td>
                            {{if .Customer.Url}}
                                <a href="{{.Customer.Url}}" target="_blank">{{.Customer.Url}}</a>
                            {{else}}
                                <span class="has-text-grey">Not specified</span>
                            {{end}}
                        </td>
                    </tr>
                    <tr>
                        <th>Created:</th>
                        <td>{{.Customer.Created}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        {{if .Customer.Notes}}
        <div class="box">
            <h2 class="subtitle">Notes</h2>
            <div class="content">
                <p>{{.Customer.Notes}}</p>
            </div>
        </div>
        {{end}}
        
        {{if .Customer.DiscountPricingPolicies}}
        <div class="box">
            <h2 class="subtitle">Discount Pricing Policies</h2>
            <div class="content">
                <p>{{.Customer.DiscountPricingPolicies}}</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?customer_id={{.Customer.ID}}" class="button is-primary is-fullwidth">
                    <span class="icon">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </span>
                    <span>Create Quote</span>
                </a>
                <a href="/invoices/new?customer_id={{.Customer.ID}}" class="button is-info is-fullwidth">
                    <span class="icon">
                        <i class="fas fa-file-invoice"></i>
                    </span>
                    <span>Create Invoice</span>
                </a>
            </div>
        </div>
        
        <div class="box">
            <h2 class="subtitle">Recent Activity</h2>
            <div id="customer-activity" hx-get="/api/customers/{{.Customer.ID}}/activity" 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}}