<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!--
This page is intended for loading into a popup.
-->

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a class="link popup-close" href="#">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Close</span>
            </a>
        </div>
        <div class="title">Available Rates</div>
    </div>
</div>
<div style="overflow-y: auto; height: calc(99% - calc(var(--f7-navbar-height) + var(--f7-safe-area-top)));">
    <div class="row justify-content-center">
        <div class="col-100">
            <div class="list transparent no-hairlines">
                <ul>
                    {{#if rates}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner item-cell">
                                <div class="item-row" style="font-weight: 500;">
                                    <div class="item-cell">
                                        Service
                                    </div>
                                    <div class="item-cell">
                                        Delivery Estimate
                                    </div>
                                    <div class="item-cell">
                                        Price
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{#each rates}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner item-cell">
                                <div class="item-row">
                                    <div class="item-cell">
                                        {{carrier}} {{service}}
                                    </div>
                                    <div class="item-cell">
                                        {{date}}
                                    </div>
                                    <div class="item-cell">
                                        ${{rate}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/each}}
                    {{else}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner item-cell">
                                <div class="item-row">
                                    <div class="item-cell">
                                        We could find no available shipping options based on the information you provided.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/if}}
                    <li class="item-divider">From:</li>
                    {{#with from}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="white-space: normal !important;">
                                    {{street}}
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="white-space: normal !important;">
                                    {{citystatezip}}
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/with}}
                    <li class="item-divider">To:</li>
                    {{#with to}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="white-space: normal !important;">
                                    {{street}}
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="white-space: normal !important;">
                                    {{citystatezip}}
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/with}}
                    <li class="item-divider">Item:</li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="white-space: normal !important;">
                                    {{weight}}
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title" style="white-space: normal !important;">
                                    {{size}}
                                </div>
                            </div>
                        </div>
                    </li>
                    {{#if hints}}
                    <li class="item-divider">Tip{{#js_if "this.hints.length > 1"}}s{{/js_if}}:</li>
                    {{#each hints}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner item-cell">
                                <div class="item-row">
                                    <div class="item-cell">
                                        {{this}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/each}}
                    {{/if}}
                </ul>
            </div>
        </div>
    </div>
    <div class="block">
        Rates provided do not include pickup fees. This tool provides shipping cost <i>estimates</i>; actual prices, available service options, and delivery dates shown are not guaranteed to be actually available when you ship your item. Your item's contents may not be eligible for certain services.
    </div>
</div>