<h3 class="account-heading">{{lang 'account.returns.heading' }}</h3>

<ul class="account-list">
    {{#each returns}}
    <li class="account-listItem">
        <div class="account-product">
            <div class="account-product-figure">
                {{> components/common/responsive-img
                    image=product.image
                    fallback_size=../theme_settings.productthumb_size
                    lazyload=../theme_settings.lazyload_mode
                }}
            </div>
            <div class="account-product-body">
                <div class="account-orderStatus">
                    {{#if status '===' 'ReturnStatusPending'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.pending'}}</h6>
                    {{else if status '===' 'ReturnStatusReceived'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.received'}}</h6>
                    {{else if status '===' 'ReturnStatusAuthorized'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.authorized'}}</h6>
                    {{else if status '===' 'ReturnStatusRepaired'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.repaired'}}</h6>
                    {{else if status '===' 'ReturnStatusRefunded'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.refunded'}}</h6>
                    {{else if status '===' 'ReturnStatusRejected'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.rejected'}}</h6>
                    {{else if status '===' 'ReturnStatusCancelled'}}
                        <h6 class="account-orderStatus-label">{{lang 'account.returns.status.cancelled'}}</h6>
                    {{/if}}
                </div>

                <h5 class="account-product-title">{{lang 'account.returns.list.return_number' id=id}}</h5>
                <p class="account-product-description">{{lang 'account.returns.list.product_details' num_products=quantity}} <a href="{{product.url}}">{{product.name}}</a></p>

                {{#if product.options}}
                    <dl class="definitionList">
                        {{#each product.options}}
                            <dt class="definitionList-key">{{name}}:</dt>
                            <dd class="definitionList-value">{{> components/common/product-options}}</dd>
                        {{/each}}
                    </dl>
                {{/if}}

                <div class="account-product-details">
                    <div class="account-product-detail">
                        <h6 class="account-product-detail-heading">{{lang 'account.returns.date_requested' }}</h6>
                        <span>{{date_requested}}</span>
                    </div>
                    <div class="account-product-detail">
                        <h6 class="account-product-detail-heading">{{lang 'account.returns.action' }}</h6>
                        <span>{{action}}</span>
                    </div>
                    <div class="account-product-detail account-product-detail--large">
                        <h6 class="account-product-detail-heading">{{lang 'account.returns.reason' }}</h6>
                        <span>{{reason}}</span>
                    </div>
                    {{#if comments}}
                    <div class="account-product-detail account-product-detail--full">
                        <h6 class="account-product-detail-heading">{{lang 'account.returns.comments' }}</h6>
                        <span>{{comments}}</span>
                    </div>
                    {{/if}}
                </div>
            </div>
        </div>
    </li>
    {{/each}}
</ul>
