<div class="pl-pick-shipping-services-page pl-page-config">
    <div id="pl-promotional-banner" class="pl-promotional-banner pl-hidden pl-full-width">
        <span class="pl-promotional-banner-text" id="pl-promotional-banner-text"></span>
        <button class="pl-promotional-banner-button" id="pl-promotional-banner-button">
            <i class="material-icons pl-promotional-banner-icon">bolt</i>
            {$subscription.upgradeNow}
        </button>
    </div>
    <header class="pl-sub-header">
        <button id="pl-back-button" class="pl-icon-button">
            <i class="material-icons">keyboard_backspace</i>
        </button>
        <div class="pl-row-orientation pl-separate-content pl-full-width">
            <h1>{$shippingServices.pickShippingService}</h1>
            <button id="pl-open-filter-button" class="pl-icon-button">
                <i class="material-icons">filter_alt</i>
            </button>
        </div>
    </header>
    <div class="pl-flex-left pl-page-content pl-no-margin" id="pl-shipping-services-wrapper">
        <div class="pl-services-filter-wrapper">
            <div class="pl-filter">
                <div class="pl-filter-title">
                    {$shippingServices.type}
                </div>
                <div class="pl-filter-options">
                    <div class="pl-filter-option" data-filter="type" data-option="national">
                        {$shippingServices.national}
                    </div>
                    <div class="pl-filter-option" data-filter="type" data-option="international">
                        {$shippingServices.international}
                    </div>
                </div>
            </div>
            <div class="pl-filter">
                <div class="pl-filter-title">
                    {$shippingServices.deliveryType}
                </div>
                <div class="pl-filter-options">
                    <div class="pl-filter-option" data-filter="deliveryType" data-option="economic">
                        {$shippingServices.economic}
                    </div>
                    <div class="pl-filter-option" data-filter="deliveryType" data-option="express">
                        {$shippingServices.express}
                    </div>
                </div>
            </div>
            <div class="pl-filter">
                <div class="pl-filter-title">
                    {$shippingServices.parcelOrigin}
                </div>
                <div class="pl-filter-options">
                    <div class="pl-filter-option" data-filter="parcelOrigin" data-option="collection">
                        {$shippingServices.collection}
                    </div>
                    <div class="pl-filter-option" data-filter="parcelOrigin" data-option="dropoff">
                        {$shippingServices.dropoff}
                    </div>
                </div>
            </div>
            <div class="pl-filter">
                <div class="pl-filter-title">
                    {$shippingServices.parcelDestination}
                </div>
                <div class="pl-filter-options">
                    <div class="pl-filter-option" data-filter="parcelDestination" data-option="pickup">
                        {$shippingServices.pickup}
                    </div>
                    <div class="pl-filter-option" data-filter="parcelDestination" data-option="delivery">
                        {$shippingServices.delivery}
                    </div>
                </div>
            </div>
            <div class="pl-filter pl-filter-selected">
                <div class="pl-filter-options"></div>
            </div>
            <div class="pl-filter" style="margin-left: auto">
                <button id="refresh-service-list-btn" class="pl-button pl-button-primary pl-normal">
                    <div class="pl-spinner pl-hidden" id="pl-refresh-spinner">
                        <div></div>
                    </div>{$shippingServices.refreshServiceList}</button>
            </div>
        </div>
        <div id="pl-shipping-services-table" class="pl-full-width">
        </div>
        <div id="pl-shipping-services-list" class="pl-full-width">
        </div>
        <div class="pl-error" id="pl-error">
            <button id="error-message-btn" class="pl-button pl-button-danger pl-hidden">
                <span id="pl-error-message">{$shippingServices.refreshError}.</span>
                <span id="close-error" class="pl-error-close">&times;</span>
            </button>
        </div>
    </div>
</div>
