{{define "document-packinglist-view"}}
<div class="box">
    <div class="columns">
        <div class="column">
            <h1 class="title">
                Packing List: {{.Document.CmcReference}}
            </h1>
            <p class="subtitle">
                Created {{.Document.Created.Format "2 January 2006"}}
            </p>
        </div>
        <div class="column is-narrow">
            <div class="buttons">
                <button class="button is-primary" onclick="generatePDF()">
                    <span class="icon">
                        <i class="fas fa-file-pdf"></i>
                    </span>
                    <span>Generate PDF</span>
                </button>
                <button class="button is-info" onclick="emailDocument()">
                    <span class="icon">
                        <i class="fas fa-envelope"></i>
                    </span>
                    <span>Email Packing List</span>
                </button>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="columns">
            <div class="column is-half">
                <table class="table is-fullwidth">
                    <tbody>
                        <tr>
                            <th>Packing List Number:</th>
                            <td>{{.Document.CmcReference}}</td>
                        </tr>
                        <tr>
                            <th>Created By:</th>
                            <td>
                                {{if and .Document.UserFirstName.Valid .Document.UserLastName.Valid}}
                                    {{.Document.UserFirstName.String}} {{.Document.UserLastName.String}}
                                {{else if .Document.UserUsername.Valid}}
                                    {{.Document.UserUsername.String}}
                                {{else}}
                                    User #{{.Document.UserID}}
                                {{end}}
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td><span class="tag is-info">Packing List</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Packing List Details -->
    <div class="box has-background-light">
        <h3 class="title is-5">Packing List Details</h3>
        <form>
            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Currency</label>
                        <div class="control">
                            <div class="select">
                                <select name="currency">
                                    <option>AUD</option>
                                    <option>USD</option>
                                    <option>EUR</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Issue Date</label>
                        <div class="control">
                            <input class="input" type="date" name="issue_date" value="{{.Document.Created.Format "2006-01-02"}}">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Due Date</label>
                        <div class="control">
                            <input class="input" type="date" name="due_date">
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">FOB</label>
                        <div class="control">
                            <input class="input" type="text" name="fob" placeholder="FOB terms">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Payment Terms</label>
                        <div class="control">
                            <input class="input" type="text" name="payment_terms" readonly placeholder="From customer">
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label">Shipping Details</label>
                <div class="control">
                    <textarea class="textarea" name="shipping_details" rows="3">{{.Document.ShippingDetails.String}}</textarea>
                </div>
            </div>

            <div class="field">
                <div class="control">
                    <button type="submit" class="button is-primary">Save Packing List Details</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{end}}