{% extends '@PrestaShop/Admin/layout.html.twig' %}

{% block content %}
    <div class="col-sm-12">
        <div class="card">
            <nav class="pc-nav">
                <ul class="nav nav-tabs">        
                    <li class="nav-item">
                        <a id="nav-manufacturer" class="nav-link"  href="{{ path('polarisprestaconnector_map_manufacturer') }}">
                            <strong>Marques (⚑)</strong>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a id="nav-grid" class="nav-link"  href="{{ path('polarisprestaconnector_map_size_grid') }}">
                            <strong>Grilles de tailles (⚑)</strong>
                        </a>
                    </li>
                    {# pour chaque type de catégorie, on rend un onglet #}
                    {% for type,category in categoryTypes %}
                    <li class="nav-item">
                        <a id="nav-{{type}}" class="nav-link"  href="{{ path('polarisprestaconnector_map_typed_category', { 'type': type }) }}">
                            {{ category }}
                        </a>
                    </li>
                    {% endfor %}
                    <li class="nav-item">
                        <a id="nav-colormap" class="nav-link"  href="{{ path('polarisprestaconnector_map_shade') }}">
                            Couleurs
                        </a>
                    </li>   
                    <li class="nav-item">
                        <a id="nav-discounts" class="nav-link"  href="{{ path('polarisprestaconnector_map_discounts') }}">
                            Réductions
                        </a>
                    </li>
                    <li class="nav-item">
                        <a id="nav-stores" class="nav-link"  href="{{ path('polarisprestaconnector_map_stores') }}">
                            Magasins
                        </a>
                    </li>  
                </ul>
            </nav>
            <div class="card-body">                                
                {% if (form is null) %}
                {{help | raw}}
                <div style="margin: 1ex 4em;">
                    <table class="grid-table table polarisprestaconnector">
                        <thead class="thead-default">
                            <tr class="columns-headers">
                                <th>{{ map_key }}</th>
                                <th>{{ map_value }}</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        {# pour chaque élément de mappings, on affiche une ligne #}
                        {% for mapping in mappings %}
                            <tr>
                                <th>{{mapping.title | raw}}</th>
                                <td>
                                    {{(mapping.value_title ?? '-') | raw}}
                                </td>
                                <td>
                                    <a href="{{ path(edit_route, { 'id': mapping.key, 'type': cat_type ?? '' }) }}" 
                                        data-toggle="pstooltip"
                                        data-original-title="Modifier"
                                        class="btn tooltip-link js-link-row-action grid-modifier-row-link">
                                        <i class="material-icons">edit</i>
                                    </a>
                                    {# Si mapping.value est null, on affiche le bouton de création #}
                                    {% if mapping.value is null and help_automapping is defined and help_automapping != '' %}
                                        <a href="{{ path(edit_route, {'autocreate': mapping.key, 'type': cat_type ?? ''}) }}" 
                                            data-toggle="pstooltip"
                                            data-original-title="{{ help_automapping }}"
                                            class="btn tooltip-link js-link-row-action grid-modifier-row-link">
                                            <i class="material-icons">content_copy</i> 
                                        </a>
                                    {% endif %}      
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                {% else %}
                    <h3>Édition du mapping de «&nbsp;{{ edit_title }}&nbsp;»</h3>
                    {{ help_edit | raw }}
                    <div class="form-wrapper options">
                        {% include '@Modules/polarisprestaconnector/views/templates/admin/form.html.twig' %} 
                    </div>
                {% endif %}
            </div>      
        </div>
    </div>
    
{% endblock %}