{{#unless customer.addresses}}
    {{> components/common/alert/alert-info (lang 'account.addresses.no_addresses')}}
{{/unless}}

<ul class="addressList">
    {{#each customer.addresses}}
        <li class="address">
            <div class="panel panel--address">
                <div class="panel-body">
                    <h5 class="address-title">{{first_name}} {{last_name}}</h5>
                    <ul class="address-details address-details--postal">
                        <li>{{company}}</li>
                        <li>{{address1}}</li>
                        <li>{{address2}}</li>
                        <li>{{city}}{{#if state}}, {{state}}{{/if}} {{zip}}</li>
                        <li>{{country}}</li>
                    </ul>
                    {{#if phone}}
                        <dl class="address-details">
                            <dt class="address-label">{{lang 'account.addresses.phone' }}</dt>
                            <dd class="address-description">{{phone}}</dd>
                        </dl>
                    {{/if}}
                    <form action="{{delete_url}}" method="post" data-delete-address="{{lang 'forms.address.confirm_delete'}}">
                        <div class="form-actions">
                            <a class="button button--primary button--small" href="{{edit_url}}">{{lang 'common.edit' }}</a>
                            <button type="submit" class="button secondary button--small">{{lang 'common.delete' }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </li>
    {{/each}}

</ul>
<div class="add-new-address_action">
    <a class="button" href="{{urls.account.add_address}}">{{lang 'account.addresses.new_address' }}</a>
</div>
<script>
    jQuery(document).ready(function($){
        $('body').addClass('addresses-page-template')
    })
</script>