{% extends '/layouts/default.twig' %}

{% block site_body %}
    {% include '/partials/page-header.twig' with {
        title: 'My Account'
    } %}

    {% set account_pages = [
        {label: 'Dashboard', url: 'account-dashboard.html'},
        {label: 'Edit Profile', url: 'account-profile.html'},
        {label: 'Order History', url: 'account-orders.html'},
        {label: 'Order Details', url: 'account-order-details.html'},
        {label: 'Addresses', url: 'account-addresses.html'},
        {label: 'Edit Address', url: 'account-edit-address.html'},
        {label: 'Password', url: 'account-password.html'},
        {label: 'Logout', url: 'account-login.html'}
    ] %}

    <div class="block">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-3 d-flex">
                    <div class="account-nav flex-grow-1">
                        <h4 class="account-nav__title">Navigation</h4>
                        <ul>
                            {% for link in account_pages %}
                                <li class="account-nav__item {% if link.url == current_account_page %} account-nav__item--active {% endif %}">
                                    <a href="{{ link.url }}">{{ link.label }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-lg-9 mt-4 mt-lg-0">
                    {% block account_body %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
