{extends file="layout.tpl"}

{block name="breadcrumb"}
    <nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
        <strong id="breadcrumb-label">{intl l="You are here"}: </strong>
        <ul class="breadcrumb" itemprop="breadcrumb">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="index.php" itemprop="url"><span itemprop="title">{intl l="Home"}</span></a></li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">{intl l="Account"}</span></li>
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}

{block name="main-content"}
    <div class="main">

        <article class="col-main" role="main" aria-labelledby="main-label">

            <h1 id="main-label" class="page-header">{intl l="My Account"}</h1>

            <div id="account" class="panel-group">
                <div class="panel account-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#account" href="#account-info">
                                {intl l="Personal Informations"}
                            </a>
                        </h4>
                    </div>
                    <div id="account-info" class="panel-collapse collapse in">
                        {loop type="customer" name="customer.info"}
                        <div class="panel-body">
                            <p class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$FIRSTNAME} {$LASTNAME}</p>
                            {loop type="address" name="address.default" default="true"}
                            <ul class="list-info">
                                <li>
                                    <address class="adr">
                                        <span class="street-address">{$ADDRESS1}</span><br>
                                        {if $ADDRESS2 != ""}
                                            <span class="street-address">{$ADDRESS2}</span><br>
                                        {/if}
                                        {if $ADDRESS3 != ""}
                                            <span class="street-address">{$ADDRESS3}</span><br>
                                        {/if}
                                        <span class="postal-code">{$ZIPCODE}</span>
                                        <span class="locality">{$CITY}, <span class="country-name">{loop type="country" name="customer.country.info" id=$COUNTRY}{$TITLE}{/loop}</span></span>
                                    </address>
                                </li>
                                <li>
                                    {if $CELLPHONE != ""}
                                        <span class="tel">{$CELLPHONE}</span>
                                    {/if}
                                    {if $PHONE != ""}
                                        <span class="tel">{$PHONE}</span>
                                    {/if}
                                    <span class="email"><a href="mailto:{$EMAIL}">{$EMAIL}</a></span>
                                </li>
                                <li class="group-btn">
                                    <a href="#" class="btn btn-change-account"><i class="icon-pencil"></i> Change my account informations</a>
                                    <a href="#" class="btn btn-change-password"><i class="icon-lock"></i> Change my password</a>
                                </li>
                            </ul>
                            {/loop}
                        </div>
                        {/loop}
                    </div>
                </div>
                <div class="panel account-address">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#account" href="#account-address">
                                {intl l="My Address book"}
                            </a>
                        </h4>
                    </div>
                    <div id="account-address" class="panel-collapse collapse">
                        <div class="panel-body">
                            <a href="address.php" class="btn btn-add-address">{intl l="Add a new address"}</a>
                            <table class="table table-address" role="presentation" summary="{intl l="My Address Books"}">
                                <tbody>
                                {loop type="address" name="customer.addresses"}
                                <tr class="{if $DEFAULT == 1}address-primary{else}address-additional{/if}">
                                    <th>{$LABEL}</th>
                                    <td>
                                        <ul class="list-address">
                                            <li>
                                                <span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$FIRSTNAME} {$LASTNAME}</span>
                                                {if $COMPANY}
                                                    <span class="org">{$COMPANY}</span>
                                                {/if}
                                            </li>
                                            <li>
                                                <address class="adr">
                                                    <span class="street-address">{$ADDRESS1}</span><br>
                                                    {if $ADDRESS2 != ""}
                                                        <span class="street-address">{$ADDRESS2}</span><br>
                                                    {/if}
                                                    {if $ADDRESS3 != ""}
                                                        <span class="street-address">{$ADDRESS3}</span><br>
                                                    {/if}
                                                    <span class="postal-code">{$ZIPCODE}</span>
                                                    <span class="locality">{$CITY}, <span class="country-name">{loop type="country" name="customer.country.info" id=$COUNTRY}{$TITLE}{/loop}</span></span>
                                                </address>
                                            </li>
                                            <li>
                                                {if $CELLPHONE != ""}
                                                    <span class="tel">{$CELLPHONE}</span><br>
                                                {/if}
                                                {if $PHONE != ""}
                                                    <span class="tel">{$PHONE}</span><br>
                                                {/if}
                                            </li>
                                        </ul>
                                    </td>
                                    <td>
                                        <div class="group-btn">
                                            <a href="{url path="/address/edit/{$ID}"}" class="btn btn-edit-address" data-toggle="tooltip" title="Edit this address"><i class="icon-pencil"></i> <span>{intl l="Edit"}</span></a>
                                            {if $DEFAULT != 1}
                                                <a href="#" class="btn btn-remove-address" data-toggle="tooltip" title="Remove this address"><i class="icon-remove"></i> <span>{intl l="Cancel"}</span></a>
                                            {/if}
                                        </div>
                                    </td>
                                </tr>
                                {/loop}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel account-orders">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#account" href="#account-orders">
                                {intl l="My Orders"}
                            </a>
                        </h4>
                    </div>
                    <div id="account-orders" class="panel-collapse collapse">
                        <div class="panel-body table-responsive">
                            <table class="table table-orders" summary="{intl l="List of orders"}">
                                <thead>
                                <tr>
                                    <th>{intl l="Order Number"}</th>
                                    <th>{intl l="Date"}</th>
                                    <th>{intl l="Amount"}</th>
                                    <th>{intl l="Status"}</th>
                                    <th>{intl l="View"}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {loop type="order" name="customer.orders"}
                                <tr>
                                    <td>{$REF}</td>
                                    <td>{format_date date=$CREATED_AT}</td>
                                    <td>{loop type="currency" name="order.currency" id={$CURRENCY}}{$SYMBOL}{/loop} {format_number number=$TOTAL}</td>
                                    <td><span class="label-delivered">{$STATUS}</span></td>
                                    <td><a href="#" class="btn btn-order-details" data-toggle="tooltip" title="{intl l="View order %ref as pdf document" ref={$REF}}"><span class="icon-cloud-download"></span> {intl l="Order details"}</a></td>
                                </tr>
                                {/loop}

                                </tbody>
                            </table>
                            {elseloop rel="customer.orders"}
                            <div class="orders-warning">
                                <strong>{intl l="Warning"}!</strong> {intl l="You don't have orders yet"}
                            </div>
                            {/elseloop}
                        </div>
                    </div>
                </div>
            </div>
        </article>

    </div><!-- /.layout -->

{/block}