{% extends 'base.html.twig' %}
{% block title %}Portal Users | Novamar Insurance Mexico{% endblock %}
{% block css %}
     {{encore_entry_link_tags('panelPrincipalCSS')}}
{% endblock %}
{% block body %}
<main class="container-all d-flex" id="main">
    <section class="left-section d-none" id="sidebar-panel">
        {{include("./panel-user/complements/sidebar.twig")}}
    </section>
    <section class="right-section d-none" id="right_section_panel">
        <section class="container-fluid" id="containerPolicies">            
            <div class="row">
                <div class="col-md-12 text-left mt-4">
                    <h5 class="modal-title d-flex" id="view-client-info-modalLabel">                    
                        <span class="d-flex align-items-center">My Policies</span>
                    </h5>
                    {# <div class="alert-warning p-3">
                        In this section you will can consult the policies issued only by our <b>Online quoters</b>.<br>
                        If you have issued more policies with one of our executives and need to consult, Please contact us at info@novamar.net.
                    </div> #}
                    <hr>
                    <div v-if="products.length == 0">
                        No policies to show
                        <hr>
                    </div>
                    <h1 class="text-center text-dark" v-if="products.length == 0">Get to know our products</h1>
                    <div v-if="products.length == 0"> {{ include('components/middle-menu.twig')}}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-left">                        
                    <div id="accordion" v-if="products.length != 0">
                        <div class="card" v-for="(product, key, index) in products" :key="product[key]" :id="'content-product-' + key">
                            <div class="card-header" :id="'#heading' + key">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" @click="showCollapse(key)" aria-expanded="true">
                                        [[ product.name ]]
                                    </button>
                                </h5>
                            </div>
                            <div :id="'collapse' + key" class="collapse show" data-parent="#accordion" v-if="index == 0">
                                <div class="card-body row">
                                    {{include('./panel-user/complements/productCard.twig')}}
                                </div>
                            </div>
                            <div :id="'collapse' + key" class="collapse" data-parent="#accordion"  v-if="index != 0">
                                <div class="card-body row">
                                    {{include('./panel-user/complements/productCard.twig')}}
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </section>
        <section class="container-fluid d-none" id="containerProfileInfo">
            {{include('./panel-user/complements/form-view-information.twig')}}
        </section>        
        <section class="container-fluid d-none" id="containerHelpSection">
            {{include('./panel-user/complements/help-section.twig')}}
        </section>                
    </section>
    {# load section #}
    <section class="container-fluid d-flex justify-content-center align-items-center" id="containerLoadSection">
        <img src="{{ asset('img/load75x75.gif')}}" alt="loader panel">
    </section>
    {{include('./panel-user/complements/modal-solicitud-cambio-informacion.twig')}}
    {{include('/panel-user/complements/modal-cambiar-contrasenia.html.twig')}}
    {{include('/panel-user/complements/modal-view-sicas-docs.twig')}}
    {{include('/panel-user/complements/modal-endorsment-by-product.twig')}}
    {# <input type="hidden" id="panelData" value="{{panelData}}"> #}
   
</main>
{% endblock %}

{% block scripts %}
    {% if app.environment != 'dev' %}
        <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
        <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% endif %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.js"></script>
    {{script_tag('libraries/sweet-alert.js') }}
    {{script_tag("libraries/jquery-validate.js")}}
    {{script_tag("components/tools.js")}}
    {{script_tag("pages/panel-principal.js")}} 
    {{script_tag("pages/diccionario-help.js")}}
    {{script_tag("components/nationality-list.js")}}
{% endblock %}