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

{% set title = 'app.title.vehicle_file'|trans %}

{% block stylesheets %}
    <style>
        .nav-link.active {
            background-color: #17a2b8 !important;
        }
        a.nav-link {
            color: #17a2b8;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>
        <a href="{{ path('app_vehicle_list') }}" class="btn btn-sm btn-info"><span class="fas fa-fw fa-chevron-left"></span></a>
        {{ title }}
    </h1>


    <ul class="nav nav-pills" id="vehicleTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="informations-tab" data-toggle="tab" href="#informations" role="tab" aria-controls="home" aria-selected="true">{{ 'app.label.informations'|trans }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="photos-tab" data-toggle="tab" href="#photos" role="tab" aria-controls="profile" aria-selected="false">{{ 'app.text.photos'|trans }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="elabel-tab" data-toggle="tab" href="#elabel" role="tab" aria-controls="profile" aria-selected="false">{{ 'app.text.elabel'|trans }}</a>
        </li>
    </ul>
    {# Informations #}
    <div class="tab-content" id="vehicleTabsContent">

        <div class="tab-pane fade show active" id="informations" role="tabpanel" aria-labelledby="informations-tab">
            {% include 'vehicle/widget_info.html.twig' %}
        </div>

        {# Photos #}
        <div class="tab-pane fade" id="photos" role="tabpanel" aria-labelledby="photos-tab">
            {% include 'vehicle/widget_photos.html.twig' %}
        </div>

        {# Etiquette #}
        <div class="tab-pane fade" id="elabel" role="tabpanel" aria-labelledby="elabel-tab">
            {% include 'vehicle/widget_elabel.html.twig' %}
        </div>
    </div>


{% endblock %}

{% block javascripts %}
    {# Gestion de l'affichage des options #}
    <script type="text/javascript">
        $('.optionsButton').on('click', function()
        {
            $('.optionsButton').toggle();
            $('.optionsTd').toggle();
        });
    </script>

    <script type="text/javascript">
        $(function() {
            openTabHash(); // for the initial page load
            window.addEventListener("hashchange", openTabHash, false); // for later changes to url
        });


        function openTabHash()
        {
            console.log('openTabHash');
            // Javascript to enable link to tab
            var url = document.location.toString();
            if (url.match('#')) {
                $('.nav-pills a[href="#'+url.split('#')[1]+'"]').tab('show') ;
            }

            // With HTML5 history API, we can easily prevent scrolling!
            $('.nav-pills a').on('shown.bs.tab', function (e) {
                if(history.pushState) {
                    history.pushState(null, null, e.target.hash);
                } else {
                    window.location.hash = e.target.hash; //Polyfill for old browsers
                }
            })
        }
    </script>
{% endblock %}