@extends('layouts.head')

@section('page-title', 'Comparatif')


@section('content')

<div class="prevent_pixel d-flex flex-column justify-content-between h-100">
    <main class="compare_general main_breath d-flex flex-column justify-content-between">
        <div class="compare_top">
            <h1>Comparatif des <span>profils / des portraits<span></h1>
        </div>

        <div>
            <div class="d-flex justify-content-end">
                <div>
                    <ul class="nav nav-tabs" id="myTabCompare" role="tablist">
                        <li class="nav-item" role="presentation">
                        <button class="nav-link p_tabs active " id="univarie-tab" data-bs-toggle="tab" data-bs-target="#univariate" type="button" role="tab" aria-controls="univarie" aria-selected="true">
                            <img src="{{asset('img/icons/icon_id.svg')}}" alt="icône de description">
                            <span>Univarié</span>
                        </button>
                        </li>
                        <li class="nav-item" role="presentation">
                        <button class="nav-link p_tabs" id="bivarie-tab" data-bs-toggle="tab" data-bs-target="#bivariate" type="button" role="tab" aria-controls="bivarie" aria-selected="false">
                            <img src="{{asset('img/icons/icon_stats.svg')}}" alt="icône de description">
                            <span>Bivarié</span> 
                        </button>
                        </li>
                        
                    </ul>
                </div>
            </div>

            <div class="tab-content" id="myTabContentCompare">
                <div class="tab-pane h-100 active" id="univariate" role="tabpanel" aria-labelledby="univarie-tab">
                    @include('layouts.components.compare-uni')
                </div>
                <div class="tab-pane h-100" id="bivariate" role="tabpanel" aria-labelledby="bivarie-tab">
                    @include('layouts.components.compare-bi')
                </div>
    
            </div>
        </di    v>
        
    </div>

    </main>
    @include('layouts.components.footer')

</div>






@endsection