{% extends 'front/base.html.twig' %}

{% block title %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('front/assets/css/account.css') }}">
{% endblock %}


{% block javascripts %}
    {{ parent() }}
     <script src="{{ asset('js/admin/country-region-loader.js') }}"></script>
    <script src="{{ asset('front/assets/scripts/user/account.js') }}"></script>


{% endblock %}

{% block body %}
    <main class="main" id="app" v-cloak="">

        <section class="pt-50 pb-50">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 m-auto">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="dashboard-menu">
                                    <ul class="nav flex-column" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="dashboard-tab" data-bs-toggle="tab"
                                               href="#dashboard" role="tab" aria-controls="dashboard"
                                               aria-selected="false"><i class="fi-rs-settings-sliders me-2"></i>Tableau
                                                de bord</a>
                                        </li>
                                        <li class="nav-item" @click="getData(1)">
                                            <a class="nav-link" id="orders-tab" data-bs-toggle="tab" href="#orders"
                                               role="tab" aria-controls="orders" aria-selected="false"><i
                                                        class="fi-rs-shopping-bag me-2"></i>Mes Commandes</a>
                                        </li>

                                        <li class="nav-item" @click="getExchanges(1)">
                                            <a class="nav-link" id="exchanges-tab" data-bs-toggle="tab" href="#exchanges"
                                            role="tab" aria-controls="exchanges" aria-selected="false">
                                                <i class="fi-rs-refresh me-2"></i>Mes échanges
                                            </a>
                                        </li>

                                        <li class="nav-item" @click="getReviews()">
                                            <a class="nav-link" id="reviews-tab" data-bs-toggle="tab" href="#reviews"
                                               role="tab" aria-controls="reviews" aria-selected="false">
                                                <i class="fi-rs-star me-2"></i>Mes avis
                                            </a>
                                        </li>

                                        <li class="nav-item" @click="getAdresses()">
                                            <a class="nav-link" id="address-tab" data-bs-toggle="tab" href="#address"
                                               role="tab" aria-controls="address" aria-selected="true"><i
                                                        class="fi-rs-marker me-2"></i>Mes adresses</a>
                                        </li>
                                        <li class="nav-item" @click="getDetails()">
                                            <a class="nav-link" id="account-detail-tab" data-bs-toggle="tab"
                                               href="#account-detail" role="tab" aria-controls="account-detail"
                                               aria-selected="true"><i class="fi-rs-user me-2"></i>
                                                Détails du compte</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="{{ path('app_logout') }}"><i
                                                        class="fi-rs-sign-out me-2"></i>Déconnexion</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="tab-content dashboard-content">
                                    {% include 'front/user/_tab/_tab_dashboard.html.twig' %}

                                    {% include 'front/user/_tab/_tab_orders.html.twig' %}
                                    {% include 'front/user/_tab/_tab_exchanges.html.twig' %}
                                    {% include 'front/user/_tab/_tab_reviews.html.twig' %}

                                    {% include 'front/user/_tab/_tab_adresses.html.twig' %}
                                    {% include 'front/user/_tab/_tab_account-detail.html.twig' %}



                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}